📱 Introduction to UMG

What is UMG?

Unreal Motion Graphics (UMG) is Unreal Engine's built-in UI framework. It provides tools for creating 2D user interfaces that overlay the game view—everything from simple health bars to complex inventory systems to full main menus.

What UMG Can Create

UMG handles all types of game UI:

HUD Elements (Heads-Up Display): Information displayed during gameplay that doesn't block interaction. Health bars, ammo counters, minimaps, crosshairs, objective markers, and status effects.

Menus: Full-screen or partial interfaces that pause or change game flow. Main menus, pause menus, settings screens, inventory screens, and dialogue systems.

In-World UI: UI elements attached to actors in the 3D world. Name tags above characters, health bars over enemies, interaction prompts near objects.

Notifications: Temporary messages that appear and disappear. Achievement popups, damage numbers, pickup confirmations, and tutorial hints.

Figure: Different types of UI elements, all created using UMG.

UMG vs. Other UI Systems

Before UMG, Unreal used different UI systems. Understanding the history helps clarify what you might encounter:

UMG (Current): Blueprint-friendly, visual designer, powerful and flexible. This is what you should use for all new projects.

Slate (Underlying): C++ UI framework that UMG is built on. Powerful but complex. Used for editor UI and when UMG isn't enough. You won't need Slate for most game UI.

HUD Canvas (Legacy): Old system from UE3 era. Draw commands directly to screen. Still works but UMG is preferred.

How UMG Works

UMG uses a hierarchy of Widgets—individual UI elements that combine to form complete interfaces:

1. Widget Blueprints define the structure and logic of UI elements
2. Widgets are composed of Panels (layout containers) and Common Widgets (buttons, text, images)
3. Widget Blueprints are instantiated and added to the Viewport at runtime
4. The Player Controller manages what UI is visible and handles input

flowchart TD
    PC["Player Controller"] -->|"Creates"| WB["Widget Blueprint"]
    WB -->|"Contains"| P["Panels (Layout)"]
    WB -->|"Contains"| W["Widgets (Elements)"]
    P --> CB["Canvas Panel"]
    P --> VB["Vertical Box"]
    P --> HB["Horizontal Box"]
    W --> TXT["Text"]
    W --> IMG["Image"]
    W --> BTN["Button"]
    W --> PB["Progress Bar"]
    WB -->|"Added to"| VP["Viewport"]
    VP -->|"Displayed on"| SCR["Screen"]
    
    style PC fill:#667eea,color:#fff
    style WB fill:#4CAF50,color:#fff
    style VP fill:#FF9800,color:#fff
    style SCR fill:#2196F3,color:#fff
                

Figure: UMG architecture from Player Controller to screen display.

Widget Blueprints

A Widget Blueprint is the fundamental building block of UMG. It's a special type of Blueprint that combines visual design with logic, letting you create complete UI elements.

Creating a Widget Blueprint

1. In Content Browser, right-click
2. Select User Interface → Widget Blueprint
3. Name it with a WBP_ prefix (e.g., WBP_MainMenu, WBP_HealthBar)
4. Double-click to open the Widget Editor

Widget Blueprint Structure

Widget Blueprints have two main views:

Designer: Visual editor where you arrange UI elements, set properties, and preview appearance. This is where you build the look of your UI.

Graph: Blueprint graph where you add logic—responding to button clicks, updating text, playing animations. This is where you add interactivity.

You switch between them using tabs at the top of the editor.

Figure: Designer for visual layout, Graph for logic and events.

Common Widget Types

UMG provides many built-in widgets organized into categories:

Panel Widgets (Layout Containers)

Panels organize child widgets:

• Canvas Panel: Free positioning with anchors. Most flexible, used for HUDs.
• Vertical Box: Stacks children vertically. Great for lists, menus.
• Horizontal Box: Stacks children horizontally. Great for toolbars, button rows.
• Grid Panel: Arranges children in a grid. Great for inventory slots.
• Overlay: Stacks children on top of each other. Great for layering.
• Scale Box: Scales content to fit available space.
• Size Box: Forces specific dimensions on content.

