How to Create A Loading Scene in Unity

Objective: Create a Loading Scene for the Level

Final scene fully loaded

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.

--

--

--

Developer

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

Recommended from Medium

Put Your Kindle Vocabulary Into Anki Cards

ECS Fargate Docker container securely hosted behind API Gateway using Terraform

Lenovo Yoga 730 13" Intel Quad Core i5–8250U 8GB 256GB SSD Full HD Touch Screen

Lenovo Yoga 730 13

Quick Facts on IT for beginners

The Core Knowledge of SQL Database Development (2)

Software Developer Myths That Just Keep Spreading…

Arrow — Datetime’s Little Brother

Software development company and its clients: features of maintaining the contact

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 Leen

Simon Leen

Developer

More from Medium

Adding Challenge — Limited Ammo Count

Adding a player ammo indicator to the UI

Benefits of Prototyping without Assets

IDamageable Implementation!