Unity Guide
Creating a loading scene in Unity
A quick guide about how to create a loading scene with Unity
Objective: Implement a loading scene to handle the time that it takes before the next scene is fully loaded in Unity.
In the last post I covered how to implement a game manager by applying the Singleton pattern with Unity. Now, it’s time to create a loading scene to handle the time that it takes to load the next scene with Unity.
Main menu scene
To start, let’s take a look at the main menu scene that I’ve created for my game with two buttons:
The expected behavior is to click on the start button in order to display a loading scene that contains a loading bar that will get filled until the main scene is loaded and the game starts.
Creating the loading scene
So, in order to create the loading scene, let’s click on File > New Scene or press Ctrl + N:
Then, let’s create a new Image to display the background. We can modify the anchor presets to cover the game background:
Next, let’s drag the respective image sprite from the project folders into the respective slot to display the background. As you can see, we already have a background for the loading bar within the image:
Now, let’s create a new Image and modify it so that it covers the background for the loading bar:
Once covered, let’s drag the respective image sprite for the loading bar:
Then, to make the loading bar look better, let’s add a new image to display an overlay:
Finally, to display the filling effect in the loading bar, let’s select the loading bar image and modify the Image type to be Filled and the Fill Method to be Horizontal. You’ll notice that the Fill Amount value goes from 0 to 1 and it directly modifies the look of the image:
Loading the scene
And now, to be able to handle the loading bar while the main scene is loading, let’s create a new script:
Then, let’s open the script and include the respective namespaces that we need to handle the UI elements and the scene loading:
Next, let’s create a new private Image variable to store a reference of the loading bar image. Don’t forget to use [SerializeField] to be able to drag the image into the inspector:
Then, let’s create a new coroutine to handle the scene load:
In order to load the main scene asynchronously and know when it’s already loaded we’ll need to use an AsyncOperation and the LoadSceneAsync method from the SceneManager class:
If you want to know more about the AsyncOperation and the LoadSceneAsync method you can visit the Unity docs:
Now, let’s create a new while loop that will run until the AsyncOperation is done:
In here, we’ll set the fill amount value of the loading bar image to be equal to the AsyncOperation progress property (which goes from o to 1 too). Then, we’ll use the yield return statement to return the respective rendered frame after each iteration:
If you want to know more about the WaitForEndOfFrame class you can visit the Unity docs:
Finally, let’s use the Start method to start the coroutine that loads the main scene asynchronously:
Don’t forget to drag the loading bar image into the script component through the inspector:
Also, to avoid scene management problems, let’s add the scenes of our game through the Build Settings:
If we run the game with Unity, we’ll see that the loading scene is displayed and waits until the main scene is loaded to display it:
Note: The loading scene doesn’t takes too much time to load the main scene as it isn’t too heavy and I’m using a powerful computer to run it.
And that’s it, we created a loading scene with Unity! :D. I’ll see you in the next post, where I’ll be starting a new 2.5D project with Unity.
