Add Fade Between Scenes - Unity 4.6

We had some requests to write a post on How to add Fade In / Fade Out effect between scenes. How can it be that you guys ask and we do not provide that, of course, it should be something feasible, and it was.  So yeah, here we go!

The Fade Effect Between Scenes




1. If you have a Project already created, create a New Scene and name it as Fade In Out. If you haven't, then create a New Project and add add the scene.

2. Create a Panel by navigating to GameObject->UI->Panel. Add a Button inside this Panel. Once you are done with this, your Hierarchy will look something like


3. Select the Canvas in the Hierarchy, change the Render Mode of the Canvas in the Inspector to Screen Space - Camera.
- Tick the Pixel Perfect checkbox.
- Drag and Drop the Main Camera in the Render Camera field.


4. Select the Panel gameobject in the Hierarchy, add a Canvas Group component to it by clicking on Add Component->Miscellaneous->Canvas Group. Set the Alpha value to 1, if it's ot already set.


  
5. Change the Color of the Image (Script) component of the Panel to any color you like, but make sure you set the A (Alpha) somewhere closer to 255.


6. Add an Image component to Canvas and set the Color to (0, 0, 0, 255). You can add the Image component by clicking on Add Component->UI->Image. We add this image to get that dark background on Fade In / Out


7. Now, we will create animations to vary the alpha value with time. Open the Animation window by pressing ctrl+6 in Windows (cmd+6 in Mac). Select the Panel in the Hierarchy, create animation for PanelFadeOut as in the GIF below


8. Repeat the same steps to create PanelFadeIn animation. Here, we set the Alpha value to 0 at 0th frame and 1 at 60th frame.

9. Open the Panel Animator component which has just been created. Right click on the PanelFadeIn  state and Set As Default, if it's not already set.

  
10. Select the Animations you have just created and uncheck the Loop Time checkbox, as we need to play the animation only once. Refer the image above where PanelFadeIn in selected in the Project panel and the properties of that animation are displayed in the Inspector.

11. Create a new C# Script named FadeInOut. Attach it to the Main Camera and add the below code to it.

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class FadeInOut : MonoBehaviour {

 //function to be called on button click
 public void LoadNextLevel(string name){
  StartCoroutine(LevelLoad(name));
 } 

 //load level after one sceond delay
 IEnumerator LevelLoad(string name){
  yield return new WaitForSeconds(1f);
  Application.LoadLevel(name);
 }

}

Save the script and return to Unity.
The above script is pretty simple, wherein we load a level after one second delay.

12. Since we have set the PanelFadeIn as the default animation, it will automatically play once the scene is loaded. Now we have to play the PanelFadeOut animation on click of the button before the next level is loaded.

13. Select the Button in the Hierarchy. In the Inspector, Click on the + sign of the On Click () twice to add two rows.
- In the first field of the first row drag and drop the Panel.
- In the function field, select Animator->Play (string)
- In the third field, type in the name of the Animation to be played, which, in our case is, PanelFadeout.

14. In the second row's first field, drag and drop the Main Camera. Select the FadeInOut script and further select LoadNextLevel function. Finally, that function expects a string which is the name of the level to be loaded. Type in Fade In Out 1 in the third field.


15. Duplicate the scene to test the Fade functionality by going to File->Save Scene As and save the scene as Fade In Out 1. Add both the scenes to the Build Settings. To add go to File->Build Settings and add the scenes. Change the name of the scene to be loaded in the On Click () of the Button from Fade In Out 1 to Fade In Out.


This is pretty much it. We have created a Fade effect between scenes. Click on the Play button to test this newly added effect.

See you around.

Also check out,
Unity 4.6 GUI - Create A Dynamic Menu With The New UI
Unity 4.6 GUI - Create A Health Bar HUD
Unity 4.6 GUI - Create A Level Select Scroll Menu
Unity 4.6 GUI - Create An Animated Menu
Unity 4.6 GUI - Create A Level Lock/Unlock System
Unity 4.6 GUI - Add A Loading Scene / Splash Screen
Unity 4.6 GUI - Create A Sliding Pause Menu
Unity 4.6 GUI - Create A Star Rating / Reward System
Share on Google+

About Sujit Horakeri

Sujit Horakeri is a game freak just like any other next door guy you would come across. He is a Web Developer by Profession, Game Developer by Choice.
Connect with him on:
    Blogger
    Facebook

3 comments:

  1. Hi,

    I've followed your tutorial but I can't get it to work, it doesn't Fade Out.
    The Fade In is working.

    I've made a simple Unity Package with 2 scenes, 1 script (FadeInOut) and the 2 animations

    Download link:
    https://drive.google.com/file/d/0B2AAPx_1Kup5RFVGbkZSZDJkeVE/view?usp=sharing

    Can you please take a look and tell me why it's not working?

    Thank you in advance!

    ReplyDelete