Creating a Loading Screen

The first thing a player is going to see when loading up your game is the loading screen. This is the first chance to make an impact upon the potential player. So today we will be looking at how to create a loading screen.

The first thing we will want to do is create a new scene. To do this go to file>save as>LoadingScreen.

The next thing we are going to do is go to Create>UI>Image. Set the anchors of the image to stretch to fill the screen. Then import your image into your Unity project. Then click on image and drag your image making sure your image is a sprite. Select Image and drag your image onto source image. When complete your white background will now have your image like below and your source image will now show your image name.

Now we are going to create our loading bar. To do this right-click in the heirarchy>UI>Image and name it progress bar. Add the progress bar image to the asset list.

Repeat this process for the fill bar as well. For the progress bar go to image type and select the filled option and change the fill method to Horizontal.

When done save your scene.

Now we have to populate the fill amount. We need to be able to create an asynchronous operation. To do this we will create a new C# script named LoadingLevel, and attach it to our canvas. When complete open up the file.

The first thing we need to do is reference the progress bar so we can modify the fill amount. We first need to be able to access the image for the fill bar. So we will be adding UnityEninge.UI and creating a public image. We also need to create a IEnumerator called LoadLevelAsync. Add a yield return new to the IEnumerator and click save.

Then add the ProgressBarFill in the inspector to the LoadingLevel script for the progress bar.

Now we can access our fill amount of our progress bar.

We now need to be able to call our coroutine, and call an asynchronous operation.

We will need to access the SceneManagement system of unity so we will be adding using UnityEngine.SceneManagement. When complete we will create an asyncoperation and load the main scene.

Click save and then go to file build scene and add your open LoadingScreen scene and your main scene(The scene you are loading to). When done close out of that screen.

When you click play you are taking from your loading screen to your main scene.