Level Change Transition in Unity3D

In the last topic I covered how to make a loading screen in Unity3D and as we all know that it is very very important to make a loading screen and we find that in almost all the games. Now, in this topic I want to cover to make some kind of transition effect in starting of the level.

If we try to recall all the past games we have played so far, we might notice that almost all the games have some kind of transition as the level starts. And If we take a moment to think about it, we may see the benefit of making those effect in our game. Transition, somehow makes the player prepare for whats about to come in his next level. It gives the player few extra second to be prepared for the next level. Imagine yourself waiting to play next Level of the game while you see a loading screen and then just like that in a moment of mili-second you find yourself in between a jungle or a cave or whatever the level contains. The player might actually be confused but if the same thing happens and you get into that situtation after say 3 second fade-in effect, then that 3 second will actually prepare you and you will be able to adjust youself with the surrounding of the levels.

So I believe (and assume that many people believe the same) that some kind of transition is important in the starting of the scene.

So, again, I came across this while making a game for my own personal practise and was faced with similar situation. And thus my research began and I came up with a simple script to make it possible. I always try to make my script as simple as possible so that later when I see that script I dont have to scratch my head and spend more time than needed to understand the logic behind my script. Also I try to make it easily adjustable for the future. So if in future I have to reuse it then it should be just the change of variable value and its done.

To start by, we would do something simple and I have seen that lots of game uses a simple fade-in/out technique at the starting of the level. So lets make it simple and start by a simple fade-in technique. Also, I would use Javascript for this simple trick.

1> Make a simple white texture map of 64 * 64 pixels in Photoshop or any Image-processing software and save it as a png image

2> Drag the texture file in your Project view under Unity

3> Select texture and notice the attributes in INSPECTOR. We will have to modify the attributes in order to optimize it to work properly

4> Under INSPECTOR, the first menu TEXTURE TYPE, click on it and go to the advamce option. Deselect the GENERATE MINI MAPS. We are doing this inorder to make unity stop rendering the smaller version of it for 3D use

5> Click APPLY to save the option

6> Make a new JavaScript and name it whatever you want

I will write the script first and will explain each line after covering all the points


//Fade-in Script
var fadeTexture : Texture2D;
var fadeTime : int = 3;
private var startTime : float;

function OnLevelWasLoaded(){
startTime = Time.time;
}

function Update(){
if(Time.time - startTime >= fadeTime){
Destroy(gameobject);}
}

function OnGUI(){
GUI.color = Color.white;
GUI.color.a = Mathf.Lerp(1.0, 0.0, (Time.time-StartTime));
GUI.DrawTexture(Rect( 0, 0, Screen.width,Screen.height ), fadeTexture);
}


7> Save the script
8> Make a new gameobject in your scene [GameObject > Create Empty]. Also reset the attributes to 0,0,0 (Not necessary but just to make scene look clean) Name the Object whatver you want.
9> Now assign the script to this game object.
10> After you assign the script you will see a variable named Fade Texture in the Inspector and that will be blank. Drag and add the texture to that variable
11> Now make a empty prefab in your project area and name it Fadein
12> Drag the Fadein GameObject to this prefab to make it a prefab. After that you can delete the fade in gameobject from your scene.
13> Now add this prefab to all your scene/levels where you want the fade in to occour.

Let me explain you the script in detail now.
1> fadeTexture : The first vairable defines the fade in Texture which will be loaded for fade-in effect
2> fadeTime : This is the time duration of the fade-in effect. Please change the value According to the requirement
3> startTime : The variable which will store the time when the level is started. We made this private because we dont want it to appear in the INSPECTOR or be accesed to any other scripts
4> OnLevelWasLoaded is the function which starts as the level starts
5> Time.time is the time in seconds from the starting of the game.
6> We need a time when the level is loaded in order to determine our fade-in duration. So we are storing the level starting time in startTime variable
7> Update function run every frame of the game and what its checking if the duration is same or more than the fade-in duration assignd. If its more it will simple destroy the gameObject or the object where this script is assigned
8> OnGUI is the Texture Rendering function.
9> In the first line we are accessing it color same as the texture we have created that is White
10> Second line we are accessing its alpha parameter visibilty (thus, GUI.Color.a, here a is alpha)
11> Mathf.Lerp command is used to interpolate the alpha from fully visible(1.0) to invisible(0.0)
12> In (Time.time – startTime) we are starting the timer from 0 which will increase as the time passes. So this will make a fade-in illusion
13> After that DrawTexture actually renders the texture itself, using the DrawTexture command of the GUI class. By specifying a Rect (rectangular space) for this to be drawn, starting at 0,0 the top left of the screen you make sure that this texture stretches to fill the screen by using Screen.width and Screen.height. This makes the fade work in whichever resolution the player runs the game at, as it automates the size of the texture on screen

And thats it.
We can create any kind of illusion in order to make the starting of our level more live and attractive.
I would appreciate and welcome any question. If you feel in need of a more detailed explaination of any point, please feel free to ask and I will help you out.

2012

08/12

CATEGORY

Unity3D

TAGS

fade-in
fade-in effect
javascript
level fadein
script
unity game
unity3d

Write comment