My journey becoming a Unity game developer: Main Menu: Loading Screen with a Loading Bar
Objective: Create a Loading Screen to display when the game scene is loading with a Loading Bar showing the progress of how much the scene has loaded.
To begin creating a Loading Screen we will start with a New Scene. Save the scene, open the Scenes folder, and name it LoadingScreen to keep it organized with the other scenes in the game.
Next, create a new UI Image with the name Background. In the Anchor Presets setting, select the image to Stretch and ALT-Stretch position to fill in the image across the whole screen. Drag the image that will be used for the background image into the Source Image slot under the Image component, which in this case will be Main BG.
Create another UI Image name Progress Bar which will show how much longer it will take for the game to finish loading. In the Anchor Presets, set the image to the Middle-Left, and ALT-Middle-Left to actually position the image to the left of the screen. Drag the Progress Bar image into the Source Image slot to represent the look of the Progress Bar.
Use the Rect Tool to resize the Progress Bar’s image down enough to be able to see Red Empty Bar. Then place the Progress Bar image over the Empty Bar using the Move Tool, and adjust the size of the bar leaving a slight edge of red on the outer edges of the Progress Bar. Use the Rect Tool once more and drag the right side of the Progress Bar to match the length of the Empty Bar leaving a slight piece of red showing on the outer edge.
Inside the Image component, go to the Image Type and change the setting to Filled. This will allow us to use the Fill Amount slider to adjust how much of the Progress Bar’s image shows over the Red Empty Bar. The slider values range from 0 to 1, but the Filled image is not working as a slider because the Fill Method is set to Radial 360 which will make the image move around 360 degrees. To move the bar in a sliding manner, change the Fill Method to Horizontal and the bar will move across the Empty Bar.
To make the Progress Bar a little more appealing, let’s add an overlay image over the bar. Create a new UI Image name Overlay, and click on the Progress Bar game object. Copy the Rect Transform’s Component Values, then select the Overlay object and Paste Component Values onto the Overlay’s Rect Transform. We will see the new Overlay image directly over the Progress Bar.
There’s one thing that must done which I didn’t do originally making the Progress Bar and Overlay. We must enlarge the Game’s View Tab to its maximum size in the editor for the Progress Bar and Overlay to stay in its correct position when the Loading Screen appears playing the game.
This is how the Loading Screen appears in Game Mode when we fix the Loading Bar and Overlay with the Game View Tab enlarged to its maximum.
To activate the Loading Screen, we need to create a new C# script name LoadLevel and attach it to the Canvas object.
Inside the LoadLevel script, create a new public variable Type Image that will be a reference to the Progress Bar. Then create a Coroutine that will be used while the scene is loading to fill in the amount the scene has loaded through the Progress Bar until complete. The loading scene and Progress Bar will be working asynchronously meaning that the scene will load first in the background, then the Progress Bar will update how much has the scene loaded second after each frame.
Name the Coroutine LoadLevelAsync(), create a variable Type AsyncOperation name operation. It will equal the scene’s name which is “Main” in this case using the Scene Manager’s LoadSceneAsync() method. Then, While the operation variable is not done loading, the Progress Bar fill amount will equal the operation’s scene progress. Last, we will pause after every frame’s ending to update the Progress Bar fill amount.
Select the Canvas in the Hierarchy and drag the Progress Bar game object into the Load Level’s script component Progress Bar slot.
Go back to the Main Menu script and change the StartGame() LoadScene from the game scene to the Loading Screen scene.
Finally, make sure to go into File->Build Settings and place the scenes in the following order: 0-Main Menu, 1-Loading Screen, 2-Game scene.
Then select the Main Menu Scene from the Scenes folder as this is where the game will start from. Play the game and select Start from the Main Menu to watch the Loading Screen appear showing the scene loading process. When the Loading Bar is full, the game will start from the Intro Cutscene.
