Green overlay when drawing textures on Quads [Solved]

OpenGL Development
#1

Hello everyone, this is my first post so bear with me. I have been teaching my self Java and Game development for the past few months. I messed with Java Awt library a bit but I have now started to learn LWJGL ;D. However I am having some trouble with the code below. It does what I want, which is drawing the texture onto the Quad but it has a weird green overlay. I noticed that this was caused when I added the following statement to the initialization code. I am using Slick2Ds Texture and TextureLoader class, here is my code below…

Line that adds the green Overlay

glEnable(GL_TEXTURE_2D);

Initialization code which is called in Main.java

public void initGL() {
		glMatrixMode(GL_PROJECTION);
		glLoadIdentity();
		glOrtho(0, 800, 0, 500, 1, -1);
		glMatrixMode(GL_MODELVIEW);
		glEnable(GL_TEXTURE_2D);
	}

Testing drawing textures on Quads, called in my Level Entity class

public void drawLevel(int zoom) {
		int w = 8*zoom;
		
//		for(int x = 0; x < 800; x+=w) {
//			for(int y = 0; y < 500; y+=w) {
//				
//				glColor3f(256, 256, 256);
//				glPushMatrix(); 
//					glBegin(GL11.GL_QUADS);
//						glVertex2f(x-4,y-4);
//						glVertex2f(x+4,y-4);
//						glVertex2f(x+4,y+4);
//						glVertex2f(x-4,y+4);
//					glEnd();
//				glPopMatrix();
//			}
//		}
		int x;
		int y;
		
		glClear(GL_COLOR_BUFFER_BIT);
		
		grass.bind();
		x = 40;
		y = 64;
		glPushMatrix(); 
			glBegin(GL11.GL_QUADS);
				glTexCoord2f(1,1);
				glVertex2f(x-32,y-32);
				glTexCoord2f(0,1);
				glVertex2f(x+32,y-32);
				glTexCoord2f(0,0);
				glVertex2f(x+32,y+32);
				glTexCoord2f(1,0);
				glVertex2f(x-32,y+32);
			glEnd();
		glPopMatrix();
		
		dirt.bind();
		x += 64;
		glBegin(GL_QUADS);
			glTexCoord2f(1,1);
			glVertex2f(x-32,y-32);
			glTexCoord2f(0,1);
			glVertex2f(x+32,y-32);
			glTexCoord2f(0,0);
			glVertex2f(x+32,y+32);
			glTexCoord2f(1,0);
			glVertex2f(x-32,y+32);
		glEnd();
		
		dirt2.bind();
		x += 64;
		glBegin(GL_QUADS);
			glTexCoord2f(1,1);
			glVertex2f(x-32,y-32);
			glTexCoord2f(0,1);
			glVertex2f(x+32,y-32);
			glTexCoord2f(0,0);
			glVertex2f(x+32,y+32);
			glTexCoord2f(1,0);
			glVertex2f(x-32,y+32);
		glEnd();
		
		brick.bind();
		x += 64;
		glBegin(GL_QUADS);
			glTexCoord2f(1,1);
			glVertex2f(x-32,y-32);
			glTexCoord2f(0,1);
			glVertex2f(x+32,y-32);
			glTexCoord2f(0,0);
			glVertex2f(x+32,y+32);
			glTexCoord2f(1,0);
			glVertex2f(x-32,y+32);
		glEnd();
		
		cement.bind();
		x += 64;
		glBegin(GL_QUADS);
			glTexCoord2f(1,1);
			glVertex2f(x-32,y-32);
			glTexCoord2f(0,1);
			glVertex2f(x+32,y-32);
			glTexCoord2f(0,0);
			glVertex2f(x+32,y+32);
			glTexCoord2f(1,0);
			glVertex2f(x-32,y+32);
		glEnd();
	}
}

Would like to add an Image but I am unsure how.

I am also interested in a way to scale the textures I am using up to different sizes, if any one knows, which I am sure someone does ;)…

#2

Your texture coordinates are rotated 180 degrees. Also, Slick uses power-of-2 textures, so it will pad the texture if the width and/or height is not a power of 2. Also, no need for pushing and popping the matrix if you don´t do any matrix manipulations (glTranslate, glScale, glRotate, glMultMatrix, glLoadMatrix, e.t.c) This doesn´t explain the problem you´re getting, but you should fix it anyway. =P

Your commented glColor3f() call makes no sense. The colors range from 0 to 1 in float form, not 0 to 255 (that´s glColor3ub (ub = unsigned byte)). These values are clamped to 1 though, so it effectively works as you expected though…

Could you post more code? You could be leaking OpenGL state, for example leaving blending enabled or forgetting a glColor call which sets the color to green. A screenshot would also be excellent so we can actually see what you mean by “green overlay”.

#3

Thanks for comments! I know that the image is rotated 180 degrees but for some reason it was loaded in rotated, so I rotated it back…

Here is my Main.java its what calls the drawLevel from my Level entity class.

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;

import org.lwjgl.LWJGLException;

import org.lwjgl.Sys;
import org.lwjgl.input.Keyboard;
import org.lwjgl.opengl.Display;
import org.lwjgl.opengl.DisplayMode;
import org.lwjgl.opengl.GL11;
import org.newdawn.slick.opengl.Texture;
import org.newdawn.slick.opengl.TextureLoader;

import static org.lwjgl.opengl.GL11.*;
 
public class Main {
 
