Pixel / Scaling Error

I noticed a couple of strange pixel Errors in my Game and got no idea where they would come from. There’s an image attached which shows three of them. They could be related too each other but I’m not sure. I also included some of my code. Any help would be appreciated! :slight_smile:
If there’s anything I should explain in more detail let me know. Thanks!

  1. The first one is a problem with my text rendering. On the top right is the original text and beneath it is a magnification. As you can see it looks really messed up. There are some pixels missing etc. Beneath that you can see the original texture. The texture sheet itself is really small. But increasing the size didn’t help.

  2. The second one are the turquoise boxes which represent my collision objects. They render fine but when I move the camera there is a chance that some of the lines disappear. Also marked with red Arrows. I’m using GL_LINE_LOOP for those.

  3. The third one isn’t that big but still strange. On the ground floor of the building below the ceiling there is a small offset in the texture. Only by one pixel or so. If the camera is moved the error appears / disappears. On the bottom is a side by side comparison of the ingame texture and the orignal one.

http://img10.imageshack.us/img10/8431/uk2.png

Edit: The picture seems to be to wide, you can scroll to the right to see the rest of it…

Text drawing:

		fontColor.bind();
		glEnable(GL_TEXTURE_2D);
		TextureHelper.hashtable.get("font1.png").bind();
		
		for(int i = 0; i < inputString.length(); i ++) {
			int asciiCode = (int)inputString.charAt(i);
			
			//ascii position minus first character in texture sheet (in this case " " / Space)
			asciiCode -= 32;
			//get tileX for char by ascii position modulo table width
			int tileX = asciiCode % 16;
			//get tileY for char by ascii position divided by table width
			int tileY = asciiCode / 16;
			
			float offset = size * i;
			
			glBegin(GL_QUADS);
				glTexCoord2f(0.0625f * tileX, 0.125f * tileY);
				glVertex3f(posX + offset, posY, depth);
				glTexCoord2f(0.0625f * (tileX + 1), 0.125f * tileY);
				glVertex3f(posX + size + offset, posY, depth);
				glTexCoord2f(0.0625f * (tileX + 1), 0.125f * (tileY + 1));
				glVertex3f(posX + size + offset, posY + size, depth);
				glTexCoord2f(0.0625f * tileX, 0.125f * (tileY + 1));
				glVertex3f(posX + offset, posY + size, depth);
			glEnd();
		}

Texture drawing and lineloop drawing:

	public static void texQuad(Texture texture, float xPosition, float yPosition, float xSize, float ySize, float depth) {
		glEnable(GL_TEXTURE_2D);
		Color.white.bind();
		try {
			texture.bind();
		} catch (NullPointerException e) {
			e.printStackTrace();
			glDisable(GL_TEXTURE_2D);
			glColor4f(198.0f / 255.0f, 0.0f / 255.0f, 255.0f / 255.0f, 1.0f);
		}
		glBegin(GL_QUADS);
			glTexCoord2f(0,0);
			glVertex3f(xPosition, yPosition, depth);
			glTexCoord2f(1,0);
			glVertex3f(xPosition + xSize, yPosition, depth);
			glTexCoord2f(1,1);
			glVertex3f(xPosition + xSize, yPosition + ySize, depth);
			glTexCoord2f(0,1);
			glVertex3f(xPosition, yPosition + ySize, depth);
		glEnd();
	}
	
	public static void lineLoop(Color color, float xPosition, float yPosition, float xSize, float ySize, float depth) {
		glDisable(GL_TEXTURE_2D);
		color.bind();
		glBegin(GL_LINE_LOOP);
			glTexCoord2f(0,0);
			glVertex3f(xPosition, 			yPosition, 			depth);
			glVertex3f(xPosition + xSize, 	yPosition, 			depth);
			glVertex3f(xPosition + xSize, 	yPosition + ySize, 	depth);
			glVertex3f(xPosition, 			yPosition + ySize, 	depth);
		glEnd();
	}

Camera:

		glOrtho(Player.xPosition - Game.resolution.width  / 2 * InGame.camScale, 
				Player.xPosition + Game.resolution.width  / 2 * InGame.camScale, 
				Player.yPosition + Game.resolution.height / 2 * InGame.camScale, 
				Player.yPosition - Game.resolution.height / 2 * InGame.camScale, 
				20, -20);
  1. Scaling your bitmap fonts will always lead to aliasing. If you want to get rid of aliasing for small fonts, the best solution is to use a series of bitmap fonts of different sizes. This can be expensive and annoying if you need a lot of sizes, unless you are smart about packing glyphs into the same atlas. LibGDX includes a lot of utilities for this sort of thing.

  2. Probably due to pixel offsets or something with OpenGL rasterizer. You don’t have much control over that, since you are using GL_LINE_LOOP, which is not always reliable. I would recommend using two triangles to render a line, as strange as that may seem. You can include them in a sprite batch for faster rendering:
    https://github.com/mattdesl/lwjgl-basics/wiki/Batching-Rectangles-and-Lines

You may still run into rendering blurriness and aliasing issues if you are rendering the lines at non-integer coordinates.

  1. Again, most likely due to rendering and scaling your sprites at non-integer coordinates. Small floating point errors will lead to some unwanted effects.

My suggestion would be to not scale your textures if you need to get rid of these aliasing problems.

Awesome thanks! That makes sense I guess. My font is only 8 pixels high and it looks I’m save as long as I only use text sizes double that size etc.

I’ll definitely check out your line rendering method, but for know I’ll just keep using GL_LINE_LOOP since it’s only for debugging and not that important.

Also I was able to clean up my interface by just rendering the textures in the right size. Seems pretty logical in retrospect…

Thanks again!