Unity Development — Load Screen

I know when playing a video game, most people are not happy to see a loading screen. They are slow and you just want to play. Unfortunately, sometimes they are necessary. If you are someone starting out in game development, making 3D environments and realizing that loading the next scene can be a little slow, it’s time to learn how to add a loading screen yourself.

Normally when loading a scene in Unity, you would have a script that has something along the lines of ‘SceneManager.LoadScene(2)’ or whichever scene in your Build Settings you are looking to load. When a loading screen is necessary, you are going to need it to be its own scene. Make a new scene, call it ‘Loading_Screen’ or something similar and add it to your Build Settings.

With this setup, we are going to go from Scene Menu to Main, but LoadingScreen will be our loading scene. In your new loading screen scene, add some art in the background if you desire. If you don’t have professional art, you can always use a blank colored screen and use a Text object to write ‘Loading…”

Next, make two Images. Again, these could be made by an artist, but all you need are solid colored rectangles that go across the screen. In the example, we are going to make them red and yellow.

One of the rectangles will be used as the background, so once made and stretched out, it can stay as is. The other Image is going to have some adjustments made. First, make sure in the Hierarchy that it is below the background in the Canvas. The lower on the Canvas, the more upfront it is towards the screen.

Look at the Inspector of the progress image. You’ll notice you can actually change the type. Click on it and make it ‘Filled.’ The ‘Fill Method’ should be ‘Horizontal’ and the ‘Fill Origin’ ‘Left.’ This means that the progress is going to fill from left to right. You can even play around with the ‘Fill Amount’ toggle and see how it looks.

This fill amount is what we are going to use to our advantage in the coding portion of this task. Have your menu or first scene load into the loading scene directly, not the scene you actually want to load. In the loading scene, we are going to write a new script.

Obviously the loading scene has a purpose. It is supposed to give the player something to look at while the next scene is loading. How can the next scene begin loading while this scene is showing an image moving in progress. Here is where asynchronous operations come in. Basically, there are a set of functions that can happen simultaneously with everything else. One of them is loading a scene and we are going to set that up right now.

First, get a reference to the progress image and create an IEnumerator that will load the next scene. Have this IEnumerator called from Start().

Now comes the important part. You’re going to make an AsyncOperation and assign it to Load the gameplay scene. Next, use a While Loop to check and see if the operation is complete. While it is not, move the progress bar and throw a yield. AsyncOperations also have a variable called ‘progress’ that can be used to set the right fill amount on the image. Overall, it should look something like this.

Try this out and see how it looks. Once you get this down, you can change the image to be whatever you want. Play around with the fill types or even animations. Loading screens can be fun!

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Remitly Engineering Metrics: The Discovery

Frontend Developer Roadmap 2020

Data Structure: Arrays & Big O Notation

The Fundle of the “Bundle (install)”

My Top Homebrew Packages for 2020

What you need to know as a Hardware and IoT Engineer?? How to Begin...

Matterverse Dev Diary Updates Jun 11

Django Automatic Migration and Seeding

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Christopher Graf

Christopher Graf

More from Medium

A Picture in Motion — Using Coroutines in Unity

Day 105: Working with Animation Events in Unity

Initializing A Git Repository in Unity

Unity camera plugin save image data as bytes