top of page

Unreal Engine Tutorial: How To Transition Levels

In this tutorial we will get a player character to travel from one level to another.

In this example we will be using a box collision to trigger the level change that also puts a loading screen onto the viewport.

Step #1

Create A Loading Screen Widget

The widget we will create will act as a loading screen to cover up the choppy-looking level transition that can occur when loading a larger level.

Without it, the player may think the game is glitching.

Let's get started creating the widget that I am going to call WBP_LoadingScreen, by right-clicking inside of the Content Browser, selecting User Interface, then Widget Blueprint.

Go ahead and open the Widget Blueprint and stay on the Designer Tab.

Now drag an Image from the Palette and place it on top of the Canvas Panel.

Input the correct size for the Image in the Image's Details Panel.

Input 1920 for Size X and 1080 for Size Y. Be sure to Anchor the Image to the Full Screen.

For this example, we are making a simple loading screen by setting the background colour to black with the Color and Opacity selector in the Image's Details Panel.

Next, we will drag Text from the Palette onto the Canvas Panel.

Anchor the Text to the Centre of the screen.

Change the Text to "Loading" in the Content section of the Details Panel.

Increase the Text size in the Appearance section of the Details Panel, then Centre it with Justification.

Wrap the Text in the Wrapping section of the Details Panel.

Don't forget to Compile and Save.

Here is a video of step #1

That's all with the Widget, now we need to deal with changing the level.

For this example, we'll create an Actor Blueprint with a Box Collision. 

Step #2

Create An Actor To Trigger The Level Change

In the Content Browserright-click to create a Blueprint, and select Actor. we'll call it (BP_LevelChange1_2).

Add Component and select Box Collision, then Compile and Save.

Select On Component Begin Overlap and head over to the Event Graph.

  • Drag off of the Exec On Component Begin Overlap Node and 

  • Connect the Other Actor pin on the Overlap Node to the Character's Object pin. 

  • From the character's cast node select Create a Widget and be sure to select WBO_LoadingScreen in Class selection.

  • Dragging off of the Return Value of the Create Widget node connect to an Add To Viewport node.

  • Next up we will connect a Delay node leaving the default time of 0.2.

  • Finally connect a Open level by name, typing the Level Name into the node.

Here is a screenshot

Don't forget to Compile and Save.

Now let's drag and drop the Actor Blueprint with the Box Collision into the level at the point we want the character to spawn out of the level from.

Here is a video of step #2

That's it. 

Go ahead and test it out by moving your character into the box collision.

All the best to you on your game dev journey. 

Now go create your masterpiece.

60 views0 comments


bottom of page