Day 74 — How to Create a Loading Screen in Unity

Hey and welcome!

I’ve got a picture friendly one for you this time and it’s on a topic that I’ve been looking forward t-o for a while as I could not figure out beforehand how something like this is implemented so let’s get to it!

Currently I’ve been working on a main menu so that the game doesn’t just start up right away when I start it after I build and deploy the game. The issue here is that it takes a little bit of time to load up the game when you start it from the main menu so I’d say that period of waiting makes for a good opportunity for a loading screen.

To get started with this we’ll need to create a new scene dedicated to the loading screen. Head to File > New Scene and call the scene something along the lines of Loading_Screen and you’ll have a fresh area to work with.

Create a new image object called Background and set its anchor to stretch and then update the position values so that they’re all 0.

This will fill out a blank image to cover your whole game view. Now head over to your Sprites > Loading Screen folder and you’ll find a Main_BG image that you can drag into your source image so that you have something more appealing than a blank white screen.

Create another image and this time set its anchor to the middle left while zeroing out the position values again and drag the Progress_bar image into the source image. Using the Rect Tool adjust the bar so that it fits just inside the red space in order to give it a red outline.

Now change the image type for this one from Simple to Filled and choose Horizontal for the fill method. If you play about with the fill amount slider here you’ll notice that this is what we’re going to use to give that visual cue that our progress bar is moving along and loading things.

I’ll be honest, this bit kind of blew my mind that something like this was possible and that it’s integrated into Unity!

To finish off the visuals here create another image and drag the Red_overlay into the source image slot and stretch it out to cover your bar so that you have something like this:

Implementing the Functionality

Now that we’ve got things looking pretty it’s time to get to the practical part of this so that it’s actually useful to the player. Create yourselves a new C# script for loading the level and add in the following code:

public Image progressBar;
void Start()
{
   StartCoroutine(LoadLevelAsync());
}
IEnumerator LoadLevelAsync()
{
   yield return null;
   AsyncOperation operation = SceneManager.LoadSceneAsync("Main");
   while (operation.isDone == false)
   {
      progressBar.fillAmount = operation.progress;
      yield return new WaitForEndOfFrame();
   }
}

The object we’re adding in for progressBar is the image object that you made and has the fill options on it.

In order to get our progress bar to load in relation to how much our main scene has loaded we’re making use of something called Asynchronous Operations. This lets us do processes in conjunction with another program that’s running and that’s exactly what we want here.

The AsyncOperation coroutine has two properties that we’re making use of here, isDone which lets us know if the process for loading our Main scene is complete or not and progress which returns a value between 0f and 1.0f on how much of the process is complete.

That’s a pretty convenient number for us, if you remember the Fill Amount value for our progress bar you could move the slider between 0 and 1. So all that’s happening here is that we’re assigning the current value that progress finds and then assigning it to our fill amount.

Make sure you add this scene and your main scene to your build settings from File > Build Settings… and you should get this happening for you when you run the loading bar scene:

I had a lot of fun with this one and with this section in particular it marks the end of this 3D course project, in the next one I’ll be moving into the realm of 2.5D!