【Unreal Engine】UMG Fundamentals: Building Game UI with Widget Blueprint

Before Starting UI Creation with UMG

For those just starting game development with Unreal Engine (UE), even if you can build the game's core logic, are you stumbling on creating the user interface (UI) that players directly interact with?

• "How do I display a HUD (head-up display) on screen?"
• "How do I link HP bars and scores with in-game values?"
• "Switching between menu screens and gameplay screens is getting complicated..."

Game UI is a crucial element that greatly affects player experience. However, UI layout, animation, and integration with game logic can be a major barrier for beginners.

This article focuses on Unreal Engine's powerful UI system UMG (Unreal Motion Graphics) and its core Widget Blueprint, thoroughly explaining everything from basics to practical application techniques with abundant Blueprint examples. Reading this article will help you develop efficient, maintainable UI creation skills beyond beginner level.

---

UMG and Widget Blueprint Basics

What is UMG (Unreal Motion Graphics)?

UMG is the standard UI creation framework in Unreal Engine. Rather than markup languages like HTML/CSS, it features intuitive visual scripting and drag-and-drop operations for building UI.

All UI elements in UMG are handled as Widgets. A wide variety of widgets are available, from basic elements like buttons, text, images, and sliders, to container widgets for constructing complex layouts.

Widget Blueprint Structure

A Widget Blueprint is an asset that defines the appearance and behavior logic of specific UI elements (e.g., main menu, HP bar). It mainly consists of two tabs:

1. Designer Tab:
   • The place to build UI layout. Drag and drop widgets from the palette and set size, position, and anchors (which screen position to anchor to).
   • Widget appearance (color, font, images, etc.) is also set here.
2. Graph Tab:
   • The place to write UI behavior logic in Blueprint. Implement processing for when buttons are pressed, or update UI based on game state.

---

HUD Creation Steps

Let's look at Widget Blueprint creation steps using the most basic UI—a HUD displaying player HP—as an example.

Step 1: Create Widget Blueprint

1. Right-click in Content Browser and select "User Interface" -> "Widget Blueprint."
2. Select "User Widget" as the parent class and name it something like WBP_PlayerHUD.

Step 2: Widget Placement and Anchor Setup

Open WBP_PlayerHUD and place the following widgets in the Designer tab:

1. Canvas Panel: Automatically placed as root widget.
2. Horizontal Box: Container for arranging HP bar and text horizontally. Place as child of Canvas Panel.
3. Text: For "HP:" label. Place as child of Horizontal Box.
4. Progress Bar: Bar displaying actual HP percentage. Place as child of Horizontal Box.

[Important: Anchor Setup] Always set widget anchors so UI adapts to various screen sizes and aspect ratios. HUDs are usually fixed to the top-left or top-right, so select Horizontal Box and set anchor to "Top Left."

Step 3: Display Logic to Game

To display the created widget on the game screen, perform the following at game start (usually in Player Controller or HUD class):

// In Player Controller's BeginPlay event, etc.
// 1. Create WBP_PlayerHUD instance with Create Widget node
// 2. Add created widget to screen with Add to Viewport node

---

Dynamic UI Updates with Data Binding

To link the HP bar with the player's in-game HP, use a mechanism called Data Binding.

Data binding is a feature that automatically links widget properties (e.g., Progress Bar percentage) to Blueprint functions or variables. This allows the UI to automatically reflect the latest state just by updating variables in game logic.

Data Binding Implementation Example (Progress Bar)

1. Select Progress Bar in Designer tab.
2. Click the Bind button next to the "Percent" property in the "Progress" section of the Details panel and select "Create Binding."
3. A new function named Get Percent is created in the Graph tab.
4. In this function, get the player character's HP, divide by max HP to calculate a value between 0.0 and 1.0 (percentage), and connect to the Return node.

// Inside Get Percent function in Graph tab
// 1. Get Player Character node
// 2. Cast To [Player Character Class] node
// 3. Get Current HP node from [Player Character]
// 4. Get Max HP node
// 5. Calculate (Current HP / Max HP)
// 6. Connect to Return Value as Percent

[Best Practice] Binding functions are called whenever UI values are needed, based on Slate's rendering cycle. While different from strictly per-frame execution like Event Tick, they're called frequently while UI is displayed, so for performance reasons, avoid bindings with complex calculations or frequent references. Especially when values don't change frequently, it's more efficient to use Event Dispatcher to call custom UI update events only when values change.

Event Handling Implementation Example (Button)

Button widget behavior logic is implemented using events.

1. Select Button widget in Designer tab.
2. In the "Events" section at the bottom of the Details panel, click the + button next to "On Clicked."
3. An event node named On Clicked (Button) is created in the Graph tab.
4. Connect necessary processing from this event node—opening menu, ending game, etc.

---

Best Practices and Common Mistakes

Best Practice: Inter-Widget Communication

In complex UIs, multiple widgets need to coordinate. The following methods are recommended for inter-widget communication:

Communication Method	Description	Use Case
Custom Event	Directly call processing from parent widget to child widget. Simplest.	When parent directly manipulates child state.
Widget Interface	Contract for multiple widgets to implement common functions.	When creating generic widgets (e.g., notification popups).
Event Dispatcher	Fire events within widgets and subscribe from outside (e.g., Player Controller).	When child widgets notify parents or game logic that "something happened." Most recommended method.

Common Mistakes

Mistake	Problem	Solution
Writing all logic in widgets	UI and game logic become tightly coupled, reducing reusability and maintainability.	Have widgets focus on "display" and "receiving input," and put game logic (HP changes, etc.) in Player Controller or Game Mode.
Updating UI in Event Tick	Executed every frame, UI burdens performance with unnecessary processing.	Use data binding or Event Dispatcher to call custom UI update events only when values change.
Neglecting anchor settings	UI positioning breaks at different resolutions.	Set appropriate anchors for all top-level widgets and test at various resolutions.

---

Key Points for Widget Blueprint Usage

This article explained UI creation from basics to applications using Unreal Engine's UMG and Widget Blueprint.

Key Point	Description
UMG/Widget Blueprint	UE's visual UI system. Build appearance in Designer, logic in Graph.
Data Binding	Powerful feature that automatically links UI element properties to game logic variables.
Event Handling	Execute logic triggered by user actions like button clicks.
Best Practice	Have widgets focus on display, communicate loosely with game logic via Event Dispatcher.

UMG is a very flexible and powerful tool. Mastering these basics and best practices will significantly refine your game's UI and provide comfortable experiences for players. Start with a simple HUD and build up practical experience.