Java-Gaming.org    
Featured games (81)
games approved by the League of Dukes
Games in Showcase (481)
Games in Android Showcase (110)
games submitted by our members
Games in WIP (548)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1]
  ignore  |  Print  
  Transitioning Smoothly Between States  (Read 2500 times)
0 Members and 1 Guest are viewing this topic.
Offline Longarmx
« Posted 2012-06-11 15:53:36 »

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.

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
33  
34  
35  
36  
37  
38  
39  
40  
41  
42  
43  
44  
45  
46  
47  
48  
49  
50  
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

Offline ra4king

JGO Kernel


Medals: 345
Projects: 2
Exp: 5 years


I'm the King!


« Reply #1 - Posted 2012-06-11 18:41:14 »

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.

Offline Longarmx
« Reply #2 - Posted 2012-06-11 18:53:46 »

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

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

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

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

Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline ra4king

JGO Kernel


Medals: 345
Projects: 2
Exp: 5 years


I'm the King!


« Reply #3 - Posted 2012-06-11 19:32:08 »

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!

Offline Longarmx
« Reply #4 - Posted 2012-06-11 20:28:06 »

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:

1  
2  
3  
4  
5  
6  
7  
8  
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.

Offline Longarmx
« Reply #5 - Posted 2012-06-12 02:26:44 »

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

Offline Longarmx
« Reply #6 - Posted 2012-06-12 20:59:30 »

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.

1  
2  
3  
4  
5  
6  
7  
8  
9  
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.  Undecided

Offline ra4king

JGO Kernel


Medals: 345
Projects: 2
Exp: 5 years


I'm the King!


« Reply #7 - Posted 2012-06-12 21:03:12 »

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.

Offline Longarmx
« Reply #8 - Posted 2012-06-12 21:12:30 »

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

Offline ra4king

JGO Kernel


Medals: 345
Projects: 2
Exp: 5 years


I'm the King!


« Reply #9 - Posted 2012-06-12 21:16:33 »

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

Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline Longarmx
« Reply #10 - Posted 2012-06-12 21:25:12 »

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...

Offline ra4king

JGO Kernel


Medals: 345
Projects: 2
Exp: 5 years


I'm the King!


« Reply #11 - Posted 2012-06-12 21:40:48 »

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

Offline Longarmx
« Reply #12 - Posted 2012-06-13 01:58:02 »

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

Offline ra4king

JGO Kernel


Medals: 345
Projects: 2
Exp: 5 years


I'm the King!


« Reply #13 - Posted 2012-06-13 12:17:33 »

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)));

Offline Longarmx
« Reply #14 - Posted 2012-06-13 15:24:37 »

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

Offline ra4king

JGO Kernel


Medals: 345
Projects: 2
Exp: 5 years


I'm the King!


« Reply #15 - Posted 2012-06-13 15:49:35 »

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

Offline Longarmx
« Reply #16 - Posted 2012-06-13 16:58:25 »

I tried incrementing by smaller values... (even .000000000000000000000000000000000000000000001f) Grin 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
1  
Math.toRadians(fade)
and
1  
fade * Math.PI/180
? Don't they do the same thing? Converting from Degrees to Radians?

Offline ra4king

JGO Kernel


Medals: 345
Projects: 2
Exp: 5 years


I'm the King!


« Reply #17 - Posted 2012-06-13 19:40:49 »

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.

Offline Longarmx
« Reply #18 - Posted 2012-06-13 20:40:13 »

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 ---


Offline matheus23

JGO Kernel


Medals: 106
Projects: 3


You think about my Avatar right now!


« Reply #19 - Posted 2012-06-14 13:53:38 »

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
Sorry for not knowing an answer for the acctually asked question.
Just a bit Offtopic: don't call
1  
glDisable(GL_TEXTURE_2D);
and
1  
glEnable(GL_TEXTURE_2D);
very often. Use
1  
glBindTexture(GL_TEXTURE_2D, 0);
and then rebind.

See my:
    My development Blog:     | Or look at my RPG | Or simply my coding
http://matheusdev.tumblr.comRuins of Revenge  |      On Github
Pages: [1]
  ignore  |  Print  
 
 
You cannot reply to this message, because it is very, very old.

 

Add your game by posting it in the WIP section,
or publish it in Showcase.

The first screenshot will be displayed as a thumbnail.

atombrot (26 views)
2014-08-19 09:29:53

Tekkerue (25 views)
2014-08-16 06:45:27

Tekkerue (23 views)
2014-08-16 06:22:17

Tekkerue (14 views)
2014-08-16 06:20:21

Tekkerue (22 views)
2014-08-16 06:12:11

Rayexar (60 views)
2014-08-11 02:49:23

BurntPizza (39 views)
2014-08-09 21:09:32

BurntPizza (30 views)
2014-08-08 02:01:56

Norakomi (37 views)
2014-08-06 19:49:38

BurntPizza (67 views)
2014-08-03 02:57:17
List of Learning Resources
by Longor1996
2014-08-16 10:40:00

List of Learning Resources
by SilverTiger
2014-08-05 19:33:27

Resources for WIP games
by CogWheelz
2014-08-01 16:20:17

Resources for WIP games
by CogWheelz
2014-08-01 16:19:50

List of Learning Resources
by SilverTiger
2014-07-31 16:29:50

List of Learning Resources
by SilverTiger
2014-07-31 16:26:06

List of Learning Resources
by SilverTiger
2014-07-31 11:54:12

HotSpot Options
by dleskov
2014-07-08 01:59:08
java-gaming.org is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑gaming.org
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!