UMG Widget Basics
UI & InteractionUMG widget system: Widget Blueprints, visual designer, common widget types, layout panels, data binding, and widget animation.
/skill umg-widget-basics What This Skill Does
UMG Widget Basics helps you create user interfaces using UE5's UMG (Unreal Motion Graphics) widget system. This skill covers the complete UI creation workflow, from building Widget Blueprints in the visual designer with layout panels and common widget types, to adding widgets to the viewport, binding data for live gameplay updates, and animating UI elements with built-in animation tracks. Whether you need a health bar HUD, a pause menu, floating name plates above NPCs, or notification pop-ups, this skill guides you through anchoring, responsive layout, and efficient data-driven UI patterns.
Covers
- Widget Blueprint creation and the UMG visual designer
- Common widgets: Text, Image, Button, ProgressBar, Slider, TextBox, CheckBox, ComboBox
- Layout panels: Canvas, Horizontal/Vertical Box, Grid, Overlay, SizeBox, ScrollBox
- Anchoring and responsive layout for different screen resolutions
- Adding widgets to viewport, showing, hiding, and removing
- Widget event handling: button clicks, value changes, and text input
- Data binding: connecting UI elements to live gameplay variables
- Widget animation: built-in UMG animation tracks for fade, slide, and pulse effects
- In-world 3D widgets using Widget Components on actors
Does Not Cover
- Slate C++ UI framework → Slate UI (future skill)
- Gamepad and console-ready UI with Common UI → Common UI
- Complex menu systems (save/load, settings) → Menu Systems (future skill)
- UI localization → Localization (future skill)
How to Use
Invoke this skill in Claude Code:
/skill umg-widget-basicsThis skill is also auto-detected when your prompt mentions UI, HUD, widget, UMG, menu, health bar, inventory, button, or text-on-screen intent. AgentUX will automatically activate UMG Widget Basics when it recognizes relevant context in your request.
Key Unreal Engine Concepts
| Concept | Description |
|---|---|
UUserWidget | The base class for all Widget Blueprints, managing lifecycle, visibility, and viewport display. |
UCanvasPanel | The default root panel for absolute positioning, using anchors to define responsive layout behavior. |
UWidgetAnimation | A built-in animation timeline for keyframing widget properties like opacity, transform, and color. |
UWidgetComponent | A component that renders a Widget Blueprint in 3D world space, used for floating health bars and name plates. |
Anchors | Positioning reference points relative to screen edges or center that ensure UI elements stay correctly placed across resolutions. |
Data Binding | The ability to bind widget properties to Blueprint functions so UI updates automatically when gameplay values change. |
Related Skills
blueprint-basics
Blueprint scripting for widget event handling and data binding logic
common-ui
Console-ready UI with gamepad navigation and input routing
animation-playback
Animation playback for UI-driven character state displays
data-tables
Data Tables for populating UI with item databases and configuration
What You'll Learn
- How to create Widget Blueprints and use the UMG visual designer
- How to choose the right layout panels and configure anchors for responsive UI
- How to add widgets to the viewport and manage visibility and input modes
- How to bind UI elements to gameplay data for live health bars, scores, and timers
- How to animate widgets with fade, slide, and pulse effects using UMG animation
- How to set up in-world 3D widgets for floating health bars and interaction prompts