Avoiding Artifacts

cocos2d-x C++
1

Hi, how am i supposed to avoid artifacts without using CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL (horrible stuttering while moving) and without setAliasTexParameters (bad quality while scaling)?
Atlas was created with 2px transparent border for each element. Camera is set to 2D projection.
I have also tried to set CC_NODE_RENDER_SUBPIXEL and CC_SPRITEBATCHNODE_RENDER_SUBPIXEL to 0.
Whatever i have tried, the result looks like this:

it renders a line between two elements.

Any advices?

2

Is this a tilemap ? Is it possible to get a sample file that can recreate this issue?

3

Sorry, i forgot to mention it.
It’s not tilemap. These are sprites, that are moving from right to left.

auto move = cocos2d::MoveBy::create(0.125f, cocos2d::Vec2(-10.0f, 0.0f));
sprite->runAction(cocos2d::RepeatForever::create(move));

I’m not allowed to show full file, but this should help: http://i.imgur.com/XAaZZvo.png

4

So, there’s no solution of this?
In v3.5, it still occurs. Am I really forced to not using sprite sheets?

5

You should always try and use sprite sheets whenever possible, As far as i understand u don’t have any tile-map representation of your level, you are just using a collection of sprites by aligning them one after other and then scrolling the parent node, Well this shall never show any artifacts until n unless your offset value is correct,

6

As far as i understand u don’t have any tile-map representation of your level, you are just using a collection of sprites by aligning them one after other and then scrolling the parent node

Yes, i don’t have any tile-map representation. However, in this situation i’m moving sprites individually.
I don’t even think that creating parent node will help - in other scene where scene’s layer is scrolling with this:
Layer::setPositionY(roundf(Layer::getPositionY() + touch->getDelta().y));
tiny black lines occurs between sprites after position changing.

Well this shall never show any artifacts until n unless your offset value is correct,

They are correct for sure.
With enabled CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL artifacts never occurs.

7

just to be sure, can you please put all your sprites in a parent node and then try offset the parent node by a fix position say-

  void float update(float dt){
    	float PIXELS_PER_SECOND = 100;
    	static float offset = 0;
    	offset += PIXELS_PER_SECOND * dt;
            parent->setPosition(Vec2(-_offsetX * parent->getScale(), 0));
}
8

Unfortunately, there’s no difference.
For now the only way to fix it is to disable antialiasing which i don’t want to do.
Here’s a simple project to show the problem:
http://speedy.sh/6aQGv/Arti.zip
There’s no even need to moving sprites.

Anyway thanks for better way to handling this.

9

I know this is an old conversation, but I’ve gone through a few posts similar to this one and still haven’t found a clear answer as to how to deal with the artifacts and spacing between tiles when importing a .tmx file. I figured out how to solve this issue and it works with non a 1:1 TMXTiledMap too! This means you can scale your tile maps and also get rid of the artifacts as well as using anti-aliasing. I created an account just to post this for anyone looking for an answer. Here’s how I did it:

  1. Download Texture Packer if your haven’t already. Do it! It’s free and it’s a great tool for creating 2d sprite sheets. Also we need it’s border padding and shape padding features. Download here: https://www.codeandweb.com/texturepacker/download

  2. Open Texture Packer.

  3. Under the texture section, change png opt level to 0, unless you’re using the pro version. Also, unless you’re using the pro version, click show advanced under the layout section and uncheck detect identical sprites.

  4. Under the layout section, change the algorithm to basic, and sort by to name. This will arrange your tiles by alphabetical order, allowing you to choose . Here’s an example as to how to name your sprites: “01_whole_block.png, 02_half_block.png.”

  5. Drag and drop, or import your sprites into Texture Packer.

  6. Under the sprites section, switch trim mode to none, and change border padding and shape padding both to 1.

  7. Go ahead and click publish sprite sheet and save it to wherever.

  8. Open Tiled and create a new map. Keep the tile size to the exact size of your tiles without the padding.

  9. Click Map > New Tileset. Keep the tile width and height to the exact size of your tiles without the padding. Change Margin and Spacing both to 1px. Import your sprite sheet.

  10. Create an awesome tile map and save it out. Import it into your project and click on the file to edit the .tmx file.

  11. Inside the map tag change the tilewidth and tileheight to 1 pixel less than their original size. In my case they were 138 px, so I changed them both to 137 px. Do not change the tilewidth and tileheight inside the tileset tag.

That’s it! That will fix the problem. What I believe is happening is the anti-aliasing is creating blurry pixels on the outside of the tiles and instead of bleeding into the next tile, it bleeds into the margin, which is being sliced off.

2 Likes