3D UI Tutorial

Overview

The 2D UI is created on the left side of the demo, and the 3D UI is created on the right side. Moving the DefaultPawn to detect whether a static mesh in the Scene enters the Collision range so we can add or remove its name in the interface.

Create Level

First create a level, click on the menu bar File -> New Level From Template (Ctrl+N) -> template_empty.

Add terrain, lights and sky to the template_empty scene.

Click on the Create Actor button and select Terrain Actor, Direct Light and Sky Sphere under the Visual to create them in turn.

Drag the dinosaur model from the Project panel into the Level.

Add a bounding box to the dinosaur. After selecting the dinosaur, click Add Component -> Box Component in the Inspector panel to adjust the bounding box size by using Box Extent X, Box Extent Y and Box Extent Z under the Shape.

Select the adjusted dinosaur model and you can copy multiple Actors in the scene by Ctrl + C and Ctrl + V.

Add Default Pawn

Click Create Game Object -> Default Pawn, select Default Pawn(instance) in the Inspector panel, and add a string tag for it by the Actor String Tag property under Actor (Query the Actor by Tag in the script).

Select the CollisionComponent(Inherited), check the Trigger property under Physics, set the Collision Profile Name property under Collision to Trigger to implement collision, and modify its size in the Sphere Radius property under Shape.

Add 3D UI Components to Default Pawn

Click Add Component -> Control 3D Component in the Inspector panel.

Add a string tag to the Actor Component String Tag property under Component, browse and select the UI file in the File property under Control3D. The UI will be presented to the Scene, drag the UI to adjust the position and angle to the front view (Otherwise the UI is invisible to the view when clicking the Play Button).

When the DefaultPawn is moving in the Scene, 3D UI will be moved with it, and always keep in front to set the following properties.

Select LDefaultPawn(instance) in the Inspector panel, check Use Controller Angle Pitch, Use Controller Angle Yaw and Use Controller Angle Roll under Pawn, and set Auto Possess Player.

We also need to create an Actor to bind the script we wrote, click Create Game Object -> Game Object and add a script to it.

Click Add Component -> Script Component in the Inspector panel and add a Script File under Script.

For more details about the code of the script file, please refer to the demo 3d_uid\3d_ui.lua.

Play the Game

Click the Play button to start the game.