Slick2D image problem

OpenGL Development
#1

For some reason images keep looking… strange…
Here is what it looks like:

http://puu.sh/1keMb

The actual image I am attempting to display is this:

http://puu.sh/1keNC

I am new to OpenGL, so I have no idea why this isn’t working. I am using code similar to what is found on the LWJGL wiki.

My current code is this:

package com.szanto.game;

import static org.lwjgl.opengl.GL11.*;
import java.io.IOException;
import org.lwjgl.LWJGLException;
import org.lwjgl.opengl.Display;
import org.lwjgl.opengl.DisplayMode;
import org.newdawn.slick.opengl.Texture;
import org.newdawn.slick.opengl.TextureLoader;
import org.newdawn.slick.util.ResourceLoader;

public class Game {
	public static void main(String args[]) {
		new Game().run();
	}
	
	public final int WINDOW_WIDTH = 640, WINDOW_HEIGHT = 480;
	private long lastFPSTime;
	private int fpsCounter;
	private Texture texture;
	
	public void run() {
		try {
			Display.setDisplayMode(new DisplayMode(WINDOW_WIDTH, WINDOW_HEIGHT));
			Display.setTitle("Game");
			Display.create();
		} catch (LWJGLException e) {
			e.printStackTrace();
			System.exit(0);
		}
		
		init();
		this.lastFPSTime = System.currentTimeMillis();
		
		while (!Display.isCloseRequested()) {
			glClear(GL_COLOR_BUFFER_BIT);
			
			renderGame();
			
			Display.update();
			Display.sync(60);
			calculateFPS();
		}
		
		Display.destroy();
	}
	
	private void init() {
		// Init OpenGL
		glMatrixMode(GL_PROJECTION);
		glLoadIdentity();
		glOrtho(0, WINDOW_WIDTH, WINDOW_HEIGHT, 0, 1, -1);
		glMatrixMode(GL_MODELVIEW);
		glEnable(GL_TEXTURE_2D);
		glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
		
		// Init Other
		try {
			this.texture = TextureLoader.getTexture("PNG", ResourceLoader.getResourceAsStream("res/image.png"));
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
	
	private void renderGame() {
		this.texture.bind();
		
		glBegin(GL_QUADS);
			glTexCoord2f(1, 1);
			glVertex2f(30, 30);
			glTexCoord2f(1, 0);
			glVertex2f(30, 10);
			glTexCoord2f(0, 0);
			glVertex2f(10, 10);
			glTexCoord2f(0, 1);
			glVertex2f(10, 30);
		glEnd();
	}
	
	private void calculateFPS() {
		long currentTime = System.currentTimeMillis();
		if (currentTime - this.lastFPSTime > 1000) { this.lastFPSTime = currentTime; Display.setTitle("FPS: " + this.fpsCounter); this.fpsCounter = 0; }
		this.fpsCounter++;
	}
}

I’ll love anyone who can help me fix it :slight_smile:

#2

Slick2D still lives in 1997 and pads your texture resolution to the closest power of 2. You need to get the ratio of the texture width and height that is actually used by your image and use those as texture coordinates. I’ve forgotten exactly what the name is of the function, but it’s gettable from your Texture instance.

#3

See here:
http://slick.javaunlimited.net/viewtopic.php?p=25911#p25911

Surprisingly, LibGDX also doesn’t accept NPOT textures on desktop if useGL20 is set to false, even if it’s available in hardware.

#4

I believe GLES 1.x doesn’t support NPOT textures, that’s why. LibGDX understandably has a bit of a lowest-common-denominator thing going on there.

#5

Understandable, but LibGDX is now one of the better APIs for 2D game development on desktop (and I would argue perhaps 3D as well, because of the added bonus of WebGL/Android/iOS backends). It needs to start embracing some desktop features like closeRequested, vsync, hardware mouse cursors, NPOT textures, geometry shaders, and other desktop-specific things. Since the devs are obviously busy with other things, hopefully I’ll find some time to throw in some pull requests this weekend. :slight_smile:

#6

Use Texture.setEnforcePotImages(false);.

LwjglFrame gives you Swing features to get some of these things. Otherwise you can use LWJGL directly or blame LWJGL for lacking features. :slight_smile: Of course, cross platform contributions are always super welcome!