How To Make a Loading Bar Screen in Unity (C# Tutorial)

  Game Development

After all these years, Unity hasn’t been able to provide a feature where you can simply add a loading screen between your game scenes. Despite that fact, implementing a loading bar in Unity is one of the easiest things.

But before we go right into making a loading bar, let’s understand first what loading a scene/level actually means in Unity.

To be able to load a scene from another scene, you will have to use a function from the Scene Manager known as SceneManager.LoadScene (which is also known back in the day as Application.LoadLevel).

When the said function is used, Unity will perform the following process:

  • Loading – In this process, Unity will load the assets from the memory to make the upcoming level. This is also where your game will stay longer especially if your scene is big or uses a large set of game objects.
  • Activation– After the assets are loaded, Unity will start removing the previous game objects and starts loading the new assets to draw the upcoming level.

 

Without a loading screen, gamers will experience lag and glitches in the game and so it is highly suggested to implement a loading screen between levels.

In this tutorial, we’ll be teaching you how to create a loading screen with a loading bar and percentage to load a game scene whenever you trigger a LoadLevel function.

Getting Started

Create a new project or open your existing project in Unity. Any projects will do as long as there are two or more scenes to switch between.
.
We’ll be using UI for this tutorial to be able to switch from one scene to another. So, to start, right-click into your hierarchy and select UI then Button.

Creating a Button with UI in Unity

Rename the Button to something like LoadLevelButton.

Next, inside the LoadLevelButton game object, select the Text game object.

Then go to its Text component and change the text from Button to Load Level.

Changing the text of Buttons in Unity UI

Next, go back to your hierarchy, right-click, create an empty game object and name it SceneManager.

Then, go to your Project window and create a new C# script, name the file LevelManager.cs.

Want to learn how to create a flappy bird game in less than 10 minutes?
How To Make Your Own Flappy Bird Game in 10 Minutes (Unity Tutorial)

Level Manager Script

Open the C# script with visual studio and copy the following code.

using System.Collections; using UnityEngine; using UnityEngine.SceneManagement; public class LevelManager : MonoBehaviour { public void LoadLevel (string levelName) { StartCoroutine(LoadSceneAsync(levelName)); } IEnumerator LoadSceneAsync ( string levelName ) { AsyncOperation op = SceneManager.LoadSceneAsync(levelName); while ( !op.isDone ) { float progress = Mathf.Clamp01(op.progress / .9f); Debug.Log(op.progress); yield return null; } } }

Save your script and go back to Unity.

 

Creating Scenes

Save your current scene and name it to anything you want. After that, create a new scene and save that scene and name it to anything you want again.

As for the reference, I will have two scenes named Level1 and Level2.

Once you have your scenes created, go to your build settings and add the two scenes.

Unity 3d build settings

Keep in mind though that since our levels don’t have that many objects, responses in the console will most likely show nothing.

Because if you remember in our code, we have used the class AsyncOperation. This class will allow us to see all the process that is happening whenever you load a scene.

With all that being said, let’s go back to our Level1 scene and add the LoadLevel function to our Button game object.

Select the LoadLevelButton game object, all the way down in the inspector, select Add Component and look for the script Level Manager.

Next, navigate to the Button component, just right underneath the On Click () section, click on the plus button.

Then, drag the LoadLevelButton game object to the box underneath the Runtime Only dropdown.

assigning functions in unity UI button on click

Next, click on the dropdown menu and open the LevelManager and select the LoadLevel (string).

Level Manager in Unity on click button

Then, type in the input box the name of the scene that you want to load. In our case, we’ll type Level2.

loading levels with unity 3d on click

Save your scene and try to run your scene.

You should be able to load your scene by clicking on the button and at the same time, you should be able to see a response in your console, like the following.

unity 3d console logs

 

The Loading Bar

.Now that we got our loading script working, let’s start adding a loading bar to our scene by going to the hierarchy once again then right-click on the Canvas game object, select UI and then Panel.

creating a UI panel in unity 3d

Next, select the Panel game object and go to its inspector and navigate to its Image component, change the source image to none and its color alpha to 255.

changing the color of the panel in unity 3d UI

Let’s rename our Panel game object to LoadingPanel.

Next, right-click to your LoadingPanel game object and navigate to UI, and select Slider.

creating a slider in unity 3d

Rename your new slider to LoadingBar.

With your LoadingBar game object selected, go to the inspector and change the following value for the Slider component.

  • Interactable : unchecked
  • Transition : none
  • Navigation : none

Next, inside your LoadingBar game object, delete the Handle Slide Area object.

removing the handle slide area in unity 3d

And also, I have realized that we didn’t actually use the SceneManager game object for the Level Manager script… So we’ll just delete that as well. (haha)

Alright, going back to the tutorial.

If you want to scale up your loading bar, you may by selecting the LoadingBar game object and adjusting its width and height in the Rect Transform.

changing the width and height of unity 3d UI slider

If you want to change the color of your loading bar, you may, by going to the Fill game object inside your Loading bar game object and inside the Fill Area game object.

changing the color of the slider in unity 3d UI

If you want to add a percentage text in your loading bar, you may as well, by right-clicking on your LoadingBar game object and select UI and then Text.

adding progress text percentage for loading bar

Then rename it to LoadingPercentageText.

Then position the text to wherever you want it to be. And, change the text from New Text to something like a percentage value for preview purposes.

If you want to change the font styles you may do it as well.

 

Using the Loading Bar

To start using the loading bar, first, we have to hide the loader first since we only need this to show up when we load another scene.

So go to your hierarchy, select LoadingPanel game object and uncheck the checkbox just beside the name of the game object.

disabling a game object in unity 3d

Next, we’ll be referencing this LoadingPanel in our script so we’ll be able to enable the game object when the game starts loading another scene.

Open your Level Manager script once again and update your script to the following.

using System.Collections; using UnityEngine; using UnityEngine.SceneManagement; using UnityEngine.UI; public class LevelManager : MonoBehaviour { public GameObject loadingPanel; public Slider loadingBar; public Text loadingText; public void LoadLevel (string levelName) { StartCoroutine(LoadSceneAsync(levelName)); } IEnumerator LoadSceneAsync ( string levelName ) { loadingPanel.SetActive(true); AsyncOperation op = SceneManager.LoadSceneAsync(levelName); while ( !op.isDone ) { float progress = Mathf.Clamp01(op.progress / .9f); //Debug.Log(op.progress); loadingBar.value = progress; loadingText.text = progress * 100f + "%"; yield return null; } } }

Save your script and go back to Unity.

Navigate to your hierarchy once again and select your LoadLevelButton game object.

Then scroll down to your Level Manager script in the inspector and drag the LoadingPanel game object to the Loading Panel slot and drag the LoadingBar game object to the Loading Bar slot and lastly drag the LoadingPercentageText game object to the Loading Text slot.

game object component unity 3d

Save your scene and there you go.

You should be able to load your scene with a loading screen with a progress bar and text. Super easy!

React to this topic
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments