Splash Screen for Unreal Engine
You can use a splash screen when your app cannot render frames. For example, you may be unable to render frames when your app is loading, switching levels, or is busy doing other things. A simple splash screen can ensure your app meets the Meta Horizon Store guidelines, such as requiring your app to display head-tracked graphics or a loading indicator within 4 seconds after launch.
Unreal Engine supports two types of the splash screen: launch images -- we call it system splash screen -- and engine splash screen. You’ll use the system splash screen defined in the Android project settings while your application is launching. The engine splash screen is Blueprint-enabled and intended to mask loading levels, cutscenes, and other in-game transitions that temporarily suspend rendering head-tracked graphics. All splash screens are guaranteed to render at a framerate no lower than the minimum.
The system splash screen is the initial splash screen a user sees after launching an app. The Meta Quest operating system implements it as a priority process, allowing the screen to load very quickly after a user launches an app.
To add a system splash screen in UE5:
- Click Edit > Project Settings.
- Go to Plugins > Meta XR > Engine Splash Screen.
- Add an element to the Splash Descs array using the circle icon with a plus in it.
- Click the drop-down menu in Texture Path and select an image to use.
To add a system splash screen in UE4
- Click Edit > Project Settings.
- Go to Plugins > Oculus VR > Mobile.
- Specify a PNG file to use in OS Splash Screen.
After you complete these steps, build and run your application.
During runtime startup, the splash screen appears with the standard, world-locked, Meta Quest animated loading icon beneath it. Similar to the behavior of built-in Meta Quest UI overlays, the splash screen & loading icon pop to the center when the viewer looks too far in another direction. Both disappear when your application starts rendering graphics, such as an auto-load splash screen, title screen, and cinematics.
The system splash screen is automatically re-sized and positioned according to the dimensions of the PNG source file. This strategy achieves optimal visual quality. You can control the size by increasing & decreasing the resolution of your PNG file. For example, you can double the splash screen size by doubling its dimensions. The setprop debug.oculus.ossplash.ratio applies a float ratio multiplier to the splash screen’s dimensions as a local test. Setting debug.oculus.ossplash.ratio to 2.3 would scale the system splash screen by 2.3x.
The auto-load splash screen displays after the UE engine has initialized. You can create this screen within the Unreal Editor user interface.
You mustn’t rely on a Blueprints function to load the initial splash screen because Blueprints functions do not display a splash screen until the level has loaded enough to begin processing (BeginPlay is fired). Remember that the engine and renderer must also load when the app first loads. If you use a Blueprint splash screen, the user will have a completely dark experience while these load, and this may prevent your app from being accepted for publication on the Meta Horizon Store.
There is no default loading splash screen.
The Unreal Engine Editor provides a mechanism for setting up an auto-loading splash screen.
Note: An auto-loading splash screen created in the Unreal Engine Editor will not appear when you preview the app from within the Unreal Engine Editor. The splash screen won’t appear because Unreal Engine loads the initial layer automatically when you start the app.
Select Edit > Project Settings. Scroll down to Plugins, and select Meta XR. The Engine Splash Screen section appears:!
The Auto Enabled checkbox enables/disables splash screen auto-loading. When auto-loading is enabled, the splash screen(s) will automatically be loaded whenever the user transitions from one level to another. When auto-loading is disabled, the splash screen(s) are never automatically loaded.
You can add multiple splash screens by calling
Add Loading Splash Screen. If you enable splash screen auto-loading, all of the splash screens that you have added will be auto-loaded whenever the user transitions from one level to another. Thus, you can think of the individual splash screens as components of the actual splash screen that will be visible to the user.
For more information, see
Add Loading Splash Screen. When you check the Auto Enabled checkbox, it will enable/disable the auto-loading of all splash screens you have previously added.
Add an element under Splash Descs by clicking on ‘+’:
Expand the new Splash Desc:
Select a Texture Path, in this case, a custom-made image that resides on the local hard drive:
Fill in the desired transform values to transform the center of the splash screen’s quad, in meters. The following are the default values:
Fill in the desired quad size values for the quad that will hold the splash screen. The following are the default values:
If you want the splash screen to rotate, enter the delta rotation values that will be added for each rendering frame (such as setting the rotation at half of the full VSync rate):
If you want to place the texture at an offset from the top left corner of the splash screen, enter the offset values in meters:
If you want to scale the texture, enter the scale values as floating point multiples of the actual size:
Specify whether or not the splash layer uses its alpha channel. By default, the alpha channel is used:
Engine splash screen using Blueprints
To display the splash screen, use the Meta-specific Blueprints function Add Loading Splash Screen followed by the Unreal Engine-standard ShowLoadingScreen function. For Blueprint reference on the splash screen, see
Splash Screen Blueprints. The following examples show how this process works.
Displaying and Hiding a Splash Screen
The system displays a splash screen for 3 seconds in the sample below and then hides it. Assuming the level is loaded, it will be displayed as soon as the system hides the splash screen:
The Meta-specific Blueprints function Add Loading Splash Screen is used in the above example. It provides several features that you can use to make the splash screen more interesting.
The system hides the splash screen using the Unreal Engine-standard HideLoadingScreen Blueprints function. Now consider how this compares with the Meta-specific Clear Loading Splash Screen function:
The Clear Loading Splash Screens function doesn’t hide the splash screen. The Meta-specific functions Add/Clear Loading Splash Screens add and remove the splash screens to and from memory. But clearing a splash screen from memory doesn’t stop showing the currently displayed copy of it.
However, if you attempt to show a splash screen after calling Clear Loading Splash Screens, the experience goes completely dark. This problem occurs because there is no splash screen in memory to display:
Using Multiple Splash Screens for Cool Effects
One of the interesting things you can do with the Meta-specific Add/Clear Loading Splash Screen functions is to create multiple splash screen effects as desired, using varying position, scale, and rotational properties, along with multiple splash screen textures. To do this, simply uncheck Clear Before Add in the Add Loading Splash Screen function and chain as many of these calls as desired. Then, when you call the Unreal Engine-standard ShowLoadingScreen function, the system will display all of the splash screens you have loaded:
