# What is causing these visual artifacts on my OpenGL sprites?

What could be the cause of the defects in my characters sprite? I am using OpenGL ES 2.0. I draw my sprites in a sprite batch that uses UV coordinates from one large texture atlas. If you look around the character' edges, you'll see two noticeable problems:

1. The invisible alpha background is not invisible, but shows a strange static-like background.

2. There are unwanted streaks where the character nears the edge of the frame (but only in some frames of the animation, this happened to be one of them).

Any idea what could be causing these? I will provide related code if asked for, but I'll try to avoid just dumping the entire project and expecting someone to look through it all.

EDIT: Here's a bit of code:

This is how I generate my UV coordinates:

private float[] createFrameUV(int frameWidth, int frameHeight, int x, int y){

float[] uv = new float[4];

if(numberOfFrames>1){
float width = (float)frameWidth / (float)mBitmap.getWidth();
float height = (float)frameHeight / (float)mBitmap.getHeight();
float u = (float)x / (float)mBitmap.getWidth();
float v = (float)y / (float)mBitmap.getHeight();

uv[0] = u;
uv[1] = v;
uv[2] = u + width;
uv[3] = v + height;
}else{
uv[0] = 0f;
uv[1] = 0f;
uv[2] = 1f;
uv[3] = 1f;
}

return uv;
}


These are some OpenGL settings:

GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR);
GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);
GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE);
GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE);

• I would look at the source of the sprite itself. My guess would be it's the compression or how the image is being saved. Maybe try (backing up first) cleaning up the 'transparent' parts around the character for a frame or two and saving it as a 32bit png if that's possible to use. – Darren Reid Nov 22 '11 at 7:42
• I'm 99.9% sure there's nothing wrong with the source image. The problem seems to be related to scaling down. The portion of a circle you see to the left of the character is partially obscured, but the entire frame is the same size on the source texture as the character's frame. You'll notice it has no problems with its alpha. I'm still wondering to begin fixing this. – Amplify91 Nov 22 '11 at 8:25
• about the sprite: is your uv wrap mode set to clamp (assuming one texture per frame)? if you have several frames in a single texture, it's just a matter of defining your uv coordinates so that you take the texel center into account. – Jari Komppa Nov 22 '11 at 8:31
• about the invisible bg: it's hard to tell from the screenshot, but it seems to me like you might have dithering enabled. – Jari Komppa Nov 22 '11 at 8:32
• Here's a page regarding pixel/texel centers: drilian.com/2008/11/25/… - and I meant OpenGL dithering, not photoshop dither (glDisable(GL_DITHER)) – Jari Komppa Nov 22 '11 at 12:21

Here are a few thoughts :

for your "invisible" background, make sure that your texture has a power of two resolution, and lies in a "drawable-nodpi" resource folder

the strange artifact may be caused by dithering (you can use glDisable(GL_DITHER) to prevent this)

for your character, it's most likely a problem in your large texture where the pixels around your character are read by the filtering (maybe due to floating point error when computing the uv). I'd suggest leaving some space between two unrelated sprites in your texture atlas.

• My source image was fine and not being scaled for screen density. The problem was dithering after all. That one line solved my background problem :) thanks! And I'm sure you're probably right about needing to leave more space between my sprites. – Amplify91 Nov 22 '11 at 16:52

Looks like two primary causes to me.

First of all, the black lines on the bottom and left of the character look like bilinear sampling artefacts. You can quickly confirm this by switching to nearest neighbour sampling and see if they occur there. One solution might be to add some padding around your sprite images so that bilinear sampling doesn't cause them to bleed into neighbours (or borders).

The background of the sprite looks like a compression aretfact. Are you uploading this image using a compressed format?

• I'm sure you're right about it being a bi-linear sampling problem. I'll look into rearranging my sprite sheet. The other problem was caused by dithering. Thanks for your help! – Amplify91 Nov 22 '11 at 16:54