Unity Development — Load Screen

I know when playing a video game, most people are not happy to see a loading screen. They are slow and you just want to play. Unfortunately, sometimes they are necessary. If you are someone starting out in game development, making 3D environments and realizing that loading the next scene can be a little slow, it’s time to learn how to add a loading screen yourself.

Normally when loading a scene in Unity, you would have a script that has something along the lines of ‘SceneManager.LoadScene(2)’ or whichever scene in your Build Settings you are looking to load. When a loading screen is necessary, you are going to need it to be its own scene. Make a new scene, call it ‘Loading_Screen’ or something similar and add it to your Build Settings.

With this setup, we are going to go from Scene Menu to Main, but LoadingScreen will be our loading scene. In your new loading screen scene, add some art in the background if you desire. If you don’t have professional art, you can always use a blank colored screen and use a Text object to write ‘Loading…”

Next, make two Images. Again, these could be made by an artist, but all you need are solid colored rectangles that go across the screen. In the example, we are going to make them red and yellow.

One of the rectangles will be used as the background, so once made and stretched out, it can stay as is. The other Image is going to have some adjustments made. First, make sure in the Hierarchy that it is below the background in the Canvas. The lower on the Canvas, the more upfront it is towards the screen.

Look at the Inspector of the progress image. You’ll notice you can actually change the type. Click on it and make it ‘Filled.’ The ‘Fill Method’ should be ‘Horizontal’ and the ‘Fill Origin’ ‘Left.’ This means that the progress is going to fill from left to right. You can even play around with the ‘Fill Amount’ toggle and see how it looks.

This fill amount is what we are going to use to our advantage in the coding portion of this task. Have your menu or first scene load into the loading scene directly, not the scene you actually want to load. In the loading scene, we are going to write a new script.

Obviously the loading scene has a purpose. It is supposed to give the player something to look at while the next scene is loading. How can the next scene begin loading while this scene is showing an image moving in progress. Here is where asynchronous operations come in. Basically, there are a set of functions that can happen simultaneously with everything else. One of them is loading a scene and we are going to set that up right now.

First, get a reference to the progress image and create an IEnumerator that will load the next scene. Have this IEnumerator called from Start().

Now comes the important part. You’re going to make an AsyncOperation and assign it to Load the gameplay scene. Next, use a While Loop to check and see if the operation is complete. While it is not, move the progress bar and throw a yield. AsyncOperations also have a variable called ‘progress’ that can be used to set the right fill amount on the image. Overall, it should look something like this.

Try this out and see how it looks. Once you get this down, you can change the image to be whatever you want. Play around with the fill types or even animations. Loading screens can be fun!