Loading the Scene with a Simple Loading Screen

Depending on how intensive the game is, it might take some time before the player is able to control the character. This is because the game would need to load essentially everything in the scene, from the characters and enemies to the environment and logic. As a result, it’s important to let the player know the game isn’t frozen, but is still loading.

Getting Started

First of, you want to create a brand new scene. This is so the main scene isn’t cluttered and you can reference back to it when the player clicks Play on the Main Menu or going from one scene to another.

Once you’ve created a new scene, rename it to something you can recognize later on.

Creating the Actual Loading Bar

There are several ways to achieve the loading bar. Some methods require the modification of the scroll bar, thus not requiring an image. Other, like this example, requires an simple, yet effective image.

To create an image,

Right click in the Hierarchy
-> UI
-> Image

This will create an image on the canvas for you to use.

With the image object created, now it’s time to use the image you have.

By Source Image, select the image you’re going to use for the loading bar and drag and drop it in the file location next to it.

Finally, in the Image Type, change the following attributes:

* Fill Method to Filled
* Fill Method to Horizontal
* Fill Origin to Left
* Fill Amount to 0

With this, you have yourself a basic loading screen!

Taking it to the Next Step

Although you now got a working progress bar, you can implement it into loading your main (or next) scene.

To achieve this, create a new script and add it to the Canvas or an empty game object in the scene.

Because you’re going to load the next scene and display the current result as a progress bar, you’ll need to add both the SceneManagement and UI class to this script.

Next, you want to reference the Image that makes up your progress bar in order to display the loading percentage in real time.

Lastly, you want to create an IEnumerator and launch it once the loading scene is opened.

Finally, in the IEnumerator, it’s here where we will load the next scene once it’s done loading. In order to accomplish this, we must have to use an asynchronous operation found in the SceneManagement class. Asynchronous operation, or AysncOperation, is an sequence of operations that is independent of time. Because of this, it runs in the background while the loading screen is still present.

Moreover, because it’s loading in the background, we have a handy method to determine if it’s completed or not just by simply calling the isDone method. If it’s not done, fill the progress bar by the amount of the completed progress.