Creating Awesome Scene Transition Effects in Unity

July 27, 2019



In this article, we will be creating a smooth looking transition while scene changing. By the end of this article, you will learn to create this smooth looking scene changing transition.


Beginning with Animation

The scene changing transition will work on 1 principle, i.e.
We will create a Unity project containing two scenes. To keep it simple, we will simply have the scenes filled with solid colors and some static text like the ones below.
Scene 1 will look like:

Scene 2 will look like:

Open the scene 1, all upcoming changes until the article asks to change to scene 2 will be in scene 1.
To start with creating the scene changing transition, create a Panel by right-clicking the Project hierarchy and clicking UI -> Panel


This will create a Panel in the currently opened scene. With the canvas selected set the UI Scale mode to Scale with Screen Size in the InspectorAlso, change the Panel color to black.

Creating transition animations
Make the Animation window visible by clicking Window -> Animation.
With the Panel selected in the project hierarchy, click the Create button and name the animation as AnimateIn and create the animation such that the black Panel will be completely covering the scene at time 0 second and it animates its scale to zero at time 1 second.
This will create a smooth looking transition like this:

Creating idle state animation

Now create a new animation with the name Idle. The scene transition state will stay in the idle state while the scene is running.


In the Idle animation, make sure that the Panel is scaled down to zero for all frames.
This can be done by setting the scale to zero at 0 seconds of the animation.

Creating the AnimateOut Animation

Create a third animation with the name AnimateOut and make sure that it looks the reverse of AnimateIn animation.
The AnimateOut animation will look like:
Now for each animation selected in the Project view, uncheck the Loop Time option in the Inspector view.


Setting up the Animator

Now we have all three animations ready, now we will create Animator State for these three animations.
Show the Animator Window by clicking Window -> Animator
With the Panel object selected, the Animator window will show the three animations that we created in the previous steps.
Now create the State following this gif below:

Create the Animate Out Trigger


Create a boolean parameter for the Animator with the name animateOut


Now select the arrow from Idle -> AnimateOut, the Inspector will show the values like:


Uncheck the Has Exit Time option. Then click on the + icon at the bottom and make the condition as
animateOut : true
Now we are all set with the animations that will be used in the scene transitions. Now is the time for changing scenes with these awesome looking transitions by scripting.

Scripting to show the scene change transition

Create a script named ChangeScene.cs and replace the code with the following code.
using System.Collections;
using UnityEngine;
using UnityEngine.SceneManagement;public class ChangeScene : MonoBehaviour
{
    public int sceneIndex;    Animator animator;    void Start()
    {
        animator = transform.GetComponent<Animator>();
    }    void Update()
    {
        //change scene when user presses Space key
        if (Input.GetKeyDown(KeyCode.Space))
        {
            StartCoroutine(LoadSceneAFterTransition());
        }
    }    private IEnumerator LoadSceneAFterTransition()
    {
        //show animate out animation
        animator.SetBool("animateOut", true);
        yield return new WaitForSeconds(1f);        //load the scene we want
        SceneManager.LoadScene(sceneIndex);
    }
}
Now attach the script to the Panel gameobject in the current scene i.e. Scene 1 and set the Scene Index value to the index of the scene we want to load. In my case, it is 1 for scene 2.
Now copy the Canvas gameobject along with the Event System and paste it in Scene 2 and in scene 2, change the Scene Index value to the index of Scene 1 (0 in my case).
The Scene 1 project hierarchy will look like:



The Scene 2 project hierarchy will look like:

Now we are ready to go. With Scene 1 opened, hit the Play button to run the game and press the Space key to change the scene with the smooth looking transition effect we just created.
The animation will look like:


You can also try with different animations like fade/scale/motion of panel, etc. to get more cool transition effects.

More Transition Effects

You can play with the AnimateIn and AnimateOut animations to change the effects and get more transition effects. Here’s a transition effect I got by changing the scale, alpha and rotation in the animation.


DOWNLOAD THE ASSET

You can download the complete project as a Unity asset from here

You Might Also Like

0 comments

Follow by Email