Creating UI Controls#
-
In the Content Browser panel, click on Add or right-click in a blank area, and then select User Interface/Widget Blueprint.
-
In the pop-up window, click on User Widget to create a UI control. You can customize the name (it is recommended to name it as WBP_XXX).
Introduction to UMG UI Editor#
Double-click on the UI control blueprint to open the UMG Designer:
UMG consists of seven main parts:
| Tab | Purpose |
|---|---|
| 1. Designer | Canvas for designing UI layout, used to build and display UI, and position UI on the screen |
| 2. Palette | List of available controls, including built-in and user-defined control templates |
| 3. Details | Properties of the control, including rotation and transformation properties |
| 4. Hierarchy | Displays a list of all created controls and their hierarchical relationships |
| 5. Animations | Displays animations created for UI |
| 6. Timeline | Properties and keyframes of control animations, can be used to create frame animations |
| 7. Editor Mode | Switch between Designer and Graph modes, Graph mode has almost the same functionality as Blueprint Editor |
tip: On the canvas, you can pan the canvas by holding the right mouse button and moving the mouse, and zoom the canvas by scrolling the mouse wheel.
Building the UI Interface#
Before designing the UI, you should first place a Canvas Panel as the root object in the canvas.
You can search for Canvas Panel in the Palette or find it in the expanded panel: click and drag with the left mouse button to the canvas area or release it in the Hierarchy panel.
After that, you can place other controls you need in the canvas, such as text, buttons, etc.
You can also rename controls, drag and resize them, and modify related information through the Details panel.
After designing the UI interface, remember to click on the Compile and Save button in the upper left corner of the editor.
Displaying the UI Interface#
When you run the game and find that you can't see the UI you just designed, it's because you need to display the UI in the Game viewport and do some additional blueprint operations.
-
In the Level Editor main toolbar, click on Blueprint/Open Level Blueprint.
-
Right-click in a blank area and search for and add the Event BeginPlay node.
-
Place the mouse over the execution pin of the Event BeginPlay node, hold down the left mouse button, drag it to a blank area, and release it. Then search for the Create Widget node and click on the Class parameter dropdown list to search for the UI instance we want to create, "WBP_HUD".
-
Connect the execution pin of the Create Widget node to the Add to Viewport node, and connect the return value (Return Value) of the Create Widget node to the Target of the Add to Viewport node.
-
Click on the Compile and Save button in the upper left corner, close the window, and click on the Run button in the main editor interface. Now you should be able to see the UI interface you created in the game viewport.
