Black lines around sprites

[ixque]

Hey guys,

Love the engine, but got one nasty little problem. I got black lines around my sprites. Not always. Sometimes they're gone, next time i run the application they are all over the place. It's totally random.

Screenshot is here:
http://imageshack.us/f/190/sc20111005232444.jpg/

This is part of my texture loading code. The rest is kinda the same. All with enough padding so the others sprites won't overlap.

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using java Syntax Highlighting

1. Game.resourceManager = new ResourceManager();
2.                
3.                 BitmapTextureAtlasTextureRegionFactory.setAssetBasePath("gfx/");
4.                
5.                 // HUD textures
6.                 BitmapTextureAtlas hudAtlas = new BitmapTextureAtlas(1024, 1024, TextureOptions.BILINEAR);
7.                
8.                 TextureRegion hud_bar = BitmapTextureAtlasTextureRegionFactory.createFromAsset(hudAtlas, this, "hud/bar.png", 0, 0);
9.                 Game.resourceManager.addSprite("hud_bar", 10f, 800f, hud_bar);
10.                
11.                 TextureRegion hud_info = BitmapTextureAtlasTextureRegionFactory.createFromAsset(hudAtlas, this, "hud/info.png", 11, 0);
12.                 Game.resourceManager.addSprite("hud_info", 173f, 48f, hud_info);
13.                
14.                 TextureRegion hud_info2 = BitmapTextureAtlasTextureRegionFactory.createFromAsset(hudAtlas, this, "hud/info2.png", 185, 0);
15.                 Game.resourceManager.addSprite("hud_info2", 173f, 48f, hud_info2);

Parsed in 0.032 seconds, using GeSHi 1.0.8.4

Anybody who knows the magic answer?

Thanks in advance!

[AlexNunn]

How much padding did you add? Looks like maybe it's because they're rotated?

[ixque]

Tried it with 1px padding, 5px padding and 100px padding.

[ixque]

There is a topic about texture bleeding which sounds like the same problem im having. http://www.andengine.org/forums/development/another-question-about-texture-bleeding-t5280.html

Like suggested in the topic, i added a margin of a few pixels inside my graphic files, but the problem still remains. Here is another screenshots: http://imageshack.us/f/200/sc20111008141045.jpg/

Only the 'NEAREST' texture options doesn't show the problem. Also tried it on the emulator, but the same problem remains.

[ixque]

Found out that the problem is the same on the AndEngine examples, but only on the physics examples. The sprite benchmarks show nothing, but the physics benchmark shows some black lines around the sprites. Strange thing is that in my game the static, non-physics sprites also have black lines around them.

I'm testing it on a Samsung Galaxy Tab 10.1. Maybe it's a resolution problem or a device problem?

[ixque]

Ok, fixed it. Though with a ugly hack.

I added some padding in the TextureRegionFactory to my textures. I extended some class and needed to set some members to protected, but it works smooth now. Here is the cod:

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using java Syntax Highlighting

1. public class MyTextureRegionFactory extends BitmapTextureAtlasTextureRegionFactory {
2.        
3.         public static TextureRegion createFromAsset(final BitmapTextureAtlas pBitmapTextureAtlas, final Context pContext, final String pAssetPath, final int pTexturePositionX, final int pTexturePositionY, final int padding) {
4.                 Log.e("fsdfds", " daar isieee!");
5.                 final IBitmapTextureAtlasSource bitmapTextureAtlasSource = new AssetBitmapTextureAtlasSource(pContext, BitmapTextureAtlasTextureRegionFactory.sAssetBasePath + pAssetPath);
6.                 return createFromSource(pBitmapTextureAtlas, bitmapTextureAtlasSource, pTexturePositionX, pTexturePositionY, padding);
7.         }
8.        
9.         public static TextureRegion createFromSource(final BitmapTextureAtlas pBitmapTextureAtlas, final IBitmapTextureAtlasSource pBitmapTextureAtlasSource, final int pTexturePositionX, final int pTexturePositionY, final int padding) {
10.                 return createFromSourcePadded(pBitmapTextureAtlas, pBitmapTextureAtlasSource, pTexturePositionX, pTexturePositionY, sCreateTextureRegionBuffersManaged, padding);
11.         }
12.        
13.         public static <T extends ITextureAtlasSource> TextureRegion createFromSourcePadded(final ITextureAtlas<T> pTextureAtlas, final T pTextureAtlasSource, final int pTexturePositionX, final int pTexturePositionY, final boolean pCreateTextureRegionBuffersManaged, final int padding) {
14.                 final TextureRegion textureRegion = new TextureRegion(pTextureAtlas, pTexturePositionX+padding, pTexturePositionY+padding, pTextureAtlasSource.getWidth()-padding*2, pTextureAtlasSource.getHeight()-padding*2);
15.                 pTextureAtlas.addTextureAtlasSource(pTextureAtlasSource, textureRegion.getTexturePositionX()-padding, textureRegion.getTexturePositionY()-padding);
16.                 textureRegion.setTextureRegionBufferManaged(pCreateTextureRegionBuffersManaged);
17.                 return textureRegion;
18.         }
19.        
20. }

