🎮 HUD Elements

Data Binding Fundamentals

Data binding connects widget properties to data sources so the UI automatically updates when data changes. Instead of manually setting a text widget's content every time health changes, you bind it once and the widget handles updates itself.

Why Binding Matters

Without binding, you'd need to:

1. Store a reference to the text widget
2. Every time health changes, call Set Text
3. Remember to update in every place health can change (damage, healing, pickups...)
4. Risk forgetting one and having outdated UI

With binding:

1. Create a binding function that returns current health
2. UMG calls this function automatically each frame
3. Widget always shows correct value

Types of Binding

UMG supports several binding approaches:

Property Binding (Function): Bind a property to a function that returns the value. Called every frame. Simple and automatic but can be expensive if the function is complex.

Property Binding (Variable): Bind directly to a variable. Less flexible but slightly more efficient.

Event-Driven Updates: Don't bind—instead, update the widget manually when data changes. More control, better performance for infrequent updates.

Figure: Three approaches to connecting UI with game data.

Creating a Property Binding

To bind a widget property to a function:

1. Select the widget in Designer
2. Find the property you want to bind (e.g., Text, Percent)
3. Click the Bind dropdown next to the property
4. Select Create Binding
5. A function is created—add logic to return the correct value

The binding function must return the correct type for that property:

• Text property → returns Text or String
• Percent (Progress Bar) → returns Float (0.0 to 1.0)
• Color → returns Slate Color or Linear Color
• Visibility → returns ESlateVisibility enum

Getting References to Game Data

Your binding functions need access to game data. Common patterns:

Get Player Character/Controller:

Get Player Character (index 0) → Cast to YourCharacter → Get Health

Get Game State:

Get Game State → Cast to YourGameState → Get Score

Cached Reference: Store reference in a variable on Event Construct, then use it in bindings. More efficient than getting reference every frame.

