Creating UI Widgets#
-
In the Content Browser panel, click Add or right-click in a blank area, then select User Interface / Widget Blueprint in sequence.
-
In the pop-up window, click User Widget to create a UI widget, and you can customize the name (a more standardized name could be WBP_XXX).
Introduction to UMG UI Editor#
Double-click the UI Widget Blueprint to open the UMG Designer:
UMG consists of seven parts:
| Tab | Purpose |
|---|---|
| 1. Designer | The canvas for designing UI layouts, used to build and display UI, allowing placement of UI on the screen. |
| 2. Palette | A list of available widgets, including engine-provided or user-defined widget templates. |
| 3. Details Panel | Properties of the widget, including rotation transform properties, etc. |
| 4. Hierarchy Panel | Displays a list of all widgets currently created, showing the hierarchical relationship between UIs. |
| 5. Animations Panel | Displays all animations created for the UI. |
| 6. Timeline | Properties and keyframes of widget animations, allowing for frame animations. |
| 7. Editor Mode | Switch between Designer and Graph editing modes; the Graph mode has almost the same functionality as the Blueprint editor. |
| tip: To operate on the canvas, hold the right mouse button and move the mouse to pan the canvas up, down, left, or right; use the mouse wheel to zoom the canvas. |
Building the UI Interface#
Before designing the UI, you should first place a Canvas Panel in the canvas as the root object.
You can search for Canvas Panel in the Palette or find it under the Expanded Panel: click and hold the left mouse button to drag it into the canvas area or release it in the Hierarchy Panel.
After that, you can place other widgets you need in the canvas, such as text, buttons, etc.
You can also rename widgets, drag them, resize them, and modify related information through the Details Panel.
After designing the UI interface, remember to click Compile and Save in the upper left corner of the editor.
Displaying the UI Interface#
When you happily run the game but find that you cannot see the UI you just designed, this is because you need to perform some additional Blueprint operations to display the UI in the Game viewport.
-
In the main toolbar of the Level Editor, click Blueprint / Open Level Blueprint in sequence.
-
Right-click in a blank area to search and add the Event BeginPlay node.
-
Hover over the execution pin of the Event BeginPlay node, hold the left mouse button, and drag it to the remaining blank area, then search for the Create Widget node. Click the Class parameter dropdown list and search for the UI instance we want to create, “WBP_HUD”.
-
Similarly, connect the execution pin of the Create Widget node to the Add to Viewport node, and connect its return value Return Value to Target.
-
Click Compile and Save in the upper left corner, close the window, and click the Run button in the main editing interface. You should now be able to see the UI interface you created in the game viewport.
