How to Create a Loading Screen in Unity!

Objective: Create a loading screen!

A loading screen is a scene that the player can see while another scene is loading in the background. To build a new scene select file > new scene.

This tutorial assumes you have a scene for a main menu, and a main scene for your playable game. This loading screen will go between the two. The main menu will need to call this scene.

So have access to the scene manager you need to add the scene management library. Then when you load scene I used the string method and entered the scene name.

To access this method we use a button on the main menu. You can assign functionality using the ‘onclick’ in the inspector. press the add button and drag in the object holding the script you want to access.

With this, when you click the start button on the main menu the loading screen will appear.

Create an open a script for you loading screen and attach to the canvas. you need to add the scene management library like before.

Using this we can now load the main screen using an asyncOperation. AsyncOperation allows you to do something in tandem with another program. For example, you can go from the main menu to the load screen while on the loading screen load the main scene at the same time. Starting an asyncOperation is done using a coroutine.

Using an IEnumerator we are going to create a local variable to hold the asyncOperation and load the scene with async.

If you have a progress bar UI image we can animate it using this asyncOperation we’ve created.

The progress bar needs to be an UI image, the anchor needs to be on the middle left, the image type needs to be set to fill and finally the fill method needs to be set to horizontal.

The fill amount is default to one. If you move the lever you can see the progress bar shrink. To connect this progress bar to the asyncOperation progress we need to go back into the script.

Set up a while loop using the parameter that the local variable to the asyncOperation ‘isdone’ it set to false.

While that is set to false we want to access the progress bar’s fill amount. To gain that access we need to add another library.

This allows us access to the image variables components. we want to set the fill amount to the async progress.

This connects the progress bar to the async progress and how you will see the progress fill as the main scene is loading in the background. Don’t be afraid to experiment with the elements on your loading screen. I’ll see you in the next tutorial!