Original Post
I have been trying to implement animated sprites using a spritesheet in LWJGL, but I'm having some issues with my sprites bleeding into each other. My sprite sheet is 256 x 512 pixels, with 4 x 4 sprites which are each 64 x 128 pixels, for a walking animation in 4 directions. The problem is that each sprite is positioned so that the pixels of the feet are on the edge of the sprite which causes lines to appear above the head on the sprite below it. However, this doesn't happen consistently, only on certain parts of the screen apparently, and not always the same colour even though it should be the same colour. All of my sprites also seem to blur slightly sometimes.
Here is the code for the draw method of my Sprite class:
The spriteTextureWidthRatio and spriteTextureHeightRatio variables are spriteWidth / textureWidth and spriteHeight / textureHeight respectively.
I've read somewhere that the issue might be caused because I'm using floating point values for the texture coordinates. In this case the values for the coordinates will be either 0.0, 0.25, 0.50, 0.75 or 1.0 depending on which part of the sprite sheet is drawn, which would make OpenGL do some weird stuff where it offsets by a half pixel or something, causing the bleeding and the blurriness in some cases. I've heard that I could scale the texture instead using a texture matrix and then access the different parts of the spritesheet with integer values which in this case would be 0 to 4. I don't know how I would go about doing this (I'm fairly new to OpenGL) or if this would solve the problem at all.
I've seen other places where people recommend using a 1 pixel transparent border around every sprite. I think the problem with this solution is that it doesn't work for tilesets where you don't want a border between your tiles.
Either way, I'm hoping someone here can tell me what the right way to do it is. I'm probably only having this problem because I'm such a noob when it comes to OpenGL.
Here is the code for the draw method of my Sprite class:
public void draw(float x, float y) {
GL11.glBindTexture(GL11.GL_TEXTURE_2D, texture.getTextureID());
float currentOffsetX = (float)(offsetX + currentFrame) * spriteTextureWidthRatio;
float currentOffsetY = (float)offsetY * spriteTextureHeightRatio;
GL11.glBegin(GL11.GL_QUADS);
GL11.glTexCoord2f(currentOffsetX, currentOffsetY);
GL11.glVertex2f(x,y);
GL11.glTexCoord2f(currentOffsetX + spriteTextureWidthRatio, currentOffsetY);
GL11.glVertex2f(x + width, y);
GL11.glTexCoord2f(currentOffsetX + spriteTextureWidthRatio, currentOffsetY + spriteTextureHeightRatio);
GL11.glVertex2f(x + width, y + height);
GL11.glTexCoord2f(currentOffsetX, currentOffsetY + spriteTextureHeightRatio);
GL11.glVertex2f(x, y + height);
GL11.glEnd();
}
The spriteTextureWidthRatio and spriteTextureHeightRatio variables are spriteWidth / textureWidth and spriteHeight / textureHeight respectively.
I've read somewhere that the issue might be caused because I'm using floating point values for the texture coordinates. In this case the values for the coordinates will be either 0.0, 0.25, 0.50, 0.75 or 1.0 depending on which part of the sprite sheet is drawn, which would make OpenGL do some weird stuff where it offsets by a half pixel or something, causing the bleeding and the blurriness in some cases. I've heard that I could scale the texture instead using a texture matrix and then access the different parts of the spritesheet with integer values which in this case would be 0 to 4. I don't know how I would go about doing this (I'm fairly new to OpenGL) or if this would solve the problem at all.
I've seen other places where people recommend using a 1 pixel transparent border around every sprite. I think the problem with this solution is that it doesn't work for tilesets where you don't want a border between your tiles.
Either way, I'm hoping someone here can tell me what the right way to do it is. I'm probably only having this problem because I'm such a noob when it comes to OpenGL.
