Stealth Game: Creating a Loading Screen

Today, I created a loading screen with asynchronous operations that will load the next level before entering!

Objective

With the main menu and a game scene already made, I want to have a loading scene in between to load the game scene before switching to that scene.

How I did it

I created a new scene and named it “LoadingScreen.” This houses a background image with a progress bar made up of UI elements.

First, I created a background image for the scene, adjusted it to fit into the screen, and anchored it to stretch.

I then added another Image for the progress bar.

I adjusted it to fit inside the red rectangle of the background image and anchored it to the middle left of the screen.

I also want the progress bar image to be of type “Filled” with a “Fill Method” of “Horizontal.”

I can now test how the progress bar will work by playing around with the “Fill Amount” of the image. I need to reference the fill amount to add logic for the representation of the progress bar loading.

Scripting

I created a new script and called it “LoadLevel.”

This will hold data that will control the logic of the progress bar and when to load to the next scene.

I know I need to control the fill amount of the progress bar. So I need a reference to it!

[SerializeField] private Image _barImage = null;

I want to refer to it by dragging the progress bar image into the field in the inspector. Hence, the serialize field and its privacy.

Next, I want to create a coroutine to control the loading sequence for the next level.

private IEnumerator LoadLevelAsync()
{
    AsyncOperation asyncOperation = SceneManager.LoadSceneAsync(2);

    while (!asyncOperation.isDone)
    {
        _barImage.fillAmount = asyncOperation.progress;

        yield return new  WaitForEndOfFrame();
    }
}

I created a coroutine called “LoadLevelAsync()” with an Async Operation. An AsyncOperation allows us to do something in tandem. In this case, we want the next scene to load while on the loading screen.

I assign the next scene to the asyncOperation variable by grabbing the SceneManager with a LoadSceneAsync() function. It loads the Scene asynchronously in the background.

While asyncOperation is not finished, meaning while it’s still loading, then we want the progress bar image fill amount to sync with the progress of the async operation.

I must yield with a “WaitForEndOfFrame()” because first, it’s a coroutine, and second, we want everything loaded before continuing.

Last but not least, I need to start the coroutine in the Start() function.

private void Start()
{
    StartCoroutine(LoadLevelAsync());
}

Conclusion

We now have a working loading screen!

I haven’t dealt with Async Operations before, so this is a first for me! And I am sure it won’t be the last!

That is all for today. Thank you for your time!

Gabriel