Not blurry enlarged sprites

Newbie & Debugging Questions
#1

I have a fairly technical question
I’m rendering my sprites like this

sprite.bind();
		
		GL11.glBegin(GL11.GL_QUADS);
			GL11.glTexCoord2f(0,0); //Upper left
			GL11.glVertex2f(displayWidth/2 - sideLength/2, topBuffer);
			GL11.glTexCoord2f(0,1); //bottom left
			GL11.glVertex2f(displayWidth/2 - sideLength/2, topBuffer+sideLength);
			GL11.glTexCoord2f(1,1); //bottom right
			GL11.glVertex2f(displayWidth/2 + sideLength/2,topBuffer+sideLength);
			GL11.glTexCoord2f(1,0); //Upper right
			GL11.glVertex2f(displayWidth/2 + sideLength/2, topBuffer);
		GL11.glEnd();

Don’y worry about the code, I’m just showing you the basic format
I’m using GL11

Now, there comes a time in every game programmer’s life where he must render a sprite to dimensions bigger than the original sprite’s dimensions

For example, my item sprites are 16x16, but I want to draw them to look 128x128

That was no problem. I got that working. However, when the sprite got enlarged, it also got blurry

My game is kinda going for a pixel-y feel, so having the sprite plain enlarged is no problem. In fact, the blurry enlargement looks bad.

How can I set it so that it doesn’t enlarge like that?

#2

From what I understand this would be impossible to do with your code. The reason this doesn’t work is because from what I understand about sprites. (Might wanna wait for someone to confirm this) Sprites are basically bitmaps. You cannot enlarge bitmaps without loss of quality. (Since you are basically taking each pixel and increasing the size. It gives the edges a rougher look.)
As far as I know there isn’t a software that can increase the size of bitmaps.

If you use GIMP or Photoshop. Take the image. Resize it to 128x128. Make a new layer. Trace original image. You can be done in 5 minutes.

P.S. All bitmaps work like this. The images that you can resize freely are vector images.

#3

You merely need to set the max filter to GL_NEAREST. Not sure how to do that with slick (which I assume you’re using by the sprite.bind() call), but in raw opengl you do it with glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);

#4

Read up on OpenGL texture mapping:
http://www.gamedev.net/page/resources//technical/opengl/opengl-texture-mapping-an-introduction-r947
http://www.gamedev.net/page/resources//technical/opengl/opengl-texture-mapping-an-introduction-r947

Once you’ve read those, you might realize that your texture coordinates [0,1] could be wrong, i.e. if your texture is not power-of-two. More info/code here:
http://slick.javaunlimited.net/viewtopic.php?p=25911#p25911

To load images with a different filter in Slick-Util you can use the TextureLoader class.

texture = TextureLoader.getTexture("PNG", inputStream, GL11.GL_NEAREST);

Or to set it after the fact, like sproingie said, you would do it like so:

static import org.lwjgl.opengl.GL11.*;
...

texture.bind();
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);

Sometimes you’ll want a different minification filter (i.e. LINEAR). Alternatively, you could use mipmapping for smoother down-scaling – although this isn’t supported by Slick-Util. (You’d have to write it yourself.)