Creating a Loading Screen

Allowing user feedback during long load scenes.

Once you have finished the loading screen, it is time to tie everything together by having the loading screen bridge the different scenes together. This is also a great method to let the players know that the game is still loading albeit a little long.

Creating a new Scene:

We start by creating a brand new scene, this scene will contain the loading elements. In this scene, we are provided with an background image and one progress bar image along with an overlay image for the progress bar. Start by creating an Canvas with an image element.

Set the anchor to free form and zero out everything (Left, Right, Top Bottom and Pos Z). This would align the image to fit the entire screen space.

Next, do the same process with the Progress bar and overlap elements, but refrain from using the free form anchor. Instead, we will anchor the progress bar on the middle left.

Position the progress bar on top of the red section, make sure you leave a bit of gap between the red and yellow bars.

Then in the Image type, we are going to select “Filled” and the Fill Method should be set to “Horizontal”. With this setting, this should give us the standard loading bar sequence.

Now we add some nice textures to the progress bar by positioning the overlay just on top of the progress bar. Since it is just a overlay object, we don’t need to do anything.

With the Overlay, the progress bar now looks a lot better!

In the next Article, we will learn to script the loading bar and how to apply it during loading sections of the game.

A Designer, an Illustrator and a massive tech geek aspiring to become a professional Unity Developer.

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

Recommended from Medium

5 Common Responsive Web Design Mistakes And How To Avoid Them

Design + Conflict: Do You Know Your Conflict Style?

Overcoming Anxiety as a Newbie in the UX Industry

Road signs — a story of typeface wars, big egos and crazy usability tests

Your Style Based On Your Zodiac Sign (3/3)

The design process is broken

The Lotus Flower charity website redesign

ISE 2020 and Interactive 2020 Recap | Intuiface Blog

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
Simon Truong

Simon Truong

A Designer, an Illustrator and a massive tech geek aspiring to become a professional Unity Developer.

More from Medium

2D Player Animation (part 2)

Install Unity’s new input system

Creating a Homing Projectile

C# scripting in Unity — Day 01