I am using AndEngine (2D OpenGL-based engine). When i use textures with transparency (PNG images) i have image artifacts on the borders on image. I need help fixing this. I have attached 2 images. On first i have just text displayed using some font. On the second you can see the rounded corner but on the corner of the texture you can see the artifact as well. Please note that this occurs only on REAL device. On emulator all is OK. My device is Samsung i5700 Galaxy Spica running Android 2.1
1
votes
Have you verified there are no artifacts in the image itself? If so, your problem is likely related to dithering.
– Chris Cashwell
I verified it in Image editors. images are ok. Also on emulator all is ok.
– Taras
Yes I am using BitmapTexureAtlas
– Taras
5 Answers
10
votes
Big Community Wiki of AndEngine Artifacts
Sprite artifacts
BILINEAR filtering interpolates the colour of the nearest four pixels, which makes the texture nice while scaled/rotated, or shifted with non-integer values, but has some difficulties.
Black or dark line artifact
The texture atlas background is possibly black, and edge pixels of the texregion get mixed with this background. Use a custom transparent texture atlas, or use a modified TextureAtlas builder which fills up itself with transparency (TODO find forum link where this is described)
Sprite edge has unwanted alpha
If the texture background is transparent, the alpha is still mixed into edge colors. Add an 1-pixel extrusion to your texture region (repeat the edge pixels in an extra row/col at the edges), and position your region edges between the original and the added edge pixels. This will make sure bilinear interpolation picks only pixels from your region.
Other edge artifact
If texture regions are too close, a region edge may take some pixels from an other regions edge. Use padding between texture regions.
Text artifacts
Ocassional small vertical line under the baseline (GLES1)
In my font, the J char had an overly left-extending lower curve, which causes a small artifact when rendering the I letter, since IJ are next to each other in the texture, and possibly too near.
Try lowering the font size, increasing the texture size, or hacking in larger Font.PADDING value (5 worked for me instead of 1). Note however that by default, increasing the PADDING increases the line spacing too, which may not be desired. A new YPADDING can be introduced and used where necessary to compensate.
Disappearing letters
The letters are rendered to the Font texture atlas on-demand. This can lead to running out of space on the texture atlas, yielding fun effects (see Dissapearing ChangeableText).
One solution can be to insert this snippet to the Font#createLetter(char) method:
if (this.mCurrentTextureY + letterHeight > textureHeight) {
throw new IllegalStateException("Could not allocate space for letter " + pCharacter + " on texture. " +
"Please enlarge the texture atlas size. This would be letter #" + this.mLetterCount);
}
5
votes
I figured out the solution. The reason behind these artifacts was the texture filtering settings. I used TextureOptions.BILINEAR and TextureOptions.BILINEAR_PREMULTIPLYALPHA which caused the artifacts. I selected the TextureOptions.DEFAULT and the textures became crisp and without any artifacts. There's one drawback though. I have smooth sprite movement in my game. But with this new filtering setting(and texture crispness as a result) the sprite movement became not smooth... a bit choppy. Will need to create couple of TextureAtlases with different filtering options.
2
votes
0
votes