Common Widgets (UI Elements)

• Text: Displays text. Can be static or bound to variables.
• Image: Displays a texture or material.
• Button: Clickable element with visual states (normal, hovered, pressed).
• Progress Bar: Shows a value as a filled bar (health, loading).
• Slider: User-adjustable value within a range.
• Check Box: Toggle boolean values.
• Text Box: User text input field.
• Combo Box: Dropdown selection.

Figure: Panel widgets for layout, common widgets for content.

Widget Hierarchy

Widgets form a parent-child hierarchy. The hierarchy determines:

• Layout: Child widgets are positioned relative to their parent panel
• Rendering Order: Later children render on top of earlier ones
• Input: Events propagate through the hierarchy

A typical Widget Blueprint might have:

Canvas Panel (root)
├── Image (background)
├── Vertical Box
│   ├── Text (title)
│   └── Horizontal Box
│       ├── Button (play)
│       └── Button (quit)
└── Image (logo)

The UMG Designer

The UMG Designer is where you visually create your UI. It provides a WYSIWYG (What You See Is What You Get) editing experience similar to tools like Figma or Photoshop.

Designer Interface Overview

When you open a Widget Blueprint, the Designer view shows several panels:

Palette (Left): Lists all available widget types. Drag widgets from here into the canvas or hierarchy.

Hierarchy (Left): Shows the widget tree structure. Select, reorder, and reparent widgets here.

Designer Canvas (Center): Visual preview of your UI. Select and manipulate widgets directly.

Details (Right): Properties of the selected widget. Appearance, layout, behavior settings.

Animations (Bottom): UI animation timeline. Create and edit widget animations.

Figure: The UMG Designer interface with Palette, Canvas, and Details panels.

Working with Anchors

Anchors determine how a widget positions itself relative to its parent, especially when the screen resizes. They're crucial for responsive UI.

Anchors are shown as a flower-like icon in the canvas. Each petal represents an anchor point:

• Top-Left: Widget stays fixed distance from top-left corner
• Top-Center: Widget stays centered horizontally, fixed from top
• Center: Widget stays centered both horizontally and vertically
• Stretch: Widget stretches to fill the parent

Figure: Anchor presets determine how widgets respond to screen size changes.

Designer Keyboard Shortcuts

Speed up your workflow with these shortcuts:

• Ctrl+C / Ctrl+V: Copy and paste widgets
• Delete: Remove selected widget
• Ctrl+D: Duplicate widget
• Arrow Keys: Nudge selected widget
• Ctrl+Arrow: Larger nudge
• F2: Rename selected widget

Displaying Widgets

Creating a Widget Blueprint is just the first step—you also need to display it on screen. UMG provides several ways to show widgets, each suited to different use cases.

Add to Viewport

The most common way to display a widget is adding it to the Viewport—the 2D layer that overlays the game view. Viewport widgets are screen-space, meaning they stay fixed on screen regardless of camera movement.

Basic Steps:

1. Create an instance of the Widget Blueprint
2. Add it to the viewport
3. Optionally store a reference to manipulate it later

In Blueprint, this looks like:

1. Create Widget node — Select your Widget Blueprint class, specify owning player
2. Add to Viewport node — Displays the widget on screen
3. Store the return value in a variable for later access

Figure: Creating and displaying a widget in Blueprint.

Where to Create Widgets

The location of your widget creation code matters:

Player Controller: Best for HUD elements that persist throughout gameplay. The Player Controller exists as long as the player is in the game, making it ideal for health bars, ammo counters, and similar persistent UI.

Character/Pawn: Can work but be careful—if the character respawns, the widget might be duplicated or lost. Better to use Player Controller.

Level Blueprint: Good for level-specific UI like tutorials or cutscene elements that only appear in certain levels.

