axmolengine / axmol

Axmol Engine – A Multi-platform Engine for Desktop, XBOX (UWP) and Mobile games. (A fork of Cocos2d-x-4.0)
https://axmol.dev
MIT License
868 stars 195 forks source link

Rendering artifacts #1552

Closed Nordsoft91 closed 8 months ago

Nordsoft91 commented 9 months ago

While rendering of tiles I'm observing graphical artifacts:

Снимок экрана 2023-12-28 в 17 37 48

I use tiles 32x32 pix and place them one by one as Sprite instances in same layer in the same z-order.

UPD:

Steps to reproduce:

  1. Copy image attached to content folder (or use any image with alpha transparency, but on first example above I used image without alpha channel) grid_color 2.. add following code into scene::init
    for(int j = 0; j < 20; ++j)
    {
    for(int i = 0; i < 20; ++i)
    {
        auto * s = ax::Sprite::create("grid_color.png", ax::Rect(192, 0, 32, 32));
        s->setPosition(i * 32, j * 32);
        addChild(s);
    }
    }

Expected result: seamless colored rectangle Actual results: grid appeared

Снимок экрана 2023-12-30 в 23 44 52
aismann commented 9 months ago

Is there way to fix them?

Source example which is working for debug can help to fix. Only an idea: Can you try to build with axmol 2.0.0, same behavior here?

rh101 commented 9 months ago

While rendering of tiles I'm observing graphical artifacts: Снимок экрана 2023-12-28 в 17 37 48

I use tiles 32x32 pix and place them one by one as Sprite instances in same layer in the same z-order.

Is there way to fix them?

Is there any particular reason the bug report template wasn't used? Refer to this: https://github.com/axmolengine/axmol/issues/new/choose

It would have prompted you to add information that is missing in your post.

What you've written provides no useful information in order to even attempt to help you with this.

For example:

Nordsoft91 commented 9 months ago

@rh101 , updated

rh101 commented 9 months ago

@Nordsoft91

Option 1: In core/base/Config.h, set AX_FIX_ARTIFACTS_BY_STRECHING_TEXEL to 1, and see if that helps.

Option 2: The better way to fix this would be to either use a sprite sheet with sufficient padding between the separate frames to avoid the graphical artifacts, or use individual image files. Leave AX_FIX_ARTIFACTS_BY_STRECHING_TEXEL as 0.

Using an individual image:

grid_color-6 and this code:

for (int j = 0; j < 20; ++j)
{
    for (int i = 0; i < 20; ++i)
    {
        auto* s = ax::Sprite::create("grid_color-6.png");
        s->setPosition(i * 32, j * 32);
        addChild(s);
    }
}

Results in this output: image

Using a sprite sheet (border = 1, shape padding = 2, extrude = 1 in TexturePacker):

grid_color_spritesheet This archive contains the PNG and PLIST generated by splitting the frames from your original image, then combining them into the correct sprite sheet in TexturePacker: grid_color_spritesheet.zip

Using this code to load the sprite sheet and generate the sprite from one of the frames:

SpriteFrameCache::getInstance()->addSpriteFramesWithFile("grid_color_spritesheet.plist");

for (int j = 0; j < 20; ++j)
{
    for (int i = 0; i < 20; ++i)
    {
        auto* s = ax::Sprite::createWithSpriteFrameName("grid_color-6.png");
        s->setPosition(i * 32, j * 32);
        addChild(s);
    }
}

Results in this: image

More info regarding the texture packer settings and why they are required: https://www.codeandweb.com/texturepacker/documentation/texture-settings#shape-padding---shape-padding-number https://www.codeandweb.com/texturepacker/documentation/texture-settings#extrude---extrude-number

aismann commented 9 months ago

@rh101 Good explanation, thanks!

@halx99 I mean: It should be part of the documentation

Nordsoft91 commented 9 months ago

confirm fix with AX_FIX_ARTIFACTS_BY_STRECHING_TEXEL = 1, will redo all textures with TexturePacker later, thanks!

rh101 commented 8 months ago

confirm fix with AX_FIX_ARTIFACTS_BY_STRECHING_TEXEL = 1, will redo all textures with TexturePacker later, thanks!

If this is all sorted for you, can you please close this issue?

aismann commented 8 months ago

@Nordsoft91 , @halx99 Please close it