	/** time at last frame */
	private long lastFrame;
	/** frames per second */
	private int fps;
	/** last fps time */
	private long lastFPS;
	/** state of the game */
	private State state = State.INTRO;
	/** Level we are trying to load */
	private Level1 level;
	/** how far zoomed in we are*/
	private int zoom = 2;
	
	private static enum State {
		INTRO,MAIN_MENU,GAME;
	}
 
	public void start() {
		try {
			Display.setDisplayMode(new DisplayMode(800, 500));
			Display.create();
		} catch (LWJGLException e) {
			e.printStackTrace();
			System.exit(0);
		}
 
		initGL(); // init OpenGL
		getDelta(); // call once before loop to initialise lastFrame
		lastFPS = getTime(); // call before loop to initialise fps timer
		level = new Level1("temp",8);
 
		while (!Display.isCloseRequested()) {
			int delta = getDelta();
 
			update(delta);
			renderGL();
 
			Display.update();
			Display.sync(60); // cap fps to 60fps
		}
 
		Display.destroy();
	}
 
	public void update(int delta) {
 				
		switch(state) {
			case INTRO:
				if (Keyboard.isKeyDown(Keyboard.KEY_S)) {
					state = State.MAIN_MENU;
					System.out.println("Go to Main menu");
				}
				break;
			case MAIN_MENU:
				if (Keyboard.isKeyDown(Keyboard.KEY_RETURN)) {
					state = State.GAME;
					System.out.println("Go to Game");
				}
				break;
			case GAME:
				if (Keyboard.isKeyDown(Keyboard.KEY_ESCAPE)) {
					state = State.MAIN_MENU;
					System.out.println("Go to Main menu");
				}
				if(Keyboard.isKeyDown(Keyboard.KEY_ADD)) {
					zoom++;
				}
				if(Keyboard.isKeyDown(Keyboard.KEY_SUBTRACT)) {
					zoom--;
				}
				break;
		}
				
		updateFPS(); // update FPS Counter
	}
	
	 
	/** 
	 * Calculate how many milliseconds have passed 
	 * since last frame.
	 * 
	 * @return milliseconds passed since last frame 
	 */
	public int getDelta() {
	    long time = getTime();
	    int delta = (int) (time - lastFrame);
	    lastFrame = time;
 
	    return delta;
	}
 
	/**
	 * Get the accurate system time
	 * 
	 * @return The system time in milliseconds
	 */
	public long getTime() {
	    return (Sys.getTime() * 1000) / Sys.getTimerResolution();
	}
 
	/**
	 * Calculate the FPS and set it in the title bar
	 */
	public void updateFPS() {
		if (getTime() - lastFPS > 1000) {
			Display.setTitle("FPS: " + fps);
			fps = 0;
			lastFPS += 1000;
		}
		fps++;
	}
 
	public void initGL() {
		glMatrixMode(GL_PROJECTION);
		glLoadIdentity();
		glOrtho(0, 800, 0, 500, 1, -1);
		glMatrixMode(GL_MODELVIEW);
		glEnable(GL_TEXTURE_2D);
	}
 
	public void renderGL() {
		// Clear The Screen And The Depth Buffer
		glClear(GL_COLOR_BUFFER_BIT);
 		
		switch(state) {
			case INTRO:
				glColor3f(1.0f, 0.0f, 0.0f);
				glRectf(0, 0, 800, 500);
				break;
			case MAIN_MENU:
				glColor3f(0.0f, 1.0f, 0.0f);
				glRectf(0, 0, 800, 500);
				break;
			case GAME:
				level.drawLevel(zoom);				
				break;
		}
	}
 
	public static void main(String[] argv) {
		Main Game = new Main();
		Game.start();
	}
}

And I can’t figure out how to add an image to a post, please let me know how to.

#4

Solved the issue !!! ;D

I added this line in the drawLevel function right before I draw the Quads with the textures on them.

glColor3f(1.0f, 1.0f ,1.0f);

Also do you know If I can scale the textures?

#5

Yes, you´re leaking OpenGL state, specifically the color setting. You set the color to green when you´re on the menu and don´t set it back to white after switching to the actual game.

Scaling textures is free. Just increase the size of the quad and the texture will be stretched over it. Either change the glVertex coordinates (don´t touch the glTexCoord calls) OR use glScalef() to scale the values of all glVertex calls. A tip is to use the matrix for position too, for example:


glPushMatrix(); //Saves the current matrix
glTranslatef(posX, posY, 0);
glScale(scaleX, scaleY, 1);

glBegin(GL_QUADS);
//glTexCoord(...); glVertex(...); ...
//Now, the point (0, 0) ends up at (posX, posY) due to translation
//and the point (10, 10) ends up at (posX + 10 x scaleX, posY + 10 x scaleY). Can´t find the asterix button on this stupid iPhone Bluetooth keyboard. -_-
glEnd();

glPopMatrix(); //restore the matrix saved by the last call to glPushMatrix();
#6

Thanks for the response. I messed with the two ways of scaling and I understand both ways. But this causes the texture on the quad to scale up and become “blurry”, I would like the image to retain the same low resolution as the image gets larger. Thanks for all your help.

#7

(whoops – real post below)

#8

Set your magnification filter to GL_NEAREST.


tex.bind();
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);

Slick can set the filter from the texture loader too. See http://stackoverflow.com/questions/6602684/opengl-applying-filters-to-textures-with-slick-util-textures for details (ignore the bit about mipmaps, just look at the first line using GL_NEAREST)

#9

That was exactly what I was looking for!!! :slight_smile:

Thanks.