Animating Scene Transition in Unity

You can change scenes in Unity using Unity Scene Manager but, when even the scene changes it looks blunt without any effect. It will be cool if we had a fade away effect while transitioning into the new scene. There are many ways to achieve this and the simplest way is to use an UI image. In this tutorial, we are going to use a simple UI image component to create the transition effect.

For the purpose of this tutorial, let’s take two demo scenes. You can switch from one scene to another using the escape key.

Video Tutorial

Setting Up the UI scene transition image

Let’s set up the UI image component first.

You don’t need an actual image for this. Just go to the Hierarchy and click on the + sign>UI>image.

Set the position to center and increase the size to cover the whole camera viewport. Set the color to black.

This image component should be placed last of the Canvas children. That way it will be able to cover all the gameobjects.

Script for Animating Scene Transition in Unity

We will get this image in our script and reduce the alpha value to make the image invisible at scene start. When we are transitioning to a different scene then we will increase the alpha until the image covers all gameobject and then change the scene.

We will be using aysnc await for the delay and Unity lerp for increasing the decreasing the alpha value.

Remember to add the UI image to all your scenes and set the tag to “Finish”. You can use the tag of your choice but if you are using the code below then you need to use the Finish tag.

Create an empty gameobject and call it Scene_loader and add a script called Scene_loader_script to it.

Copy and paste the below script to it. This gameobject is set to DonDestroyOnLoad. So, remember, if you go back to this scene then there will be multiple instances of the same object.

using UnityEngine;
using UnityEngine.SceneManagement;
using UnityEngine.UI;
using System.Threading.Tasks;

public class Scene_loader_script : MonoBehaviour
{
    Image transition;
    bool loading=false;
    bool unloading=false;
    float timer=0;
    float speed=0.3f;

    void OnEnable()
    {
        SceneManager.sceneLoaded+=onsceneload;  //subscribe to scene loaded
    }
    void OnDisable()
    {
        SceneManager.sceneLoaded-=onsceneload;  //unsubscribe to scene loaded
    }

    void Start()
    {
       DontDestroyOnLoad(this.gameObject); 
    }

    private void onsceneload(Scene arg0, LoadSceneMode arg1)
    {
        timer=0;
        loading=true;
        transition=GameObject.FindGameObjectWithTag("Finish").GetComponent<Image>();  //get the image with tag Finish     

    }

    async void Scene_load()  //delayed scene load function
    {
        await Task.Delay(3000);
        SceneManager.LoadScene("SampleScene");
    }
    

    // Update is called once per frame
    void Update()
    {
        if(loading && timer<1)
        {
            timer+=Time.deltaTime*speed; 
            float alpha=Mathf.Lerp(1,0,timer);
            Color color=transition.color;
            color.a=alpha;
            transition.color=color;
            if(timer>0.95)
            {
                loading =false;
                timer=0;
            }
        }
        if(unloading && timer<1)
        {
            timer+=Time.deltaTime*speed; 
            float alpha=Mathf.Lerp(0,1,timer);
            Color color=transition.color;
            color.a=alpha;
            transition.color=color;
            if(timer>0.95)
            {
                unloading =false;

            }
        }
        if(Input.GetKeyDown(KeyCode.Escape))
        {
            unloading=true;
            Scene_load();
            
        }
        
        
    }
}

More Effects for scene transition

In the above case, we did not set any sprite to the UI image component. But adding a simple sprite can give you more options. Drag and drop any spite inside the UI image component. It doesn’t matter how the image looks as we are going to set the color to black.

Set the image type to filled.

You can get different effects by changing the fill method and adjusting the fill amount using code.

Here is a sample with radial fill method