LWJGL - 2D Image not rendering right

Newbie & Debugging Questions
#1

Hey, I’m trying to render images like this:

First I create the Display, before going into the game loop.


public class MainGameLoop {
	 
	public static void main(String [] args){
		new MainGameLoop();
    }
	
	
	public MainGameLoop(){
		DisplayManager.createDisplay();
		UserInput mouseInput = new UserMouse();
		MainMenu menu = new MainMenu(ImageLoader.createImage("menu_bg"));
		
		while(!Display.isCloseRequested()){	
		   GL11.glClear(GL11.GL_COLOR_BUFFER_BIT);
		   GL11.glClearColor(0, 0.0f, 0.0f, 0);
			if(menu.isShowing()){
				menu.updateMenu(Mouse.getX(), Mouse.getY());
				menu.renderButtons();
			}
			
			mouseInput.updateMouse();
			Display.update();
         Display.sync(FPS_CAP);
			
			//renderer.render();
		}
		
        DisplayManager.closeDisplay();
		System.out.println("WINDOW_CLOSED");
	}
}

DisplayManager.createDisplay();


    public static void createDisplay(){    	
    	try {
    		 Display.setDisplayMode(new DisplayMode(WIDTH, HEIGHT));
    		 Display.setTitle("By xtre :)");
			  Display.create();
		} catch (LWJGLException e) {
			e.printStackTrace();
		}
    	
		GL11.glMatrixMode(GL11.GL_PROJECTION);
 	  GL11.glLoadIdentity();
   	GL11.glClear(GL11.GL_COLOR_BUFFER_BIT);
		GL11.glDisable(GL11.GL_DEPTH_TEST);

		GL11.glMatrixMode(GL11.GL_MODELVIEW);
		GL11.glBlendFunc(GL11.GL_SRC_ALPHA, GL11.GL_ONE_MINUS_SRC_ALPHA);
		GL11.glOrtho(0, WIDTH, HEIGHT, 0, 0, 1);
    }

This is how I’m loading images:


public static Texture createImage(String fileName){
    	Texture texture = null;
    	try {
			texture = TextureLoader.getTexture("PNG", new FileInputStream("res/"+fileName+".png"));
		} catch (IOException e) {
			e.printStackTrace();
		}	
    	return texture;
    }

Being new to OpenGL, I doubt much of it’s even close to being perfect :confused:

This is what I’m unsure about. I kinda understand glTexCoord2f(). I can get it to draw the right way, just not as expected. Right now I’ve put it to what I expect its orientation is correctly. I may be wrong :S The image appears orientated the wrong way and smaller than it should be 1280w, 720h.
I noted what I’m having trouble with on this image to point out exactly what is wrong http://gyazo.com/9c2136a2a806292483b5bfdefdf48f18
I’ve been trying to find solutions for a couple days.

The problem area:


public static void squareImage(int x, int y, int imgWidth, int imgHeight, Texture texture){
		texture.bind();
		GL11.glEnable(GL11.GL_BLEND);
		
		GL11.glBegin(GL11.GL_QUADS);
		GL11.glVertex2f(x, y);            			 GL11.glTexCoord2f(0,0); //Bottom Left
		GL11.glVertex2f(x+imgWidth, y);			 	 GL11.glTexCoord2f(0,1); //Bottom Right
		GL11.glVertex2f(x+imgWidth, y+imgHeight); 	 GL11.glTexCoord2f(1,1); //Top Right
		GL11.glVertex2f(x, y+imgHeight); 			 GL11.glTexCoord2f(1,0); //Top Left Please correct me if I'm wrong
		GL11.glEnd();		
		
	}

How do I get the image to display correctly, using what I have, or if something else is needed?
I thought the points should be positioned from the bottom left corner, then going counter clockwise all the way around.
Does the glTexCoord2f(0, 0) mean that the textures first point will be the bottom left position, then (0, 1)?

Thanks for reading.

#2

I’ve got two issues to be starting you off for.

  1. You should be calling glTexCoordf() before the corresponding glVertex() call. When you call glVertex() it sends the currently set tex coords as the ones for the vertex it creates if that makes sense. The same goes for every similar call like glColor, glNormal, glFogCoords everything. And if you are using custom attributes then index 0 takes the place of glVertex() and works the same way.

  2. OpenGL used to only work with power of two dimension textures. Nowadays (since OpenGL 3.0 I think) implementations are required to support them but Slick2D still works with pot textures. So it pads out non-pot textures to make them up to pot textures. Fine except it leaves you with black borders like the ones you have.

Fix these two things and see how many of your problems go away.

#3

not sure if that helps, but i ran into something similar …

is this slick-utils texture/loader ?

looks like, if not, ignore this :slight_smile: …

i think, by default it generates power of two textures, regardless of your input image size.

a quick fix would be using different texture coordinates :

looking at

GL11.glTexCoord2f(0,0);
GL11.glTexCoord2f(1,0);
GL11.glTexCoord2f(1,1);
GL11.glTexCoord2f(0,1);

each [icode]1.0[/icode] matches the texture size, but the image size (the file) is smaller. try this :

float cx = (float)texture.getImageWidth()/texture.getTextureWidth();
float cy = (float)texture.getImageHeight()/texture.getTextureHeight();

GL11.glBegin(GL11.GL_QUADS);
GL11.glTexCoord2f(0,cy);
GL11.glVertex2f(x,y);
GL11.glTexCoord2f(cx,cy);
GL11.glVertex2f(x + imgWidth,y);
GL11.glTexCoord2f(cx,0);
GL11.glVertex2f(x + imgWidth,y + imgHeight);
GL11.glTexCoord2f(0,0);
GL11.glVertex2f(x,y + imgHeight);
GL11.glEnd();

edit

starting with Y positive tex-coord should also fix the Y-flipped issue.

#4

I believe you can also do:

float cx = texture.getWidth();
float cy = texture.getHeight();