Game Mode: Good for game-wide UI managers, though Game Mode only exists on the server in multiplayer.

Widget itself: Widgets can create other widgets. A main menu might create a settings submenu when a button is clicked.

Z-Order (Layer Order)

When multiple widgets are on screen, Z-Order determines which appears on top. Higher Z-Order values render on top of lower ones.

The Add to Viewport node has an optional Z-Order input. Common conventions:

• 0-10: Background UI, world markers
• 10-50: Normal HUD elements
• 50-100: Menus, overlays
• 100+: Popups, tooltips, critical alerts

Removing Widgets

To hide or remove a widget:

Remove from Parent: Completely removes the widget from the viewport. The widget instance still exists if you have a reference, but it's not visible. Call Add to Viewport again to show it.

Set Visibility: Hides the widget without removing it. Options include Visible, Hidden (invisible but takes up space), Collapsed (invisible and takes no space), and Hit Test Invisible (visible but doesn't receive input).

Figure: Different visibility states affect rendering and input differently.

Widget Components (3D World UI)

Sometimes you want UI attached to objects in the 3D world—health bars above enemies, name tags over players, or interaction prompts near objects. Widget Components make this possible.

A Widget Component is an Actor Component that renders a Widget Blueprint in 3D space. To use one:

1. Add a Widget component to your Actor
2. In Details, set the Widget Class to your Widget Blueprint
3. Configure Draw Size (world units)
4. Set Space to World (3D positioned) or Screen (always faces camera)

World Space: The widget exists in 3D space. It can be occluded by objects, scales with distance, and has a fixed orientation unless you update it.

Screen Space: The widget always faces the camera (billboarding). Good for name tags and health bars that should always be readable.

Figure: World Space vs Screen Space widget components.

Input Mode

When showing menus, you often need to change how input is handled—should clicks go to the UI or the game?

Set Input Mode Game Only: Input goes to the game (movement, shooting). Mouse cursor hidden. Use for gameplay.

Set Input Mode UI Only: Input goes only to UI widgets. Mouse cursor shown. Use for full-screen menus.

Set Input Mode Game and UI: Input can go to both. Mouse cursor can be shown or hidden. Use for HUD elements that need clicks while playing.

These are called on the Player Controller:

// In Player Controller Blueprint
Set Input Mode UI Only
Set Show Mouse Cursor = True

Hands-On: Create Your First Widget

Let's create a simple HUD widget that displays the player's health. This exercise covers widget creation, adding elements, and displaying the widget through the Player Controller.

Step 1: Create the Widget Blueprint

1. In Content Browser, right-click → User Interface → Widget Blueprint
2. Name it WBP_PlayerHUD
3. Double-click to open the Widget Editor

Step 2: Set Up the Root Panel

1. In the Palette panel, find Canvas Panel
2. Drag it into the Hierarchy or onto the canvas
3. This becomes your root widget—all other widgets go inside it

Step 3: Add a Health Bar Container

We'll use a Vertical Box to stack our health elements:

1. From Palette, drag Vertical Box into the Canvas Panel
2. With the Vertical Box selected, in the Details panel:
   • Set Anchors to Top-Left (click the anchor preset in Slot section)
   • Set Position X: 50
   • Set Position Y: 50
   • Set Size X: 200
   • Set Size Y: 60
3. Rename it to HealthContainer in the Hierarchy (F2 or right-click → Rename)

Step 4: Add the Health Label

1. Drag a Text widget into the HealthContainer (Vertical Box)
2. In Details:
   • Set Text: "HEALTH"
   • Under Appearance, set Font Size: 16
   • Set Color: White
3. Rename to HealthLabel

Step 5: Add the Progress Bar

1. Drag a Progress Bar into the HealthContainer (below the text)
2. In Details:
   • Set Percent: 0.75 (for preview—we'll bind this later)
   • Under Appearance → Style → Fill Color and Opacity: Set to Red
   • Under Slot → Size: Check "Fill" and set Fill to 1.0
3. Rename to HealthBar

Step 6: Add Health Percentage Text

1. Drag another Text widget into the HealthContainer
2. In Details:
   • Set Text: "75%" (placeholder)
   • Set Font Size: 14
   • Set Justification: Right
3. Rename to HealthPercent

Figure: Widget hierarchy and preview of the health HUD.

Step 7: Compile and Save

1. Click Compile in the toolbar
2. Click Save

Step 8: Display from Player Controller

Now we need to display the widget. Open your Player Controller Blueprint (or create one if you don't have it):

1. Open your Player Controller Blueprint
2. In Event Graph, find or add Event BeginPlay
3. Drag from the execution pin and add Create Widget
4. In the Create Widget node:
   • Set Class to WBP_PlayerHUD
   • Set Owning Player to Self
5. From the Return Value pin, drag and add Add to Viewport
6. Optionally, promote the Return Value to a variable named HUDWidget

Step 9: Test

1. Make sure your Game Mode uses your Player Controller (Project Settings → Maps & Modes, or set in World Settings)
2. Press Play
3. You should see your health HUD in the top-left corner!

Troubleshooting

Bonus Challenges

1. Add Ammo Counter: Create a second Vertical Box in the top-right corner with ammo text
2. Style the Health Bar: Add a border image behind the progress bar for a nicer look
3. Add Player Name: Display a player name text at the top center of the screen
4. Multiple Anchors: Try anchoring different elements to different screen corners

Summary

In this lesson, you've been introduced to Unreal Motion Graphics (UMG)—Unreal Engine's powerful system for creating user interfaces. From understanding what UMG can create to building and displaying your first widget, you now have the foundation for all game UI development.

Key Concepts

UMG Overview: UMG creates all types of game UI—HUD elements, menus, in-world UI, and notifications. It's built on the Slate framework but provides a designer-friendly, Blueprint-compatible interface.

Widget Blueprints: The fundamental building blocks of UMG. Each Widget Blueprint has a Designer view for visual layout and a Graph view for logic. Widgets combine panels (layout containers) with common widgets (buttons, text, images).

Widget Types: Panels like Canvas Panel, Vertical Box, and Horizontal Box organize layout. Common widgets like Text, Button, Image, and Progress Bar provide content. Widgets form parent-child hierarchies.

The UMG Designer: Visual editor with Palette (widget types), Hierarchy (widget tree), Canvas (preview), and Details (properties). Anchors control how widgets respond to different screen sizes.

Displaying Widgets: Use Create Widget to instantiate, Add to Viewport to display. Player Controller is the best location for persistent HUD. Z-Order controls layering. Visibility states control showing/hiding.

Widget Components: For in-world UI attached to actors. World Space widgets exist in 3D; Screen Space widgets always face the camera. More expensive than viewport widgets.

Input Mode: Controls whether input goes to game, UI, or both. Set appropriately when opening/closing menus.

UMG Quick Reference

Common Panel Widgets

Best Practices

• Start with Canvas Panel: Use it as your root widget for maximum flexibility
• Name your widgets: Rename from defaults like "TextBlock_0" to meaningful names like "HealthLabel"
• Use anchors: Set appropriate anchors so UI scales and positions correctly on different screens
• Store widget references: Keep references to widgets you need to update or remove later
• Create widgets in Player Controller: For persistent HUD that survives level changes
• Manage input mode: Always set input mode appropriately when showing/hiding menus
• Use visibility over remove: For frequently toggled UI, Set Visibility is more efficient than removing and recreating

Figure: The complete UMG workflow from creation to display.

What's Next?

Now that you understand the basics of UMG and can create simple widgets, the next lesson dives deeper into Creating Widgets. You'll learn about more widget types, styling options, and how to create reusable widget components. We'll also cover binding—connecting your UI to game data so health bars actually reflect player health!

Knowledge Check