Rendering artifacts

[Nordsoft91]

While rendering of tiles I'm observing graphical artifacts:

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

UPD:

• MacOS M1
• axmol 2.1.0-rc7

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)
   
   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

[aismann]

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]

While rendering of tiles I'm observing graphical artifacts:

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:

• Which operating system, which platform etc. etc.
• Show the exact source images you're using that cause this issue
• Show source code that reproduces this issue. It's not obvious if you're referring to the TileMap support, or manually placing images that you're calling "tiles".
• Show what you're actually seeing (as you already have), and what you expect to see.

[Nordsoft91]

@rh101 , updated

[rh101]

@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:

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:

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

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:

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]

@rh101
Good explanation, thanks!

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

[Nordsoft91]

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

[rh101]

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]

@Nordsoft91 , @halx99
Please close it

[aismann]

I added a wiki page:
https://github.com/axmolengine/axmol/wiki/Renedering-artefacts-with-'tile'-based-textures