XR Loading Screens

How-To for adding loading screens to your immersive apps.

Choose your operating system:

Windows

macOS

Linux

For immersive apps in head-mounted displays (HMDs), you can use a texture as a loading screen to help with transitions between levels. At the end of this How-To, you will be familiar with the Blueprint nodes for loading screens and know how to add them to your project.

Set Loading Screen Node

The loading screen needs to be defined before you can show it in the HMD. On the Set Loading Screen node, you can add the texture that you want to use for the loading screen as a Texture Asset . Change the Offset vector to specify where the texture should appear relative to the position of the HMD.

Set Loading Screen Blueprint Node

Show and Hide Loading Screen Nodes

Once the loading screen has been set, call the Show Loading Screen node to display it in the headset. When you want the screen to no longer be displayed, call the Hide Loading Screen node. Sometimes it's necessary to add a small delay with the Delay node after Show Loading Screen to ensure the loading screen becomes visible before the next operation.

Show Loading Screen and Hide Loading Screen Blueprint Nodes

Using Loading Screen Nodes

In the following example, a map is loaded using Level Streaming as the map transition. Follow these general steps to add a loading screen to your project:

  1. In the Unreal Editor , open your Map.

  2. Click Blueprints > Open Level Blueprint .

    Open Level Blueprint in the Editor

  3. In the Event Graph , add the following nodes:

    • Delay

    • Set Loading Screen

    • Show Loading Screen

    • Load Stream Level

    • Hide Loading Screen

    Level Blueprint with all the nodes added

  4. Connect the output from the Event BeginPlay node to the input of the Set Loading Screen node.

  5. On the Set Loading Screen node:

    1. Add a texture to the Texture parameter.

    2. Set the Scale 2D vector to (1.0, 1.0) —a nonzero value—to see the texture.

    3. Set the Offset 3D vector for the loading screen to (1.0, 0.0, 0.5) . The loading screen should appear in front of you, but this position can be different depending on your headset.

    Level Blueprint where the EventBeginPlay node is an input to the Set Loading Screen node

  6. Connect the output of the Set Loading Screen node to the input of the Show Loading Screen node.

    Level Blueprint where the Set Loading Screen node is an input to the Show Loading Screen node

  7. Connect the output of the Show Loading Screen node to the input of the Delay node. The delay node will be used to set a specific time duration for the loading screen.

  8. Set the Delay node's Duration parameter to 3.0 seconds to make the loading screen show for at least three seconds when you launch the app.

    Level Blueprint where the Show Loading Screen node is an input to the Delay node

  9. Connect the output from the Delay node to the input of the Load Stream Level node.

  10. On the Load Stream Level node:

    1. Set the Level Name parameter to a different map in your project.

    2. Enable Make Visible After Load .

    3. Enable Should Block on Load .

    Level Blueprint where the Delay node is an input to the Load Stream Level node

  11. Connect the output of the Load Stream Level node to the input of the Hide Loading Screen node. Placing the Hide Loading Screen node after the Load Stream Level node ensures that the level is fully loaded before the user can see it.

    Level Blueprint where the Load Stream Level node is an input to the Hide Loading Screen node

  12. Launch the level on your HMD to see the loading screen appear before the level changes.

You can also call Hide Loading Screen from Event BeginPlay in the Level Blueprint for the level you're loading next to ensure the loading screen isn't hidden until the level has finished loading. You won't need to enable Should Block on Load in the Load Stream Level node with this method.

Tags
Help shape the future of Unreal Engine documentation! Tell us how we're doing so we can serve you better.
Take our survey
Dismiss