How to Create a Loading Screen in Unity
WooHoo! The home stretch of the Cinematography course! What a ride it’s been! I feel I learned quite a bit in this course from how to record cutscenes to using Unitys navmesh system to help move the player and NPCs among waypoints as well as writing menu screens and managers!
After the player hits start, it takes a little while to load the game so we should make a loading screen where a bar rises to show how much of the game is being loaded.
The initial setup is pretty straightforward. Make a new scene, save it as “LoadingScreen”, and then create a new UI Canvas Image that will hold our loading screen.
After dragging the source image into the canvas image, we choose the stretch option and set all the sides to 0.
Next, we’ll add a new image that will serve as our loading bar.
Next, we’ll want to change the anchor to the left side, be sure to hit shift which will help us emulate the growing effect of the bar.
Next, adjust the shape and size of the bar so it fills the loading bar area.
Next, change the bar image type to fill. The fill method change to horizontal and it should automatically be coming from the left so try scrubbing the fill amount! Yes! We’re good to go!
One final bit is to add an overlay to add a bit more personality to the loading bar so we add one more image and resize it to be on top of the bar.
That really looks awesome!
For it to work, we’ll need to use a type of coroutine called an Asynchronous Operation.
With an Asynchronous operation, you can yield until the operation continues or manually check whether it’s done or it’s in progress. Sounds like the perfect thing for a loading bar!
We begin by creating a new script called “LoadLevel” and we attach it to the canvas.
Going back to the Unity information page of what the Asynchronous operation is, there’s an option for progress.
So progress returns how close the operation is done to finishing giving us a number between 0 and 1, which also happens to be the same values for the loading bar fill! I like where this is going!
The example shows using a coroutine that starts loading the scene.
In the coroutine itself, it yields null so it waits for a frame, then an AsyncOperation is created that uses the Scenemanager that uses LoadSceneAsync to load the scene.
So back in our script, we’ll create a framework in pseudocode to begin programming the loading bar:
Note we’ll be using SceneManagement and UI libraries!
The first part is easy, we’ll create a holder for the loading bar and we’ve done many coroutines in the past. Just to be safe, I set the loadingBar fill amount to 0.
The next part is essentially taking the code from the example on Unitys website and modifying it to use our loading bar!
After the yield return null to give Unity some time to breath, we load in our game scene called ‘main’ using the LoadSceneAsync method which will allow us to sync our loading bar with the loading time!
changing the loading bar is nothing easier, just use the .fillAmount method and tell it that it’s the asyncOperations .progress and you have an instant working loading bar!
We also want to use another yield return new WaitForEndOfFrame so Unity doesn’t crash. (And trust me, it does without it. say goodbye to your computer until you reboot it)
So let’s see it in action!
Seems to load quite a bit before starting but it works! Awesome! This is the end of the Cinematography course, next I’ll be attending 2.5D game creation! Personally, I can’t wait!
