Legacy/Animated Loading Screen

Overview The most common way of doing loading screens would be to have a static image just before the load happens and draw it on the screen again once the level had loaded (To give the impression ...

Overview

The most common way of doing loading screens would be to have a static image just before the load happens and draw it on the screen again once the level had loaded (To give the impression of a seamless load even though the engine hangs when doing this!).

I managed to figure out a way to load levels with animated icons on screen WITHOUT the engine hanging! Thats right!

So how did I do it?

Level Streaming

Some of you might not have a clue about ÔÇ£Level StreamingÔÇØ. And thatÔÇÖs totally cool. LetÔÇÖs have a super-quick overview of what ÔÇ£Level StreamingÔÇØ is and how it can be used to create an awesome animated loading screen!

Level Streaming (In Unreal Engine 4): Level Streaming is a feature of Unreal Engine 4 that allows levels to be loaded and unloaded on the fly and gives the developer the extra ability to toggle their visibility all during play-time. This basically means that you can take a huge map and break it into tiny little chunks, Which can help massively with performance!

So how did I use that to get a loading screen?

In a nutshell, What I did was have a level with a loading screen (Black screen) with a little rotating arrow on it. From there, I created a ÔÇ£Begin PlayÔÇØ in the level blueprint and connected that to an event called ÔÇ£Open Stream LevelÔÇØ (With the level that I wanted loaded in selected).

This node has an output called ÔÇ£CompletedÔÇØ which fires once the level has been loaded. So I created a quick Matinee (Which had a single Fade in > Fade Out track) and fired that once the level was loaded.

From there, I simply changed the active camera from the one in the ÔÇ£Loading levelÔÇØ to the one in the main level when the Matinee was completely faded out. Then once the camera change had happened, I fade back in and bam! The level is there, loaded and ready to go!

I know that reading that it sounds super complicated, When in actuality itÔÇÖs super, super easy. For people who are new to Unreal Engine 4, it might sound like two paragraphs of alien language, But IÔÇÖll break down the process now for you to help you achieve what I created!

11 Short Steps to Create an Animated Loading Screen

Step #1 - I Went into Window > Levels

Step #2 - Created a New Level by going to ÔÇ£LevelsÔÇØ and selecting ÔÇ£Create new LevelÔÇØ

Step #3 - Moved all my main level stuff by highlighting it all in the editor window and selecting ÔÇ£Move Selected Actors to LevelÔÇØ via the ÔÇ£LevelsÔÇØ tab.

Step #4 - Created my load screen texture, camera and animated spinning icon and made sure they were in ÔÇ£Persistent LevelÔÇØ.

Step #5 - In the ÔÇ£Level BlueprintÔÇØ (Of ÔÇ£Persistent LevelÔÇØ), I created a ÔÇ£Begin PlayÔÇØ event and created a ÔÇ£Open Stream LevelÔÇØ node and connected them both together.

Step #6 - I put the Level Name that I want loaded into the ÔÇ£Open Stream LevelÔÇØ and made sure ÔÇ£Block on LoadÔÇØ wasnÔÇÖt ticked but ÔÇ£Make visible after loadÔÇØ was.

Step #7 - I created a Matinee with a ÔÇ£FadeÔÇØ track and an ÔÇ£EventÔÇØ track. I then made a quick fade in / Fade out / Fade in and put an event while the screen is supposed to be totally black.

Step #8 - I went back into the ÔÇ£Level BlueprintÔÇØ and created the nodes to ÔÇ£PlayÔÇØ the Matinee once the level has been loaded.

Step #9 - I then added a ÔÇ£MatineeControllerÔÇØ node and right-clicked and selected ÔÇ£Refresh nodesÔÇØ to make my event I created in the Matinee to appear.

Step #10 - I added a node called ÔÇ£Remote EventÔÇØ which searches all the Level Blueprints for the event in question to fire it.

Step #11 - In the ÔÇ£Level BlueprintÔÇØ of the level that had just been loaded, I created an event that was called the same thing as the ÔÇ£Remote EventÔÇØ and connected a ÔÇ£Get Player Controller > Set View Target with BlendÔÇØ node to it.

And that was all I had to do!

See? 11 short steps to have a fully animated load screen. How awesome is that?!

Wrap-Up

I now use this trick for every level in SUPER DISTRO. In cases where weÔÇÖre moving from whole level to level (And not just loading a level in), I just fade to black with Matinee and then load in the next ÔÇ£WholeÔÇØ level, fading in my loading screen on the next level once itÔÇÖs loaded.

See? Super simple!

Hoodini Hoodini Bot Last updated on