Creating Awesome Scene Transition Effects in Unity cover image

Creating Awesome Scene Transition Effects in Unity

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.

screen changing animation transition effect
Transition effect while changing between scenes

Beginning with Animation

The scene changing transition will work on 1 principle, i.e.

The last frame of the first scene will be the same as the first frame of the second scene.

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 1 image

Scene 2 will look like:

scene 2 image

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

create a new 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 Inspector. Also, change the Panel color to black.

You can also create a Panel in a pre-existing Canvas but make sure that the Panel object lies in the last of Canvas to lie over top of all UI elements.

Creating the 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:

AnimateIn animation effect

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.

Create new clip button

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:

AnimateOut animation effect

 

Now for each animation selected in the Project view, uncheck the Loop Time option in the Inspector view.

uncheck the loop time for animation

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:

creating animator state

Create the Animate Out Trigger

Create a boolean parameter for the Animator with the name animateOut

creating trigger parameter

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

animate out trigger

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:

Scene 1 project hierarchy

The Scene 2 project hierarchy will look like:

Scene 2 project hierarchy

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:

screen changing animation transition effect

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

Buy me a cup  of coffee @ paypal.me/KunalTandon94, it keeps me motivated and keeps this blog running.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.