Transitioning Smoothly Between States

OpenGL Development
#1

The next step in my project at the moment is getting smooth transitions between screens. I have watched Oscar’s video about it and I liked the idea. The only thing I want to do differently is to not fade in the actual components, but fade out an overlay of black. I have the theory down:

Call for state change
Fade out screen
Change State
Fade in screen

I have been trying to implement it but I am having trouble with glColor4f(); At the moment, I am drawing the overlay like this.

package src.longarmx.work;

import org.lwjgl.opengl.Display;
import org.lwjgl.opengl.GL11;


public class Overlay {
	
	private float fade = 50;
	private boolean fadein = true;

	public Overlay(){
		
	}
	
	public void init(){
		
	}
	
	public void update(){
		if(fadein){
			if(fade < 90){
				fade += 1;
			}else{
				fadein = false;
			}
		}else{
			if(fade > 0){
				fade -= 1;
			}else{
				fadein = true;
			}
		}
	}
	
	public void render(){

		GL11.glColor4f(.5f, .75f, .75f, (float) Math.sin(Math.toRadians(fade)));

		GL11.glBegin(GL11.GL_QUADS);
			GL11.glVertex2f(0, 0);
			GL11.glVertex2f(Display.getWidth(), 0);
			GL11.glVertex2f(Display.getWidth(), Display.getHeight());
			GL11.glVertex2f(0, Display.getHeight());
		GL11.glEnd();

		
	}
	
}

The problem is with glColor4f(); Whenever I make the RGB all zeros, there is just a black screen. Also, whenever I make them 1.0f, The screen has transparency, but there is a hue of whatever color is drawn on the screen right before it. I have tried with glClear(GL11.GL_COLOR_BUFFER_BIT); but that just removes the transparency. I have also tried glClearColor() but I don’t know how to work it. If anyone has any idea how to do this, I would greatly appreciate it!

Thanks,
Longarmx

#2

So what is wrong with using .5f, .75f, .75f?

The best way to go about this is to simply clear the screen, render the previous state, then render the darkening overlay.

#3

I was just testing with the RGB values but nothing works for me.

I would do that but my problem is with the darkening overlay. I don’t know how to draw it. :clue: Anything that I do with the overlay, it is either the wrong color or it has no transparency.

#4

Simply draw a black (or whatever other color) quad on top of everything else with an increasing alpha value, just like you did. Don’t forget to enable GL_BLEND!

#5

Ok, either I am not getting something, or something is going on. I am doing EXACTLY what you said. I enabled GL_BLEND and I am drawing a black quad on the screen like this:

GL11.glColor4f(0, 0, 0, (float) Math.sin(Math.toRadians(fade)));

		GL11.glBegin(GL11.GL_QUADS);
			GL11.glVertex2f(0, 0);
			GL11.glVertex2f(Display.getWidth(), 0);
			GL11.glVertex2f(Display.getWidth(), Display.getHeight());
			GL11.glVertex2f(0, Display.getHeight());
		GL11.glEnd();

Right now, with all RGB values at zero, the entire screen is black. If I use any other values(including 1.0f, 1.0f, 1.0f), there is still a hue to the transparency.

#6

Even when I am trying to draw a simple quad with glColor3f(); it still draws it the same way as the overlay. >:(

#7

I have continued working on this to no avail. I have been messing around with glClearColor();. ATM I have this running. I don’t know if I am on the right track but some help would be appreciated.

GL11.glClearColor(1, 1, 1, 1);
		GL11.glColor4f(0, 0, 0, (float) Math.sin(Math.toRadians(fade)));

		GL11.glBegin(GL11.GL_QUADS);
			GL11.glVertex2f(0, 0);
			GL11.glVertex2f(Display.getWidth(), 0);
			GL11.glVertex2f(Display.getWidth(), Display.getHeight());
			GL11.glVertex2f(0, Display.getHeight());
		GL11.glEnd();

This code fades from black to white while making everything else gray scale… This is a picture of what I mean…

Hmmm… Strange… When I copied the screen to put it on this post, the menu looked like there was no overlay. It just looked normal… Maybe this will help some people solving this problem because I am stumped. :-\

#8

glClearColor sets the color used when clearing the screen with glClear(GL_COLOR_BUFFER_BIT).

I can’t see what problems you are having really. This is simply: draw the scene -> draw overlay -> increase ‘fade’ value -> repeat.

#9

I would do that but I don’t know whats happening. I do exactly what you say except the color or transparency is wrong. ??? I honestly don’t know how to fix this…

#10

Give me something to work with here, like a screenshot or some runnable code! :slight_smile:

#11

Sorry about the mediafire, but I have resources and stuff included…

http://www.mediafire.com/?sz011zod251535p

EDIT: Also, hold Z + ESC to exit if nothing shows up…

#12

Before looking too deep, you forgot to disable GL_TEXTURE_2D. When you’re drawing the quad for the overlay, it uses the last bound texture :wink:

#13

Ok. Now I just feel like a noob. I disabled GL_TEXTURE_2D before drawing the quad and then enabled it again after drawing it. I can get it to go from black to clear to white then back again but I don’t know how to get it to fade from clear to black… :cranky:

#14

Replace everything in your update method with ‘fade += 1;’

Then put this before you render the quad:
glColor4f(0,0,0,Math.abs((float)Math.sin(fade * Math.PI/180)));

#15

I did what you said but all I get is a little flicker of the title screen… then black. :clue:

#16

OH you probably update it too fast ;D
Try incrementing by smaller values.

#17

I tried incrementing by smaller values… (even .000000000000000000000000000000000000000000001f) ;D but it was still a black screen. I also tried larger values even though I knew they wouldn’t do anything.

I think that I should clarify, the main menu only flickers once, then there is black for the rest of the time. It doesn’t keep flickering over and over again.

EDIT: Also, what is the difference between

Math.toRadians(fade)

and

fade * Math.PI/180

? Don’t they do the same thing? Converting from Degrees to Radians?

#18

It’s just one less method call. Also, that’s weird :S

Try using a debugger, going through it line by line. See if you can find any unexpected behaviors.

#19

Everything seems to be going fine:

Full Fade = Math.abs((float)Math.sin(fade * Math.PI/180));

— Start Debugging —

Frame: 0

GL Texture 2D: false

Fade Variable: 0.0
Full Fade: 0.0

Width: 1920 Height: 1080

GL Texture 2D: true

— End Debugging —

— Start Debugging —

Frame: 162

GL Texture 2D: false

Fade Variable: 162.0
Full Fade: 0.309017

Width: 1920 Height: 1080

GL Texture 2D: true

— End Debugging —

— Start Debugging —

Frame: 338

GL Texture 2D: false

Fade Variable: 338.0
Full Fade: 0.37460658

Width: 1920 Height: 1080

GL Texture 2D: true

— End Debugging —

#20

Sorry for not knowing an answer for the acctually asked question.
Just a bit Offtopic: don’t call

glDisable(GL_TEXTURE_2D);

and

glEnable(GL_TEXTURE_2D);

very often. Use

glBindTexture(GL_TEXTURE_2D, 0);

and then rebind.