Search code examples
cocos2d-xcocos2d-x-3.0texturepacker

Why are there black lines between my sprites?


I have a single pixel sprite. To this sprite I add four sprites, each a quarter of a square. To offset the sprites, all i do is change their anchor points.

For example:

top right square is at anchor: (0,0); bottom right : (0,1); bottom left : (1,1); top left : (1,0);

I expected the sprite edges to meet perfectly so that it looks like one big square. Instead there are black lines between the edges of each square so it looks like I have placed four squares close together.

I use texture packer to create a sprite sheet, containing the various squares.

Is there some setting in cocos2d-x or some code I must change to get the sprites to align perfectly ?

Edit: This is for cocos2d-x 3.1.1 and higher. Changing the anchor point is necessary and unavoidable.

EDIT: I use sprite frames from a sprite sheet created using TexturePacker. This was the problem. See my answer below.


Solution

  • The problem has something to do with using a sprite sheet (created using TexturePacker) to hold the pieces together. When you place the frames from the sprite sheet together to form a complete image the lines appear.

    You can make the black lines disappear by setting the "Extrude" option in Texturepacker to at least 1.

    EDIT: For those of you updating sprite positions based on a physics simulation, black lines can be caused by "sub pixel" positions. Try to either move your objects by complete pixels. Or search for answers with "sub pixel" for other solutions.