Unity UI: Loading Bar
Intro
In this article, we are going to cover how to make a loading bar using a slider and create a Level Manager to help us load different scenes in Unity.
This script was created by Tarodev. Please check out his video below.
Loading Bar Setup
The Loading Bar is going to require a Singleton. A Singleton is a Class that can be accessible by anything and can only have one in the scene. The Singleton will be the empty game object LevelManager.
The LevelManager will hold a Canvas child, which contains a Slider UI component.
In the Slider, a Text UI component is child to the Handle of the Slider.
For the Slider just want to make sure Interactable is turned off and the Max Value is 1. The Scene Progress doesn’t return a value from 0 to 100, but 0 to 1.
To learn more about setting up the Slider as a status bar read my previous article below.
Level Manager Script Setup
A Singleton is a public static type, which makes it available to all scripts.
In Awake method, we check to see if there isn’t a Level Manager already existing. If this is TRUE, we set the Instance to this game object and we don’t want to destroy this game object as we move from one scene to another.
If the Level Manager already exists, we simply destroy this new one since there can only be one Singleton.
Now, we are going to need the following libraries…
- UnityEngine UI — allows access to Slider value, so we can change it to the current loading progress.
- TMPro — allows access to Text Mesh Pro text, so we can change it to the current loading progress.
- UnityEngine SceneManagement — allows us to load different scenes from the build settings and the current loading progress.
- Sytsem Threading Tasks — allows us to use await functions for the asynchronously loading (we can wait for certain tasks to be complete before executing a function).
We need to access a few game objects and we will declare these objects with a Serialize Field, so they can be assigned in the Inspector.
Assign the Loading Canvas, Slider and Text.
Level Manager Script
We are going to create a public async void with a string parameter. This async method allows for us to wait for a task to be complete before moving on.
The Target float variable will hold the current scene loading value (0 to 1). This variable allows use to actually see the loading bar work and should be implemented into your game since you will want load times to be fast.
Each time we call the Load Scene method, we want to reset the Target & Slider Value to 0 and set the text to slider value which will need to be convert from a float to string using ToString().
Create a local variable that will hold the scene that will be loaded and we can get the scene by using the SceneManger.LoadSceneAsync and pass in the sceneName string parameter.
We set allow scene activation to false. This will prevent the scene to activate as soon as it is loaded. Then, we set the Loading Canvas to true.
Using a Do While loop, we await a delay of 500 ms (milliseconds) before setting the Target to the current scene loading progress value. This will run once before checking if the scene loading progress is less than .9.
Unity deems completely loading at .9 and not 1.0. This is why we check if the scene load progress is less than .9 or it will load forever.
After Do While loop is complete, we wait for a 1000 ms before activating the loaded scene. Lastly, we want to set the loading canvas to false to turn it off.
In the Update, we are going to have the Slide Value slowly increment towards the loading progress. Again, this is just to see the loading bar work. Using the the Math Function MoveTowards, we can have the current Slider Value move towards the Target Value (which hold the load progress value) and have it move at the rate of the 3 times Time.deltaTime.
We update the Text to the current Slider Value times 100 to make it a percentage and convert it to a string and round it get rid of the decimals.
Connecting Button
On a Button Click, we will call a public method (Start Button) that will run the LoadScene method.
In the script that is handling the button press, create a public method. We will call the instance of the Level Manager.
Now we have access to the Load Scene method and we can passing in the name of the scene we want to load.
The other parts of this method are part of a pre-existing script that we await for the button sound to play before looping through all of the menus in the canvas and turning them off.
Conclusion
One thing we want to make sure we do add the scene we want to load to the build. We do this by going to Build Settings and add the scene.
Lastly, the Load Scene method was made so we can see the loading bar. If you don’t want to have any delays use the method below and get rid of the Update part completely.