Parsed in 0.036 seconds, using GeSHi 1.0.8.4

Good luck

[ill2005]

Amazing! Thank you! I've been trying to get rid of those stupid lines FOREVER!

I am using Tiled Regions for AnimatedSprites, so I changed your code up just a tad. I also set my sCreateTextureRegionBuffersManaged and sAssetBasePath as constants rather than making them protected, since they will never vary in my current project.

Here is my code:

Syntax: [ Download ] [ Hide ]

Syntax: [ Download ] [ Show ]

Using java Syntax Highlighting

1. public class MyTextureRegionFactory extends BitmapTextureAtlasTextureRegionFactory {
2.    
3.         public static TiledTextureRegion createTiledFromAsset(final BitmapTextureAtlas pBitmapTextureAtlas, final Context pContext, final String pAssetPath, final int pTexturePositionX, final int pTexturePositionY, final int pTileColumns, final int pTileRows, final int padding) {
4.                 final IBitmapTextureAtlasSource bitmapTextureAtlasSource = new AssetBitmapTextureAtlasSource(pContext, "gfx/" + pAssetPath);
5.                 return createTiledFromSource(pBitmapTextureAtlas, bitmapTextureAtlasSource, pTexturePositionX, pTexturePositionY, pTileColumns, pTileRows,padding);
6.         }
7.        
8.         public static TiledTextureRegion createTiledFromSource(final BitmapTextureAtlas pBitmapTextureAtlas, final IBitmapTextureAtlasSource pBitmapTextureAtlasSource, final int pTexturePositionX, final int pTexturePositionY, final int pTileColumns, final int pTileRows, final int padding) {
9.                 return createTiledFromSourcePadding(pBitmapTextureAtlas, pBitmapTextureAtlasSource, pTexturePositionX, pTexturePositionY, pTileColumns, pTileRows, false, padding);
10.         }
11.        
12.        
13.         public static <T extends ITextureAtlasSource> TiledTextureRegion createTiledFromSourcePadding(final ITextureAtlas<T> pTextureAtlas, final T pTextureAtlasSource, final int pTexturePositionX, final int pTexturePositionY, final int pTileColumns, final int pTileRows, final boolean pCreateTextureRegionBuffersManaged, final int padding) {
14.                 final TiledTextureRegion tiledTextureRegion = new TiledTextureRegion(pTextureAtlas, pTexturePositionX+padding, pTexturePositionY+padding, pTextureAtlasSource.getWidth()-padding*2, pTextureAtlasSource.getHeight()-padding*2, pTileColumns, pTileRows);
15.                 pTextureAtlas.addTextureAtlasSource(pTextureAtlasSource, tiledTextureRegion.getTexturePositionX()-padding, tiledTextureRegion.getTexturePositionY()-padding);
16.                 tiledTextureRegion.setTextureRegionBufferManaged(pCreateTextureRegionBuffersManaged);
17.                 return tiledTextureRegion;
18.         }
19.  
20. }

Parsed in 0.040 seconds, using GeSHi 1.0.8.4

A new problem that arose: sprites tend to move around in the animation frame. My current fix for this is to adjust the spacing between frames in the png files.

For example: my image is 4 columns, 1 row (sprite-wise). I move frame 2 to the left 1 px. I move frame 3 to the left 2 px. And I move frame 4 to the left 3 px. This fixes the sprite movement in the animation.

I will probably realize a more elegant solution (or realize I was just making dumb mistakes), but I wanted to say what I did thus far in case someone else has a similar issue.

[whalabi]

I've got a hack that works well! It seems to work for tiled, fonts, whatevs.

At least, it works for me. There could be multiple causes of this problem.


Basically, when you make a new BitmapTextureAtlas or whatever, draw a completely blank (that's transparent, not black) png onto it, so that it covers the atlas completely.

E.g.:
atlas = new BitmapTextureAtlas(1024, 1024, BitmapTextureFormat.RGBA_8888, textureOptions);

BitmapTextureAtlasTextureRegionFactory.createFromAsset(atlas, context, "blank1024.png", 0, 0);


Then, add the rest of your textures over it, pretending the blank one isn't there.

NOTE: you may have to position your textures so that they aren't touching eachother or the sides - so place your first texture at 1, 1 and put the next one 1 pixel away from any other etc.


Let me know if it works for you, and if there's a way to do this properly (and what this actually tells us)

[ill2005]

I just confirmed whalabi's hack. Worked for me! I like it better than extending the TextureFactory because I don't have to make wonky animation sprites. Thanks whalabi!

[whalabi]

Glad to hear it!

Does anyone know how to fill a texture with transparent pixels in openGL without needing an actual image file? This would be better because then I could fill any size texture

Of course ideally it just wouldn't happen at all