How to Create A Loading Scene in Unity
Objective: Create a Loading Scene for the Level
We start with a new scene and save it. Then we create our Canvas by creating a UI Image with that preserves the aspect ratio and then setting the anchors to 0 to take up the full screen, then set the image source by dragging in the background image. We also set the Canvas Scaler to screen not pixels.
Next we want to create the yellow progress bar. We create another image and add the yellow fill image. We set the anchor to the left side of the red and then scale the image out to match the red. I left a slight red outline come through on all sides for added effect.
Next we select the yellow progress bar image and move to the settings in the Inspector. We change the image type from simple to filled and the fill method to horizontal. The fill amount will range from 0 to 1 and will be what is used to carry out the progress of the progress bar.
We then create one more image and apply an overlay image to it. We use the same width and height as the progress bar as this is only used for effect and the color of the overlay is the same as the red in the background so it will only show up while the progress bar is in effect.
Now that we have the look we want, we move on to the logic of the progress bar loading. We want the progress bar to move with the loading progress of the level. For this we need to use Asynchronous Operation.
We create a new script called Loading and attach it to the Canvas of the loading screen. We use a coroutine for the Async loading. We need to use UnityEngine.UI to create a public Image that we can assign to the yellow progress bar image. To move between scenes, we need the SceneManager so we also bring in UnityEngine.SceneManagement.
Inside our coroutine we get an AsyncOperation and set it to the SceneManager.LoadSceneAsync and pass in the Main level scene. Next we run a while statement that while the operation is not done takes the progress bar image and uses the percentage of the scene loading to fill the bar across. Make sure not to forget to call /start the coroutine in the Start method.
We then add all the relative scenes in the build settings. Finally in the MainMenu we load the Loading scene using the SceneManager when the start button is pressed.
