Loading Screen for LoadSceneAsync (Unity3D)
Needed to create a loading screen for a dedicated ‘LoadingScene’ in this third-person stealth game project in Unity. I’ll give a little rundown on how to create something like this 😉
Objective: Create a loading screen/scene to show the progress of a LoadSceneAsync operation.
1. First, set up the UI for your loading scene. The element which’ll be of most interest to us in this case will be some sort of ‘loading bar’ graphic (ideally a long horizontal rectangle with a solid fill). Create an Image under your Canvas for this and assign and position this loading bar till it’s how you’d like it. It’d also be worth making sure the anchoring’s set to the left hand side of the screen (as that’s where it’ll be filling in from).
On the image component, change the Image Type from Simple to Filled. Then set the fill method to Horizontal and the fill Origin to Left. The ‘Fill Amount’ float value beneath this goes between 0 and 1, and it’s what we’ll be controlling to display the progress of the LoadSceneAsync method (and, in fact, progress on this goes between 0 and 1 as well).
2. Create a new ‘LoadLevel’ script (or equivalent) to control both the load process and the display. This script will need both the ‘using UnityEngine.UI’ and ‘using UnityEngine.SceneManagement’ declarations for this. With this done, create a public Image variable (or a serialised private one if you prefer). As part of the start method, we’ll be calling a custom ‘LoadLevelAsync’ coroutine, which will use Unity’s SceneManager to call the LoadSceneAsync method (passing in the name of the scene we want to load). Since this is an aynchronous operation, we can create a handle to this by writing something like ‘AsyncOperation operation’. We can now check the status of this ‘operation’ variable to see how our load process is going.
We can create a while loop with the condition !operation.isDone (i.e. run while the operation isn’t finished). Within the while loop, we can either show the operation.progress float itself or we can try to smooth it out a bit and store it in a variable. Either way, we’ll be using either of these and assigning its value to our image variable’s fillAmount. Make sure to include some sort of yield statement within this loop to give your program time to breathe:
3. Head back into Unity, let it compile, and drag in that LoadingBar Image to the appropriate slot on this script. Make sure to include any scenes you want included under Build Settings, particularly whichever scene you specify by name (in this instance “Main”) in order for it to be successfully loaded in.
With this all done, you should have a working loading screen/scene for your project 😉 I personally find the scene loads a tad too quick for my liking, so I might revisit this and make it into a bit of a ‘pseudo-loading screen’ (not necessarily loading so much as waiting a second or two), but that could well be a matter of personal preference.
