Gameplay, UI & Audio · Beginner · 14 min
Your First UMG Widget and HUD: Show Text, an Image and a Health Bar On Screen
Build a Widget Blueprint in the UMG Designer, drop in Text, an Image and a Progress Bar, then use Create Widget + Add to Viewport to show a real HUD over your game.
Before this: What Is a Blueprint? Create Your First One (No Code Required), Player Input with Enhanced Input: Make Your Character Respond to Keys
- Create a Widget Blueprint and understand the UMG Designer canvas
- Add and arrange Text, Image and Progress Bar widgets
- Show the HUD on screen with Create Widget + Add to Viewport
- Understand the difference between designing a widget and spawning it
What a HUD is and what we're building
Every game you've ever played has UI on screen — a health bar, an ammo count, a score, a crosshair. In Unreal, all of that on-screen interface is built with a system called UMG (Unreal Motion Graphics). The piece you actually paint and arrange is called a Widget Blueprint, and the layer of UI drawn over the live game is called the HUD (heads-up display).
In this lesson you'll make one Widget Blueprint, drag three common pieces onto it — a line of Text, an Image, and a Progress Bar (a perfect stand-in for a health bar) — and then write a tiny bit of Blueprint to actually put it on screen while the game runs. No C++, no menus you've never heard of. By the end you'll have a real HUD floating over your level.
There are two distinct jobs here, and keeping them separate is the whole trick: first you design the widget (what it looks like), then you spawn it (tell the game to show it). We'll do them in that order.
The five words to lock in first
Tap a card to flip it
Before you start
Tick these so the spawn step at the end works first time:
- An open project with a playable level (the Third Person template is ideal — it has a character and a Level Blueprint ready to use)
- You're comfortable opening a Blueprint graph and placing a node or two (the 'Create your first Blueprint' lesson covers this)
- Five quiet minutes — the only thing beginners forget is the very last step, and we'll flag it loudly
Part 1 — Design the widget in the UMG Designer
First we build what the HUD looks like. Tick each step so you can step away and come back without losing your place.
- 1Create a Widget Blueprint
In the Content Browser, click the green 'Add' button (or right-click in an empty area) and choose User Interface, then Widget Blueprint.
If Unreal asks which parent class to base it on, pick the plain 'User Widget' option. Name the new asset something clear like 'WBP_HUD' and double-click it to open the UMG editor.
TipPrefixing UI assets with 'WBP_' (Widget BluePrint) is a common convention — it keeps them easy to spot in the Content Browser later.
- 2Meet the Designer and the Palette
The big checkered area in the middle is the Designer canvas — a preview of your screen. On the left is the Palette, a searchable list of every widget you can place. On the right is the Details panel for the selected widget, and bottom-left is the Hierarchy showing how widgets are nested.
Notice there are two tabs in the top-right: 'Designer' (what you're looking at — the visual layout) and 'Graph' (the Blueprint logic for this widget). We'll stay in Designer for now.
TipThe canvas defaults to a fixed preview size, but there's a screen-size dropdown at the top of the Designer so you can preview how the HUD looks on different resolutions.
- 3Add a line of Text
In the Palette search box, type 'Text'. Drag the 'Text' widget (the simple one, not 'Text Box') onto the canvas. Position it near the top-left.
With it selected, look at the Details panel and find the 'Text' field — type something like 'Score: 0'. You can also set its colour and font size here.
TipThere are two similarly named widgets: 'Text' just displays words (use this for a HUD label), while 'Text Box' is an editable field the player types into. For a HUD you almost always want plain 'Text'.
- 4Add an Image
Search the Palette for 'Image' and drag it onto the canvas — for example a small icon in a corner. It appears as a plain white box at first.
In the Details panel, under Appearance → Brush, you can set a colour (Tint) right away, or click the Image slot and pick a texture if you have one. A solid coloured box is perfectly fine for learning the layout.
TipNo texture handy? Just tint the Image a bright colour. The goal here is to learn placement — you can swap in real art any time later without touching the rest of the HUD.
- 5Add a Progress Bar (your health bar)
Search for 'Progress Bar' and drag it onto the canvas. Drag its corner handles to make it a wide, short bar — the classic health-bar shape.
In the Details panel find the 'Percent' value (0 to 1). Set it to something like 0.7 and the bar fills to 70%. You can recolour the fill under the Style → Fill Image settings.
TipPercent runs 0 to 1, not 0 to 100. So half health is 0.5, not 50. Later you'll drive this value from a Blueprint variable to make the bar move as the player takes damage.
- 6Anchor things to the screen edges
Click a widget and look near the top of the Details panel for the Anchors dropdown (a flower-petal icon). Anchoring tells the widget which screen edge to stick to, so your HUD stays put on any resolution.
Anchor the Text to the top-left and the health bar to the bottom-left, for example. Without anchors, UI can drift or get cut off on different screen sizes.
TipA quick way to anchor AND snap to a corner is to hold Ctrl while clicking an anchor preset — it moves the widget to that position too, not just the anchor point.
You've designed the widget, hit Compile and Save, then pressed Play — and nothing shows up on screen. Why?
Designing a Widget Blueprint only creates the UI asset — it does NOT put it on screen by itself. A widget is just a recipe sitting in your Content Browser until something spawns it.
To show it, you have to (1) Create Widget to make an instance of it at runtime, and then (2) Add to Viewport to draw that instance over the game. That's Part 2 of this lesson, and forgetting the 'Add to Viewport' half is the single most common reason a beginner's HUD never appears.
Part 2 — Show it on screen with Create Widget + Add to Viewport
Now we make the HUD actually appear when the game starts. We'll do this in the Level Blueprint for simplicity — it runs as soon as the level loads.
- 1Open the Level Blueprint
Back in the main editor, go to the toolbar's Blueprints dropdown and choose 'Open Level Blueprint'. This is a Blueprint that belongs to the current level and is a quick place to test logic that should run when the level starts.
You'll see a graph. Look for the 'Event BeginPlay' node — it fires once when play begins. If it isn't there, right-click in the graph and add it.
TipThe Level Blueprint is the fastest way to test a HUD. In a real game you'd usually spawn the HUD from the Player Controller instead, but BeginPlay here is perfect for learning the flow.
- 2Add a 'Create Widget' node
Drag a wire out from the Event BeginPlay node's white execution pin and, in the search box that pops up, type 'Create Widget'. Choose 'Create Widget'.
On the node there's a 'Class' dropdown. Set it to your WBP_HUD. This node builds one live copy (an instance) of your HUD widget in memory — but it isn't visible yet.
TipIf 'Create Widget' doesn't show your widget in the Class dropdown, make sure you compiled and saved the Widget Blueprint first.
- 3Add 'Add to Viewport'
The Create Widget node has a blue 'Return Value' output pin — that's the widget instance it just made. Drag a wire from that blue pin and search for 'Add to Viewport'. Choose it.
Connect Create Widget's white execution pin into Add to Viewport's white execution pin too, so the flow is BeginPlay → Create Widget → Add to Viewport. The blue wire carries WHICH widget; the white wire carries WHEN it happens.
TipBlue (data) wires answer 'what?' and white (execution) wires answer 'when?'. Every Blueprint action needs both: an execution wire to fire it and the right data plugged into its inputs.
- 4Compile, Save, and Play
Click Compile, then Save, in the Level Blueprint toolbar. Now press Play.
Your Text, Image and health bar should appear over the running game. Congratulations — that's a working HUD.
TipIf the mouse cursor is hidden and you can't click your own UI later (for menus), that's a separate input-mode setting — not a problem for a display-only HUD like this one.
The Blueprint flow in words
Event BeginPlay
| (white execution wire)
v
Create Widget [ Class = WBP_HUD ]
| Return Value (blue data wire) ---.
| (white execution wire) |
v v
Add to Viewport [ Target = the widget from Create Widget ]Where should a HUD be spawned from?
The quickest place to test: open the Level Blueprint, run Create Widget + Add to Viewport on Event BeginPlay, and the HUD shows the moment the level loads.
Downside: the logic only lives in this one level. Fine for learning and for a single-level game, but it won't follow the player to other levels.
In a real project you'd usually create the HUD from the Player Controller's BeginPlay instead. The Player Controller represents the human player and persists with them, so the HUD logic travels across levels.
The node chain is identical — Create Widget → Add to Viewport. Only the Blueprint it lives in changes. Worth knowing now, but don't worry about it for your first HUD.
QuizCheck yourself
1You designed a beautiful Widget Blueprint but it never appears in-game. What's almost certainly missing?
Designing a widget only makes the asset. You must Create Widget (make an instance) and Add to Viewport (draw it) from a Blueprint for it to show on screen.
2Your Progress Bar should be exactly half full. What do you set its Percent to?
A Progress Bar's Percent runs from 0 to 1, so half full is 0.5 — not 50.
3On a Blueprint node, what does the blue 'Return Value' pin coming out of Create Widget represent?
Blue (data) pins carry values. Create Widget's blue Return Value is the live widget instance — you feed it into Add to Viewport so the engine knows which widget to draw.
Handy shortcuts while building UI
- Ctrl S Save the current asset (do this after every Compile)
- F7 Compile the open Blueprint / Widget Blueprint
- Alt P Play in the editor to see your HUD over the game
- Esc Stop play-in-editor and return to building
- Ctrl Z Undo a placement or property change in the Designer
Add a second line of Text to your HUD that reads 'Health' and sit it just above the Progress Bar. Then change the health bar so it starts at 30% full and tint its fill red. Finally, prove you understand the spawn step: temporarily delete the 'Add to Viewport' node, Play, confirm the HUD vanishes, then re-add it and confirm it comes back.
Hint 1
A label is just another 'Text' widget — drag it from the Palette and type 'Health' into its Text field.
Hint 2
30% full is a Percent of 0.3. Recolour the fill under the Progress Bar's Style → Fill Image (or Fill Color) settings.
Hint 3
To remove a node, click it and press Delete; to re-add, drag from Create Widget's blue Return Value pin and search 'Add to Viewport' again. Remember to reconnect the white execution wire too.
Drag a new 'Text' widget onto the canvas, set its Text to 'Health', and position it directly above the Progress Bar. Select the Progress Bar, set Percent to 0.3, and change its fill colour to red in the Style settings. Compile and Save the widget.
In the Level Blueprint, delete the Add to Viewport node and Play — the widget is still created in memory but nothing draws it, so the screen is empty. Re-add Add to Viewport, wire the blue Return Value into its Target and the white execution pin from Create Widget, Compile, Save, and Play. The HUD returns — confirming that Add to Viewport is what makes UI visible.
You can now
Tick off what you've learned — you'll reuse all of this for menus and in-game UI:
- Create a Widget Blueprint and open the UMG Designer
- Place and arrange Text, Image and Progress Bar widgets on the canvas
- Anchor widgets so they stay put on any screen size
- Create Widget and Add to Viewport from a Blueprint to show a HUD
- Explain why designing a widget and spawning it are two separate jobs
Mark this lesson complete
We'll remember it on your Academy page and unlock the next lesson below.
Questions beginners ask
What's the difference between UMG and the HUD?
UMG is the whole system for building 2D interface in Unreal, and a Widget Blueprint is one piece of UI you make with it. 'HUD' just describes the role — UI drawn over the live game (health, score, ammo). You build a HUD by making a Widget Blueprint and adding it to the viewport while the game runs.
My widget won't appear when I press Play. What do I check first?
In order: did you set the Class on the Create Widget node to your widget? Is Add to Viewport actually connected (both the white execution wire and the blue widget value)? Did you Compile and Save the Level Blueprint? Missing the Add to Viewport step is the most common cause of an invisible HUD.
Should I really build my HUD in the Level Blueprint?
It's the fastest place to learn the flow, and fine for a single-level project. For a fuller game you'd usually spawn the HUD from the Player Controller so it persists across levels — but the node chain (Create Widget then Add to Viewport) is exactly the same, so nothing you learned here is wasted.
How do I make the health bar actually go down when the player takes damage?
You bind the Progress Bar's Percent to a variable (for example a 'Health' float) and update that variable in your gameplay logic. Driving widget values from variables is the natural next step once you're comfortable with Blueprint variables and the HUD layout from this lesson.