Pages

Sunday, November 18, 2012

Unity3D + JavaScript: Fading screen in and out in a scene

It's JavaScript's time again. Today's topic is on fading screen in and out in a scene, because for some reason, people finds it cool to implement that in game, even myself. 

Well, I usually do that I was setting up the scene (like placing characters, what animation pose it should have when the game started). I don't really wanna show people the ugly side of the setting up part, so I add a fade in screen to hide those activities (which usually took 1 millisecond to carry out) in the background.


First, we'll create a few variables: 

var blackScreen : Texture2D; // add a black texture here
var fadeTime : float; // how long you want it to fade?

private var fadeIn : boolean = true; // "true" for fade in, and "false" for fade out
private var color : Color = Color.black; 
private var timer : float = 0;

blackScreen (Texture2D) - for placing your black screen texture.
fadeTime (float) - how long you want the fading to last (for both in and out)
fadeIn (bool) - set to "true" for fading in, while "false" for fading out
color (Color) - just a variable to be replaced with GUI.color soon
timer (float) - just a timer for making the fading effect

Next, create two functions, namely "FadeIn" and "FadeOut" (for obvious reasons): 
function FadeIn()
{
    timer = fadeTime;
    fadeIn = true;
}

function FadeOut()
{
    timer = fadeTime;
    fadeIn = false;
}

Every time these functions are called, the "timer" will be set to a value of "fadeTime", which configure how long you want it to fade. If you want different fading time for fade in and fade out, you can create two variables to store two different fade times, and assign them in the corresponding functions.

Then, in the OnGUI function, add these lines:
function OnGUI()
{
    if (fadeIn)
    {
        color.a = timer / fadeTime;
    }
    else
    {
        color.a = 1 - (timer / fadeTime);
    }

    GUI.color = color;
    GUI.DrawTexture(new Rect(0, 0, Screen.width, Screen.height), blackScreen);
}

On the Update function, add these lines:
function Update()
{
    timer -= Time.deltaTime;
    if (timer <= 0)
    {
        timer = 0;
    }
}


What the above line did is that, it check whether your "fadeIn" variable (boolean) is set to true, which means you want it to fade in; else if it's set to false, it means you want it to fade out.

Then it change the alpha of the color (color.a) with the value of the timer divided by fadeTime if the fade in is equal to true. The result of the value is always between 0 to 1, and the alpha value of the color  variable is also between 0 to 1. 

Since in the Update function, we're decrementing the value of timer by DeltaTime, the value will start from 1 to 0. Setting the value up in the color's alpha will means turning in from full color to transparent

Lastly, to make the fading effect works, just apply it to GUI.color, while drawing your texture at the bottom of the lines using GUI.DrawTexture.

If you want the scene to fade in when the scene loaded, just add the FadeIn function inside the Start function.

For the full script, you can get it from this link:


No comments: