Scene transitions in Unity

Is this an anime blog?

I think that everyone who watched at least one anime series noticed a small part in the middle, which usually serves to jump between the scenes and the ad unit - bumper (Japanese - アイキャッチ aikyatchi). The picture from the title of this post is such a transition in “New Game!" title about a small game studio. Oh yes, since this is a blog about Unity, then we will consider the design of the transition between the scenes in it. =)

The scenes in Unity are the basic unit of dividing the game into parts, and the transition between them is not complicated by itself. The transition is implemented through the SceneManager class, using the LoadScene() or LoadSceneAsync() methods. But without additional decoration, these transitions will be sharp, and this will look strange. Let’s try to smooth this transition, adding a little visual appeal to the project.

The scheme is quite simple: both scenes between which the transition is made should be visually identical at the time of unloading the previous one and loading the next. Usually, such a transition organized through the animation of some scene elements. For example, in this post, we use a black screen (the component responsible for this effect will be a black picture). The previous scene should gradually go black, and the next one smoothly appears from it.

The word animation hints at the use of the mechanism in Unity called "Mecanim.“ If you are not very familiar with it, then you can read (or even better use it as an exercise) the previous post "State Template,“ in which, for training purposes, this mechanism used to create a state machine without animation.

Objective

Make the transition between the three scenes through a blackout. The first scene appears instantly and, after 2 seconds, goes into the second. The transitions between the second and third are looped and performed smoothly by click.

Preparation

1. Create three scenes:
   • BootScene - the very first scene the game lands on, we’ll show it right away without dimming
   • FirstScene and SecondScene - two scenes with transitions to each other by mouse click
2. Add scenes to Build Settings
   
3. Create one more Canvas with the name SceneTransition. Set Render Mode - Screen Space - Camera and add the Main Camera. Set Order in Layer to 999, so its always on top of other elements
   
4. Add a new Image to SceneTransition and name it Fade. Completely black, covering the entire screen area. You can turn it off so that it does not block the screen
   

Animation

1. Create folder Animations
2. Open an Animation tab. After selecting Fade, click Create button and create FadeIn animation, also create FadeOut animation.
   
3. Set up FadeIn animation. Select the FadeIn asset. Remove the Loop Time check. Select a Fade object. On the Animation tab, push the Enable/Disable keyframe recording mode button and enable action recording. Enable Image component. Move time mark on the Animation tab to 1 second. In color-chooser set alpha = 0. Disable Image component. On the Animation tab, disable action recording. Checking the animation of the smooth appearance of the UI from dimming.
   
4. Set up FadeOut animation but in reverse order: enable Image, an alpha channel from 0 to 100. Practice on this step by yourself
5. Set up an animation transition. On the Animator tab, add a FadeOut trigger. Add a transition between FadeIn and FadeOut. On new transition, disable Has Exit Time and set Transition duration to 0. In Conditions, add created trigger FadeOut.
   
6. Create script TransitionHandler witch will be used on the end of FadeOut animation

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

using UnityEngine;
using UnityEngine.SceneManagement;

public class TransitionHandler : MonoBehaviour
{
    // Loading scene name
    [SerializeField] private string nextScene = "";
    // Disable fade-in animation flag
    [SerializeField] private bool disableFadeInAnimation = false;

    private void Start()
    {
        if (disableFadeInAnimation)
        {
            // Move fade-in animation to the end
            Animator animator = gameObject.GetComponent<Animator>();
            animator.Play("FadeIn", 0 , 1);
        }
    }

    // Triggered from the end of fade-out animation
    void FadeOutFinished()
    {
        // Load of the next scene
        SceneManager.LoadScene(nextScene);
    }
}

7. Add TransitionHandler script to Fade object. At the end of FadeOut animation, add Event. Choose FadeOutFinished() function from the TransitionHandler script
   
   Event object on the Animation tab looks like that
   
8. Create a Prefab from SceneTransition object
   

Transition set up

1. Create script for BootScene wich will start transition to FirstScene after 2 seconds

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

using System.Collections;
using UnityEngine;

public class BootHandler : MonoBehaviour
{
    // animator component of the Fade object
    [SerializeField] private Animator fadeAnimator = null;

    void Start()
    {
        // Coroutine used as timer
        StartCoroutine(Timer());
    }

    IEnumerator Timer()
    {
        // Wait for 2 seconds
        yield return new WaitForSeconds(2);
        // Set up a trigger to start the animation
        fadeAnimator.SetTrigger("FadeOut");
    }
}

2. Set up BootScene. Add SceneTransition prefab. Set Main Camera to canvas component. Write the next scene name, "FirstScene." Disable fade-in animation
   
3. Add an empty object to the scene and name it BootHandler. After that, add a script from step 1. Set up animator
   
4. On test start of BootScene must have fade animation before the transition
   
5. Create ClickHandler script for other scenes, which handle transition by mouse click

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

using UnityEngine;

public class ClickHandler : MonoBehaviour
{
    // animator component of the Fade object
    [SerializeField] private Animator animator = null;
    
    void Update()
    {
        // Listen to the left mouse button click
        if (Input.GetMouseButtonDown (0))
        {
            // Set up a trigger to start the animation
            animator.SetTrigger("FadeOut");
        }
    }
}

6. Set up "FirstScene". Add SceneTransition prefab. Set "Main camera." Set next scene name - SecondScene
   
7. Add an empty object to the scene and name it ClickHandler. After that, add a script from step 5. Set up animator
   
8. Set up SecondScene. Do all steps from FirstScene setup, exclude next scene name; it must be - "FirstScene"
9. Enjoy the result
   

Conclusion

After all our manipulations, we got a prefab for transition configuration between scenes. It is unlikely that you will use it for production since the synchronous scene loading used is not a very nice solution. And you also need to fine-tune the transition conditions. Also, you need to think about stopping the game at the time the animation starts. And it is desirable to make the animations themselves more interesting. For example, in Homescapes(Playrix), the transition between loading resources and launching the menu is hidden behind a camera descending along the wall of the house. However, after repeating these steps with your own hands, you should have an idea of how to make the transitions beautiful. See you next time! =)