Feature Highlight: Create a Loading Screen with Progress Bar in Unity
If you’ve ever played a major 3D game title it is almost certain that you have encountered some sort of loading screen either between the menu and the game first loading or even between scenes or zones of the game itself. These screens are a useful tool to inform the player that the software is working as intended while the system works in the background to collect and render all of the required assets. Without loading screens and progress bars players might be left thinking their game is broken or frozen during this process when in fact everything is working as intended. Let’s go through the creation of a simple loading screen framework that you can implement in your games.
Step 1: Create a new scene and save it as LoadingScreen.
Step 2: Create a new image object which will become your background image and then anchor the image to stretch full screen. Update the canvas to scale with screen size.
Step 3: Replace the source image field with your background image asset. In my case we have an image asset with “Loading…” text and a placeholder background for our progress bar:
Step 4: Create a new image object which will hold our progress bar. We have this asset prepared as well which is just a plain color rectangular bar. Drag this image into the source image field for your progress bar object.
Step 5: Position the progress bar so that it can be used as a fill against our background. Update the Rect Transform anchor to the middle left position and set the X Position to 0 which will move the bar to the far left of the screen. You can now emulate the behavior of the progress bar by simply using the Rect Tool (T) and dragging the right edge across the screen:
Step 6: Resize the orange progress bar “fill” to fit within our red “container” background and move it into place along the left edge. Once aligned, drag the bar out into “full fill” position.
Step 7: Inside the image component of the progress bar object update the Image Type from “Simple” to “Filled”. There are a few fill methods to play with here, such as Radial 360, 180, or 90 and vertical:
The one we want to use however is Horizontal fill from a left origin:
Step 8: This step is optional, but you might consider adding a semi-transparent overlay on top of your progress bar to add some flair to it. In my case we have a red overlay in the same color as our background bar that adds a subtle splatter pattern. Because the color matches the background but it is rendered on top of the progress bar, it only becomes visible as our progress bar progresses:
If you have the capacity to create or source an overlay like this it definitely adds unique flavor to the loading bar.
Step 9: It is time to program the behavior for our loading progress bar. The basic logic is that we need to get a handle to the “Fill Amount” component of our progress bar image and update that value to match the progress of our system as it loads our game assets. We do this with an asynchronous operation, allowing us to complete two tasks in tandem — namely loading our actual game scene while displaying the loading screen scene and updating the progress bar. Create a new C# script and attach it to the canvas in the loading screen scene.
Step 10: Add both the UnityEngine.UI and UnityEngine.SceneManagement namespaces so we can reference both our progress bar image and our main game scene to load in the background. Create a handle to the progress bar and assign it in the inspector.
Step 11: Create a coroutine to handle our asynchronous behavior and run it in void Start().
Step 12: Implement the following code inside the coroutine:
The logic here is as follows: When the coroutine begins, start loading our “Main” scene in the background. While this loading process is not yet done, update the fill amount for our progress bar to match the loading progress (both will scale from 0 to 1). Wait for the end of frame to allow the system to breathe in between updates (always needed when using a while loop).
That’s it! Your loading bar will now update dynamically as your game loads. I have a pretty fast computer setup so there isn’t much load time for me, but you can catch it holding for a second around 90%:
I hope you found this guide helpful for implementing your own loading screens. This game is now complete and you can play it at: https://sneakydaggergames.itch.io/the-great-fleece
I’ll be tackling a 2.5D platformer game next — see ya there!
