Creating a Loading Scene in Unity

Loading screens are commonly used to provide the user feedback that it is processing with a visual representation of how long before the game starts.

The screen is shown above consists of a few UI elements and a single script.

UI

  • Canvas
  • Background Image
  • Loading Bar
  • Overlay (I actually love this idea)

Script

  • Load Level

Let's look closer at how each plays its part.

Canvas

The only properties you really need to make sure of is setting the UI Scale Mode to Scale With Screen Size and I set the Reference Resolution to X: 1280 and Y: 720.

Background Image

Simply add a UI Image to the Canvas, rename it to Background and located the main background image, and set the Anchor Presets. I used the SHIFT and ALT to set the anchor to the centre and stretch the image to the full size of the canvas.

Loading Bar

For this feature, add another UI Image and rename it to LoadingBar. Let’s first anchor this to the left of the screen and position it.

Change the Image Type to Filled.

Making sure the Fill Method is Horizontal. Noticed as you play with the Fill Amount the Bar reflects the setting. 0 is empty to 1 which is a full bar.

Overlay

As this stands, I would have moved on due to my lack of artistry but today I learnt how much texture changes the complete feel of this UI.

By adding a texture that overlays the loading bar really made it pop and I was amazed at how effective it is.

Load Level Script

We are now on to the glue that brings it all together.

Firstly there is a variable to references the Loading Bar and I drag the LoadingBar onto the slot in the Load Level scripts component on the Canvas.

In the Start Method, we set the Loading Bar’s Fill Amount to zero and call a coroutine.

This coroutine first loads the Main scene using an Asynchronous Operation.

While the load has not finished (done), we use the progress properties to update the Loading Bar Fill Amount.

We then wait for a frame before exiting the while loop and start the new scene. That’s it!

If you enjoyed reading this article give me a Clap, also if you would like to see more, “Follow” me, so you may be notified of future releases. You may also send me a message if you need any further help.

--

--

--

A Data & Analytics Consultant who is expanding into developing experiences in XR, Enterprise and Gaming space using Unity www.jeannoelseneque.com

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

Recommended from Medium

Welcome to Code Empire

First Mile finished, many miles to go.

Day 36 of Game Dev: Every Game needs a Boss- here’s mine!

File Cards Mac App REVIEW

Code Challenge: #100 Days Of Code : Hello World

PoolTogether Developer Call #2

BIM View: Stop Reacting and Start Responding — Proactive Model Management

Supercharge your BMS with EBI

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
Jean-Noel Seneque

Jean-Noel Seneque

A Data & Analytics Consultant who is expanding into developing experiences in XR, Enterprise and Gaming space using Unity www.jeannoelseneque.com

More from Medium

Unity : Cinemachine and Timeline (Part II)

Using Light Layers and Volumetric Lighting in Unity’s HDRP

Adding a thruster speed boost on keypress

Aiming Features in Cinemachine