flowchart LR
    W["Widget Property
(Text, Percent)"] -->|"Bind"| F["Binding Function"]
    F -->|"Every Frame"| G["Get Player Character"]
    G --> C["Cast to MyCharacter"]
    C --> H["Get Health"]
    H --> R["Return Value"]
    R -->|"Updates"| W
    
    style W fill:#4CAF50,color:#fff
    style F fill:#667eea,color:#fff
    style R fill:#FF9800,color:#fff
                

Figure: Binding function flow—widget calls function each frame to get current value.

Performance Considerations

Bindings are called every frame, so keep them efficient:

• Cache references: Don't call Get Player Character every frame—store it once
• Simple calculations: Avoid complex logic in binding functions
• Consider events: For data that changes rarely, event-driven updates are more efficient
• Limit bound widgets: Having 100 widgets all with bindings can add up

Formatting Bound Values

Raw values often need formatting for display:

Integer to Text: Use To Text (Integer) for whole numbers

Float to Text: Use To Text (Float) with formatting options:

• Minimum/Maximum Fractional Digits — control decimal places
• Use Grouping — add thousands separators (1,000 vs 1000)

Append/Format Text: Combine values with labels:

Format Text: "Health: {0}%" with Health value = "Health: 75%"

Percentage Display: Multiply 0-1 value by 100 for percentage:

Health (0.75) × 100 = 75 → "75%"

Creating a Dynamic Health Bar

A health bar is the quintessential HUD element—it needs to show current health, maximum health, and update instantly when the player takes damage or heals. Let's build one properly.

Health System Setup

Before creating the UI, ensure your character has health data. A simple setup:

1. In your Character Blueprint, create variables:
   • CurrentHealth (Float) — Default: 100
   • MaxHealth (Float) — Default: 100
2. Create a function GetHealthPercent:
   • Return: CurrentHealth / MaxHealth
   • This gives a 0-1 value perfect for Progress Bar
3. Create functions TakeDamage and Heal that modify CurrentHealth

Figure: Character provides health data; widget binds to it.

Creating the Health Bar Widget

Create a new Widget Blueprint WBP_HealthBar:

1. Add a Canvas Panel as root
2. Add a Size Box to control dimensions (Width: 300, Height: 40)
3. Inside Size Box, add an Overlay (to layer background and fill)
4. In Overlay, add:
   • Image — Background (dark color, full size)
   • Progress Bar — Health fill (red color)
   • Text Block — Health text (centered, optional)

Widget Hierarchy

Canvas Panel
└── Size Box (300 × 40)
    └── Overlay
        ├── Image (Background) — #1a1a1a
        ├── Progress Bar (HealthBar) — #f44336
        └── Text Block (HealthText) — "75%"

Caching the Player Reference

Instead of getting the player every frame, cache it once:

1. Create a variable PlayerRef (type: Your Character class)
2. In the Graph, override Event Construct
3. Get Player Character → Cast to YourCharacter → Set PlayerRef
4. Now bindings can use PlayerRef directly

Figure: Cache the player reference once on widget construction.

Binding the Progress Bar

1. Select the Progress Bar widget
2. In Details, find Percent
3. Click Bind → Create Binding
4. In the created function:
   • Check if PlayerRef is valid (Is Valid node)
   • If valid: Call GetHealthPercent on PlayerRef → Return value
   • If not valid: Return 1.0 (full bar as fallback)

Binding the Health Text

1. Select the Text Block widget
2. Bind the Text property
3. In the binding function:
   • Get CurrentHealth from PlayerRef
   • Round to integer (if desired)
   • Format: Format Text "{0} / {1}" with CurrentHealth and MaxHealth
   • Or simple: Round(CurrentHealth) → To Text → Append " HP"

Adding Visual Polish

Color Change Based on Health: Bind the Progress Bar's Fill Color to change from green (high) to yellow (medium) to red (low):

1. Create a binding for Fill Color and Opacity
2. In the function:
   • Get health percent
   • If > 0.6: Return Green
   • If > 0.3: Return Yellow
   • Else: Return Red

Figure: Health bar color changes based on current health percentage.

Low Health Warning: Add a pulsing effect when health is critical:

1. Create a widget animation that pulses the bar (scale or opacity)
2. In the binding or Event Tick, check if health < 20%
3. If low and animation not playing: Play Animation
4. If not low and animation playing: Stop Animation

Ammo and Resource Counters

Unlike health bars, ammo and resources are typically displayed as numbers. They need to update instantly and may have more complex formatting requirements.

Simple Ammo Display

A basic ammo counter shows: Current Ammo / Magazine Size or Current / Reserve.

Setup in Character:

• CurrentAmmo (Integer) — Bullets in current magazine
• MaxAmmo (Integer) — Magazine capacity
• ReserveAmmo (Integer) — Extra bullets carried

Widget Structure:

Horizontal Box
├── Text Block (CurrentAmmo) — "30"
├── Text Block (Separator) — " / "
└── Text Block (ReserveAmmo) — "120"

Or use a single Text Block with formatted text:

Format Text: "{0} / {1}" → "30 / 120"

Binding Ammo Text

1. Create Text Block for ammo display
2. Bind the Text property
3. In binding function:
   • Get PlayerRef → Get CurrentAmmo, ReserveAmmo
   • Format Text with both values
   • Return formatted string

Figure: Different ammo counter layout options.

Low Ammo Warning

Communicate urgency when ammo is low:

Color Change:

1. Bind the text color property
2. If CurrentAmmo <= 5: Return Red
3. If CurrentAmmo <= 10: Return Yellow
4. Else: Return White

Visibility: Show/hide a warning icon based on ammo level:

1. Add a warning icon Image widget
2. Bind Visibility property
3. Return Visible if ammo low, Collapsed otherwise

Multiple Resource Types

Games often have multiple resources—health, mana, stamina, ammo types. Create a reusable resource display component:

1. Create WBP_ResourceDisplay User Widget
2. Add exposed variables:
   • ResourceName (Text)
   • ResourceIcon (Texture 2D)
   • ResourceColor (Slate Color)
   • CurrentValue (Float)
   • MaxValue (Float)
3. Design with icon, progress bar, and text
4. Bind internal widgets to exposed variables
5. Reuse for health, mana, stamina, experience, etc.

Objective and Status Text

Beyond numeric values, HUDs often show text that changes based on game state:

Current Objective:

"Find the key" → "Open the door" → "Escape the building"

Status Messages:

"Wave 3 of 10" | "Boss Health: 45%" | "Time: 2:30"

For text that changes infrequently, event-driven updates are better than bindings:

1. Create a function in your HUD widget: SetObjectiveText(Text)
2. This function sets the Text Block's text directly
3. Call this function from game logic when objectives change
4. No per-frame binding overhead

flowchart LR
    subgraph Game["Game Logic"]
        A["Player picks up key"] --> B["Update Objective"]
    end
    
    subgraph HUD["HUD Widget"]
        C["SetObjectiveText()"] --> D["Text Block
Updated"]
    end
    
    B -->|"Call Function"| C
    
    style A fill:#4CAF50,color:#fff
    style B fill:#667eea,color:#fff
    style C fill:#667eea,color:#fff
    style D fill:#FF9800,color:#fff
                

Figure: Event-driven updates—game logic directly updates HUD when needed.

Timer Display

Countdown timers need special formatting:

1. Store time as float (seconds remaining)
2. In binding or update:
   • Calculate minutes: Floor(Time / 60)
   • Calculate seconds: Floor(Time % 60)
   • Format: Format Text "{0}:{1}"
   • Pad seconds with zero if needed: "2:05" not "2:5"

Minutes = Floor(TotalSeconds / 60)
Seconds = Floor(TotalSeconds % 60)
// Pad seconds: if Seconds < 10, prepend "0"
Format Text: "{0}:{1}" where {1} is padded

Hands-On: Complete Player HUD

Let's build a complete player HUD that displays health, ammo, and an objective tracker. This exercise ties together everything we've learned about data binding and dynamic updates.

Step 1: Set Up Character Variables

First, ensure your character has the necessary data. Open your Character Blueprint and add:

Health Variables:

1. CurrentHealth (Float) — Default: 100
2. MaxHealth (Float) — Default: 100

Ammo Variables:

1. CurrentAmmo (Integer) — Default: 30
2. MaxAmmo (Integer) — Default: 30
3. ReserveAmmo (Integer) — Default: 90

Helper Functions:

1. Create GetHealthPercent function:
   • Return type: Float
   • Logic: Return CurrentHealth / MaxHealth

Test Functions (for debugging):

1. Create TakeDamage (Input: Float Amount):
   • CurrentHealth = Clamp(CurrentHealth - Amount, 0, MaxHealth)
2. Create UseAmmo:
   • If CurrentAmmo > 0: CurrentAmmo = CurrentAmmo - 1

Step 2: Create the HUD Widget

1. Right-click in Content Browser → User Interface → Widget Blueprint
2. Name it WBP_PlayerHUD
3. Open it in the Widget Editor

Step 3: Set Up Root Structure

1. Add a Canvas Panel as the root (this is default)
2. The Canvas Panel allows free positioning with anchors

Step 4: Create the Health Bar Section (Top-Left)

1. Add a Vertical Box to Canvas Panel
2. Rename it to HealthSection
3. Set anchors to Top-Left
4. Set Position: X: 30, Y: 30
5. Set Size: X: 250, Y: 60

Inside HealthSection, add:

1. Text Block — Name: HealthLabel
   • Text: "HEALTH"
   • Font Size: 14
   • Color: White with slight transparency (0.8 alpha)
2. Overlay — Name: HealthBarContainer
   • Inside, add Image (Background): Color #1a1a1a
   • Inside, add Progress Bar: Name HealthBar
3. Text Block — Name: HealthText
   • Text: "100 / 100" (placeholder)
   • Font Size: 12
   • Justification: Right

Figure: Health section positioned in top-left corner.

Step 5: Create the Ammo Counter (Bottom-Right)

1. Add a Vertical Box to Canvas Panel
2. Rename it to AmmoSection
3. Set anchors to Bottom-Right
4. Set Position: X: -30, Y: -30 (negative because anchored to right/bottom)
5. Set Alignment: X: 1.0, Y: 1.0 (aligns right edge to anchor)
6. Set Size: X: 150, Y: 70

Inside AmmoSection, add:

1. Text Block — Name: AmmoLabel
   • Text: "AMMO"
   • Font Size: 12
   • Justification: Right
2. Horizontal Box — Name: AmmoDisplay
   • Inside, add Text Block — Name: CurrentAmmoText
     • Text: "30"
     • Font Size: 28, Bold
   • Inside, add Text Block — Name: AmmoSeparator
     • Text: " / "
     • Font Size: 18
     • Color: Gray
   • Inside, add Text Block — Name: ReserveAmmoText
     • Text: "90"
     • Font Size: 18
     • Color: Gray

Step 6: Create Objective Display (Top-Center)

1. Add a Vertical Box to Canvas Panel
2. Rename it to ObjectiveSection
3. Set anchors to Top-Center
4. Set Position: X: 0, Y: 30
5. Set Alignment: X: 0.5 (centers horizontally)

Inside ObjectiveSection, add:

1. Text Block — Name: ObjectiveLabel
   • Text: "OBJECTIVE"
   • Font Size: 10
   • Justification: Center
   • Color: Yellow/Gold
2. Text Block — Name: ObjectiveText
   • Text: "Find the hidden key"
   • Font Size: 16
   • Justification: Center
   • Check Is Variable

Figure: Complete HUD layout with health (top-left), objective (top-center), and ammo (bottom-right).

Step 7: Cache Player Reference

Switch to the Graph view:

1. Create a variable PlayerRef (type: your Character Blueprint class)
2. Add Event Construct node
3. From Event Construct:
   • Get Owning Player Pawn
   • Cast to your Character class
   • Set PlayerRef to the cast result

Step 8: Bind Health Bar Percent

1. Switch to Designer, select HealthBar (Progress Bar)
2. In Details, find Percent
3. Click Bind → Create Binding
4. In the binding function:
   • Add Is Valid node for PlayerRef
   • If valid: Call GetHealthPercent on PlayerRef, return result
   • If not valid: Return 1.0

Figure: Binding function with validity check and fallback.

Step 9: Bind Health Bar Color

1. Select HealthBar, find Fill Color and Opacity
2. Click Bind → Create Binding
3. In the binding function:
   • Get health percent from PlayerRef
   • Use Select node or branches:
   • If percent > 0.6: Return Green (0.3, 0.69, 0.31)
   • Else if percent > 0.3: Return Yellow (1.0, 0.76, 0.03)
   • Else: Return Red (0.96, 0.26, 0.21)

Step 10: Bind Health Text

1. Select HealthText, bind the Text property
2. In the binding function:
   • Get CurrentHealth and MaxHealth from PlayerRef
   • Round CurrentHealth to integer
   • Use Format Text: "{0} / {1}"
   • Return the formatted text

Step 11: Bind Ammo Display

1. Select CurrentAmmoText, bind Text:
   • Get CurrentAmmo from PlayerRef
   • Convert to Text, return
2. Select ReserveAmmoText, bind Text:
   • Get ReserveAmmo from PlayerRef
   • Convert to Text, return

Step 12: Bind Ammo Color (Low Ammo Warning)

1. Select CurrentAmmoText, bind Color and Opacity
2. In the binding function:
   • Get CurrentAmmo from PlayerRef
   • If CurrentAmmo <= 5: Return Red
   • Else if CurrentAmmo <= 10: Return Yellow
   • Else: Return White

Step 13: Create Objective Update Function

For the objective text, we'll use event-driven updates:

1. In the Graph, create a new function SetObjective
2. Add input parameter: NewObjective (Text)
3. In the function:
   • Get reference to ObjectiveText (drag from Hierarchy)
   • Call Set Text on ObjectiveText
   • Connect NewObjective to the text input

Now game logic can call this function to update the objective.

Step 14: Display the HUD

Open your Player Controller Blueprint:

1. Create variable PlayerHUD (type: WBP_PlayerHUD)
2. On Event BeginPlay:
   • Create Widget (class: WBP_PlayerHUD)
   • Add to Viewport
   • Set PlayerHUD variable to the created widget

Step 15: Test with Debug Keys

Add test inputs to verify everything works:

1. In Character Blueprint, on keyboard H pressed: Call TakeDamage(10)
2. On keyboard J pressed: Call TakeDamage(-10) (heal)
3. On keyboard K pressed: Call UseAmmo

Play the game and press these keys to see the HUD update!

Troubleshooting

Bonus Challenges

1. Smooth Health Animation: Instead of instant updates, lerp the health bar fill over 0.2 seconds
2. Damage Flash: Flash the health bar red briefly when taking damage
3. Ammo Reload: Add reload functionality and show reload progress
4. Minimap: Add a minimap in the corner using a Render Target
5. Crosshair: Add a centered crosshair that changes when aiming at enemies
6. Damage Numbers: Spawn floating damage numbers when the player takes damage

Summary

In this lesson, you've learned how to create HUD elements that respond to real game data. Your UI is no longer static—it reflects the actual state of your game in real-time, providing players with the information they need to play effectively.

Key Concepts

Data Binding: Connects widget properties to data sources. Function bindings are called every frame and work well for frequently changing data like health. Event-driven updates are more efficient for infrequent changes like objectives.

Binding Functions: Return the appropriate type for the property being bound. Text properties need Text/String, Percent needs Float (0-1), Color needs Slate Color. Always validate references before using them.

Caching References: Store references to frequently accessed objects (like the player character) in variables during Event Construct. This avoids expensive lookups every frame in binding functions.

Health Bars: Use Progress Bar widgets with Percent bound to a health ratio (current/max). Color bindings can change the bar from green to yellow to red based on health level. Text displays can show exact values.

Ammo Counters: Text-based displays showing current/reserve or current/magazine. Color changes indicate low ammo warnings. Use Format Text for combining multiple values.

Event-Driven Updates: For data that changes infrequently (objectives, status messages), create functions that update widgets directly. Call these functions from game logic when changes occur.

Value Formatting: Use To Text nodes with formatting options for numbers. Format Text combines values with labels. Time displays need special handling (minutes/seconds calculation).

Data Binding Quick Reference

Common HUD Elements

Best Practices

• Cache references: Store frequently accessed objects (player, game state) in variables during Event Construct
• Validate before use: Always check Is Valid before accessing cached references in bindings
• Choose binding wisely: Use function bindings for frequent changes, event-driven for rare changes
• Keep bindings simple: Complex logic in binding functions runs every frame—move complexity elsewhere
• Provide fallbacks: Return sensible default values when references are invalid
• Use visual feedback: Color changes, animations, and icons communicate urgency better than numbers alone
• Test at extremes: Verify HUD looks correct at 0%, 50%, and 100% of values
• Consider performance: Many bound widgets add up—profile if you have performance concerns

Figure: Data flows from game systems through binding functions to widget properties displayed on screen.

What's Next?

With your HUD displaying real-time game data, the next lesson covers Menus and Navigation. You'll learn how to create main menus, pause screens, and settings interfaces. We'll cover menu navigation with keyboard/gamepad, widget focus, and transitioning between menu screens. Menus are where UI meets game flow control!

Knowledge Check