Textures are not displayed properly

OpenGL Development JOGL Development
#1

Hello,
I want to write a simple 2D game using jogl. I’m trying to put textures on the quads, but something doesn’t work. Instead of the actual textures quads are filled with a single color:

There is probably something wrong in the reshape method because textures are displayed properly when this method is commented:

My code looks like this:


import javax.media.opengl.GL;
import javax.media.opengl.GLAutoDrawable;
import javax.media.opengl.GLEventListener;
import javax.media.opengl.GLException;
import javax.media.opengl.GLJPanel;
import javax.swing.*;

import com.sun.opengl.util.Animator;
import com.sun.opengl.util.FPSAnimator;
import com.sun.opengl.util.texture.Texture;
import com.sun.opengl.util.texture.TextureIO;

import java.awt.BorderLayout;
import java.io.IOException;
import java.util.*;

public class GameWindow extends JFrame implements GLEventListener{
	private int width = 800;
	private int height = 600;
	private GLJPanel panel;
	private Animator animator;
	
	private List<Sprite> sprites = new ArrayList<Sprite>();
	
	public GameWindow(){
		initComponents();
	}
	
	public void initComponents(){
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		setLayout(new BorderLayout());
		setSize(width,height);
		setLocationRelativeTo(null);
		
		panel = new GLJPanel();		
		panel.addGLEventListener(this);
		add(panel,BorderLayout.CENTER);
		
		setVisible(true);
	}

	@Override
	public void display(GLAutoDrawable glDrawable) {
		GL gl=glDrawable.getGL();
		
		gl.glClear(GL.GL_COLOR_BUFFER_BIT | GL.GL_DEPTH_BUFFER_BIT);
		gl.glMatrixMode(GL.GL_MODELVIEW);
		gl.glLoadIdentity();	

		for(int i=0,x=0;i<sprites.size();i++){
			sprites.get(i).draw(gl, x, 0);
			x+=sprites.get(i).getWidth();
		}

		gl.glFlush();
		
	}

	@Override
	public void displayChanged(GLAutoDrawable arg0, boolean arg1, boolean arg2) {
		// TODO Auto-generated method stub
		
	}

	@Override
	public void init(GLAutoDrawable glDrawable) {	
		GL gl = glDrawable.getGL();

		gl.glEnable(GL.GL_TEXTURE_2D);

		gl.glClearColor(255, 255, 255, 0);

		gl.glViewport(0, 0, width, height);

		gl.glDisable(GL.GL_DEPTH_TEST);

		sprites.add(new Sprite("ground.png"));
		sprites.add(new Sprite("grass.png"));
		sprites.add(new Sprite("attack e0000.png"));
		
		
		animator = new FPSAnimator(glDrawable,60);
		animator.start();
	}
		
	

	@Override
	public void reshape(GLAutoDrawable glDrawable, int x, int y, int width, int height)
	{
		GL gl = glDrawable.getGL();
		gl.glViewport(x, y, width, height);
		//gl.glMatrixMode(GL.GL_PROJECTION);
		gl.glLoadIdentity();

		gl.glOrtho(0, panel.getWidth(), panel.getHeight(), 0, -1, 1); 
	}
	
	public static void main(String args[]){
		new GameWindow();
	}
}

class Sprite{
	private Texture texture;
	private int width;
	private int height;	

	public Sprite(String ref) {
		try {
			texture = TextureIO.newTexture(getClass().getResource(ref),false,TextureIO.PNG);
			width = texture.getImageWidth();
			height = texture.getImageHeight();
		} catch (IOException e) {
			e.printStackTrace();
			System.exit(0);
		}
	}
	public void draw(GL gl , int x, int y) {

		gl.glPushMatrix();
		texture.enable();
		texture.bind();	
		gl.glTranslatef(x, y, 0);		
		gl.glColor3f(1,1,1);
		gl.glBegin(GL.GL_QUADS);
		{	
			gl.glTexCoord2f(0, 0);gl.glVertex2f(0, 0);
			gl.glTexCoord2f(width,0);	gl.glVertex2f(width,0);
			gl.glTexCoord2f(width,height);gl.glVertex2f(width,height);
			gl.glTexCoord2f( 0,height );gl.glVertex2f(0, height);
		}
		texture.disable();
		gl.glEnd();
		gl.glPopMatrix();
	}
	public int getWidth() {
		return width;
	}
	public int getHeight() {
		return height;
	}
}

Any ideas?
Thanks

#2

What I think is clearly wrong is how you set the texture coordinates.
Texture coordinates are float values between 0 and 1, but you seem to use the width and height in pixels.
Like this the textures are displayed very, very small and get repeated or whatever you set as behaviour.

You should be using the getImageTexCoords() function from Texture to get the values for top, bottom, left and right as mentioned in the javadoc of getImageHeight() and getImageWidth().
This is also important because the Texture class uses the GL_TEXTURE_RECTANGLE_ARB extension if possible which has an influence on the texture coordinates.

#3

Thank you! Obviously that was the problem. I can’t image how long it would take me to figure that out ;).

#4

Hello again. I thought, the problem is solved, however not quite. I changed my Sprite class a littlebit:

	
public class Sprite{
	private Texture texture;
	private int width;
	private int height;	

	public Sprite(String path, int width, int height){
		texture = DataManager.getInstance().getTexture(path);
		this.width=width;
		this.height=height;
	}
	
	public Sprite(String path) {
		texture = DataManager.getInstance().getTexture(path);
		width = texture.getImageWidth();
		height = texture.getImageHeight();
	}
	
	public void draw(GL gl , int x, int y) {

		gl.glPushMatrix();
		texture.enable();
		texture.bind();	
		gl.glTranslatef(x, y, 0);		
		gl.glColor3f(1,1,1);
		gl.glBegin(GL.GL_QUADS);
		{	
			gl.glTexCoord2f(0, 0);gl.glVertex2f(0, 0);
			gl.glTexCoord2f(1,0);	gl.glVertex2f(width,0);
			gl.glTexCoord2f(1,1);gl.glVertex2f(width,height);
			gl.glTexCoord2f( 0,1 );gl.glVertex2f(0, height);
		}
		texture.disable();
		gl.glEnd();
		gl.glPopMatrix();
	}
	
	public int getWidth() {
		return width;
	}
	public int getHeight() {
		return height;
	}
}

Everything worked fine for the images i used yesterday. Today however i tried with different image, which seems to break everything. Not only the sprite isn’t displayed properly but also all other sprites use the same broken texture instead of their own. Below i post two screens and this image. The only difference is that i used different image for the grass.
Thanks

#5

Hmm, Got it solved. I can’t say i know why it works that way though ;). I only changed the way i load textures:
from:


texture = TextureIO.newTexture(getClass().getResource(path),false,TextureIO.PNG);

to:


texture = TextureIO.newTexture(getClass().getResource(path),true,TextureIO.PNG);
#6

You have 0 and 1 hardcoded, you really shouldn’t be doing that.
Use getImageTexCoords() instead.

The problem is, that as soon as the Texture internally uses the GL_TEXTURE_RECTANGLE_ARB extension
the texture coordinates are in pixels again.

So you should really use the getImageTexCoords() function if you use the Texture class!
Maybe that also solves you’re problem.