Published on

Implementing loading (progress bar) with screen transitions in Unity [unity3d]

Authors
  • Evelyn

Please share this article if you like!

Hello, Evelyn here. Thank you for reading the Evelyn GameDev Blog today. If you've come to this article, you're probably wondering why screen transitions take so long.

I've implemented multiple screens in Unity, but the screen transitions take a long time.

A loading display between screen transitions can reduce user stress.

This is a short video that explains the same thing in less than 5 minutes, so I hope you can watch it as well.


Purpose of this article

Incorporate loading indications into your game!


Table of Contents

coding a script

First of all, let's create a script.

Double-click on the C# file and wait until Visual Studio starts up. Let's write the script.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.SceneManagement;

public class Loading : MonoBehaviour
{
  [SerializeField] GameObject LoadingObject;
  [SerializeField] Slider LoadingSlider;

  public IEnumerator LoadingAndSwitch(string sceneName)
  {
    LoadingObject.SetActive(true);
    LoadingSlider.value = 0;

    AsyncOperation async = SceneManager.LoadSceneAsync(sceneName, mode: LoadSceneMode.Single);
    async.allowSceneActivation = false;
    while (async.progress < 0.9f)
    {
      LoadingSlider.value = async.progress;
      yield return null;
    }
    LoadingSlider.value = 1.0f;
    async.allowSceneActivation = true;
  }

  public void Switch(string sceneName)
  {
    StartCoroutine(LoadingAndSwitch(sceneName));
  }
}

Let's look at the drawing part of the code.

AsyncOperation async = ScneneManager.LoadSceneAsync(sceneName, mode: LoadSceneMode.Single);

Load the next screen asynchronously using the LoadSceneAsync method of the SceneManager.

async.allowSceneActivation = false;

Setting allowSceneActivation to false prevents the screen from automatically transitioning when loading is complete.

while (async.progress < 0.9f)
{
  LoadingSlider.value = async.progress;
  yield return null;
}

While judging whether or not to loop according to the value of async.progress, it tells the user the progress of loading the next screen by assigning it to the value of the Ui slider.

LoadingSlider.value = 1.0f;
async.allowSceneActivation = true;

After the loop is complete, set the slider to the maximum value. In addition, assign "true" to allowSceneActivation to allow screen transitions.

attaching a script

Now that the script is complete, let's prepare the screen. First, we will create two Scenes and register the scenes in the build settings.

The first step is to create a button to call the screen transition method.

Next, we will create the loading screen, using the UI panel, Slider, and text.

Attach the script you have just created to the game object in the scene and assign the game object and slider to the variables.

Finally, register the Switch method of the script to the button click event and execute it.

How was it? Did you successfully implement the loading screen?

I hope you can add a loading screen to your game to improve the satisfaction of users who have played your game.

Make your users love your game more by implementing loading indication!

Please share this article if you like!