Fade in/out the GUI

I'm sure this is probably be asked before, but does anyone know of how to fade out the GUI. I tried using a box with a style and a texture, but couldn't set the alpha on the texture to simulate the fade. Thanks.

 

This always happens. I find the answer after I post the question. Oh well, I ended up using GUI.color and it worked like a charm.

 

Fade GUI in:

Code (csharp):

1. function Start () {
2.    yield Fade(0, .5, 1);  // Start, end, length in seconds
3.    }
4.  
5. function Fade (start : float, end : float, length : float) {
6.    for (i = 0.0; i < 1.0; i += Time.deltaTime*(1/length)) {
7.       guiTexture.color.a = Mathf.Lerp(start, end, i);
8.       yield;
9.    }
10. }

Fade GUI out:

Code (csharp):

1. function Start () {
2.    yield Fade(.5, 0, 1);  // Start, end, length in seconds
3.    }
4.  
5. function Fade (start : float, end : float, length : float) {
6.    for (i = 0.0; i < 1.0; i += Time.deltaTime*(1/length)) {
7.       guiTexture.color.a = Mathf.Lerp(start, end, i);
8.       yield;
9.    }
10. }

 

Well, that works for GUIElement objects, but for OnGUI stuff, you'd change GUI.color.a instead, as besuser mentioned. You can still make it a function, though:

Code (csharp):

1. private var guiAlpha : float;
2.  
3. function Start () {
4.     yield GUIFade(0, 1, 1); // Start, end, length in seconds
5. }
6.  
7. function OnGUI () {
8.     GUI.color.a = guiAlpha;
9.     if (GUILayout.Button("Click me to fade out")) {
10.         GUIFade(1, 0, 2);
11.     }
12. }
13.  
14. function GUIFade (start : float, end : float, length : float) {
15.    for (i = 0.0; i <= 1.0; i += Time.deltaTime*(1/length)) {
16.       guiAlpha = Mathf.Lerp(start, end, i);
17.       yield;
18.    }
19.    guiAlpha = end; // Accounts for Time.deltaTime variance
20. }

--Eric

 

Just an update. GUI.Color.a worked great when I'm in the IDE, but for some reason when I build into an executable, the fade stopped working. I'm using FixedUpdate to update the alpha value. Anyone else having this problem also?

 

I just tested the script I posted above and it works fine as a build. Not sure why you'd use FixedUpdate for something like that, though; you should use Update for anything that isn't physics.

--Eric

 

I used FixedUpdate because I didn't use the Lerp function. Anyhow, after working on it some more, I got it to work on a GUI.box that I used to mask the other gui elements behind it. Previously, I used GUI.Color.a to control all the gui elements. That for some reason didn't work. The mask idea seems ok.

 

Is something like this also possible for a Box?

 

You need to fade a local variable and copy that to GUI.color inside each OnGUI

 

Hmm, sorry, don't get it - need an example.
Especially I don't know what the "a" is doing.
Something like this?

 

OKay - got it! Largly!

a is alpha - juchee...

 

Yep, "a" is for alpha. Like "r", "g", and "b" are for red, green, and blue. This controls the alpha for everything in OnGUI after you set it. GUILayout.Box doesn't return anything, so you can't use it in an "if" statement. GUILayout.Button returns true or false depending on whether it was clicked or not.

So use my above example, but replace OnGUI with

Code (csharp):

1. function OnGUI () {
2.    if (GUILayout.Button("Click me to fade out")) {
3.       GUIFade(1, 0, 2);
4.    }
5.    GUI.color.a = guiAlpha;
6.    GUILayout.Box("This is a box that will fade");
7.    GUI.color.a = 1;
8.    GUILayout.Box("This won't fade");
9. }

--Eric

 

That is after the GUI.Color.a = XY; line,
all elements act like XY says till the next GUI.Color.a = blubb; is coming?!

I think I get it now...

thx Eric and nicholas

 

Yes.

--Eric

 

Hmm... BUT...

What to do in this case?

Code (csharp):

1. GUI.color.a = guiAlpha;
2.     Label (Rect (15, 15, 175, 33), logo);
3.  
4. GUI.color.a = 1;
5.     if (GUI.Button(Rect(10, 650, 20, 40), "<>")) {
6.         if (guiAlpha == 1) {
7.             GUIFade(1, 0, 2);
8.         }
9.         else {
10.             GUIFade(0, 1, 2);
11.         }
12.  
13. GUI.color.a = guiAlpha;
14.     GUILayout.BeginArea (Rect (10, 635, 1014, 60), title, skin.window);
15.             Label(Rect(5, 0, 100, 60), labeltext);
16.             if (Button (Rect (135, 5, 25, 25), Button1)) {
17.                 Debut.Log("upwards ^");            
18.             }
19.  
20.     GUILayout.EndArea();
21.     }
22.  

Got some errors in the console I can't do anything with it.

Getting control 0's position in a group with only 0 controls when doing used
UnityEngine.GUILayout:BeginArea(Rect, String, GUIStyle)
Sub1_BauGUI:OnGUI() (at Assets/GUI/Scripts/Sub1_BauGUI.js:99)

GUILayout: Mismatched BeginArea.
UnityEngine.GUILayout:BeginArea(Rect, String, GUIStyle)
Sub1_BauGUI:OnGUI() (at Assets/GUI/Scripts/Sub1_BauGUI.js:99)

InvalidOperationException: Operation is not valid due to the current state of the object
UnityEngine.GUILayout.EndArea ()
Sub1_BauGUI.OnGUI () (at Assets/GUI/Scripts/Sub1_BauGUI.js:140)

Line 99 is BeginArea
Line 140 EndArea
Rest above is working

 

According to the error message, you have a mismatched BeginArea(). The code you posted wouldn't cause it, so it must be in the rest of the code.

--Eric

 

Ah - OK.
Got it now! Really... ;-)

Replaced the beginarea with a simple box and moved the if-loop with the GUIFade() at the end of the OnGUI()-Function...

ole ole - it works - only needed 5-6 hours for understanding... :roll:

thank got it's weekend

 

I'm trying to get this to work in C# but not having much luck... a print statement shows that the guiAlpha Lerp is not happening properly... it jumps all over the place and never ends. I'm sure there is just a flaw in my logic... can someone point it out?

Code (csharp):

1.  
2.         public texture tutBox;
3.         static float guiAlpha = 0.0f;
4.     static Color guiColor = new Color(1,1,1,guiAlpha);
5.    
6.     void OnGUI(){
7.         guiColor = new Color(1,1,1,guiAlpha);
8.         GUI.color = guiColor;
9.         StartCoroutine(GUIFade(0.0f, 1.0f, 2.0f));
10.         GUI.Box(new Rect(Screen.width/2, Screen.height/2, tutBox.width, tutBox.height), tutBox);
11.     }
12.    
13.     IEnumerator GUIFade (float start, float end, float length) {
14.         print ("fade started");
15.         for (float i = 0.0f; i <= 1.0f; i += Time.deltaTime*(1/length)) {
16.             guiAlpha = Mathf.Lerp(start, end, i);
17.             print (guiAlpha);
18.             yield return new WaitForEndOfFrame();
19.         }
20.         guiAlpha = end; // Accounts for Time.deltaTime variance
21.     }
22.  
23.  
24.  
25.  

 

If I see that right, you initialize your alpha (guiAlpha) with 0.0f. But the function is fading out, not in. So if the for loop starts your gui is already full transparent.