The Ghost in the Machine: Building Custom HUDs with Verse

So, you’ve built a killer island. You’ve got trap doors that drop players into lava, loot goblins that steal your shields, and a storm that moves faster than a panic-stricken rabbit. But when a player picks up your legendary item, what do they see? The default Fortnite HUD? Boring. You want them to see your UI. You want a custom health bar that pulses when they’re low, a custom scoreboard that insults them, or a popup that says "YOU DIED" in neon fire.

That’s where In-Game User Interfaces (UI) come in. Think of UI as the game’s voice and face. It’s how you tell the player what’s happening without forcing them to look away from the action. In UEFN, we don’t just drag and drop text boxes anymore; we use Verse to make that UI smart, responsive, and tied directly to the player’s actions.

What You'll Learn

• The difference between the Back End (the logic/Verse code) and the Front End (the visual design/Widgets).
• How to create a Widget, the building block of all UI.
• How to link a Widget to a specific player so only they see it (no ghosting!).
• How to make that UI react to game events using Verse.

How It Works

Before we write a single line of code, we need to understand the architecture. In game development, UI is split into two halves that talk to each other like a chef and a waiter.

1. The Front End: The "Waiter" (Widgets)

Imagine you’re at a restaurant. The Widget is the menu card. It’s static. It has a font, a color, and a layout. It doesn’t know if you’re hungry or full; it just exists. In UEFN, you design these in the Widget Editor. You place text, images, and buttons on a canvas. This is your Front End Design. It’s purely visual.

2. The Back End: The "Chef" (Verse)

Now, imagine the Chef (Verse) looks at your order. If you ordered a steak, the Chef tells the Waiter to write "Steak" on the menu. If you’re out of stock, the Chef tells the Waiter to cross it out. Verse is the logic. It tracks player data (health, ammo, score) and decides what the Widget should show. This is the Back End Design.

3. The Scene Graph: The "Table" (Hierarchy)

In Unreal Engine, everything exists in a Scene Graph. Think of this like the seating chart in our restaurant.

• The Island is the building.
• The Player is a specific table.
• The Widget is the menu placed on that specific table.

Crucially, a custom UI is associated with a specific player. If Player 1 has a menu, Player 2 doesn’t see it. This is different from the default Fortnite HUD, which everyone sees. Your custom UI is personal. It’s like a private note passed to one player.

4. Input Mapping: The "Order Pad"

How does the game know which buttons on the screen correspond to your controller or keyboard? This is Player Input. When you attach a Widget to a player, Verse automatically maps the input actions (like "Jump" or "Reload") to that player’s HUD. This is called Input Mapping. It ensures that when a player presses "E" to interact, the game knows which UI element to highlight or activate.

Let's Build It

We’re going to build a simple "Health Status Popup." When a player’s health drops below 50, a custom UI element pops up on their screen saying "LOW HEALTH!" in red.

Step 1: The Widget (Front End)

1. Open the Widget Editor.
2. Create a new User Widget.
3. Add a Text Block. Change the text to "LOW HEALTH!". Set the color to bright red.
4. Save it. Let’s call this widget LowHealthWidget.

Step 2: The Verse Code (Back End)

Now we need Verse to watch the player’s health and trigger the widget. We’ll use a Player component and a Timer to check health every second.

Here is the Verse code. Don’t worry if it looks alien; we’ll break it down line by line.

# Import the necessary systems
using {
    FortniteVerseSystemsLibrary,
    Player,
    Timer,
    Widget
}

# This is our main script. It "lives" on a Player.
# Think of it as the player's personal assistant.
script LowHealthMonitor(Player) is {
    
    # This is a Variable. 
    # A variable is like a loot box that can change contents.
    # Here, it holds the reference to our custom widget.
    var LowHealthUI : Widget = null

    # This is a Function.
    # A function is like a recipe or a device action.
    # It’s a block of code that does something when called.
    on Start() is {
        # 1. Create the Widget Instance
        # We tell the system to "spawn" our LowHealthWidget.
        # Only this player sees it.
        LowHealthUI = CreateWidget(LowHealthWidget)

        # 2. Attach the Widget to the Player
        # This is like handing the menu to the player at their table.
        Player.SetUserInterface(LowHealthUI)

        # 3. Start a Timer to check health
        # We call our CheckHealth function every 1 second.
        # This is like a heartbeat monitor ticking.
        StartTimer(1.0, CheckHealth)
    }

    # This is another Function: CheckHealth
    # It runs every time the timer ticks.
    on CheckHealth() is {
        # Get the player's current health.
        # Think of this as checking the loot pool.
        current_health := Player.GetHealth()

        # This is an If Statement.
        # It’s like a trap door: IF condition is true, THEN trigger.
        if (current_health < 50.0) {
            # Show the widget
            LowHealthUI.Show()
            
            # Optional: Change text color to red if not already
            # (Simplified for brevity)
        } else {
            # Hide the widget if health is safe
            LowHealthUI.Hide()
        }

        # Restart the timer to keep checking!
        # This is the loop. It keeps the game alive.
        StartTimer(1.0, CheckHealth)
    }
}

Walkthrough: What Just Happened?

1. script LowHealthMonitor(Player) is { ... }: This defines our script. It’s attached to a specific Player entity in the scene graph.
2. on Start(): This is an Event. An event is like a trigger pad. When the player spawns, this code runs automatically.
3. CreateWidget(LowHealthWidget): We instantiate our visual design.
4. Player.SetUserInterface(LowHealthUI): This is the magic link. It ties the visual widget to the player’s personal HUD.
5. StartTimer(1.0, CheckHealth): We set up a loop. In programming, loops are like the storm circle—constantly moving, constantly checking conditions.
6. if (current_health < 50.0): The logic. If health is low, Show() the widget. If not, Hide() it.

Try It Yourself

You’ve built a health monitor. Now, let’s make it more fun.

Challenge: Modify the code to create a "Kill Streak Popup."

1. Create a new Widget that says "WICKED!" in gold.
2. In Verse, track the player’s eliminations (use Player.GetEliminations()).
3. Make the popup appear when eliminations are a multiple of 5 (5, 10, 15...).
4. Hint: You’ll need a variable to remember the last multiple of 5 you saw. Think of it like a counter on a scoreboard that only resets when you hit the next milestone.

Need a hint? Use a variable called last_streak initialized to 0. Inside your timer, check if eliminations / 5 > last_streak. If true, show the widget and update last_streak = eliminations / 5.

Recap

• UI is Personal: Custom widgets are attached to specific players, not the whole world.
• Two Halves: The Widget (Front End) is the design; Verse (Back End) is the logic that drives it.
• Scene Graph: Widgets exist in the hierarchy, tied to the Player entity.
• Events & Loops: Use StartTimer to create loops that constantly check game state (like health or eliminations) and update the UI accordingly.

Now go make your island look less like a default lobby and more like a custom experience. And remember: if the UI doesn’t pop, did you even build an island?

References

• https://dev.epicgames.com/documentation/en-us/fortnite/ingame-user-interfaces-in-unreal-editor-for-fortnite
• https://dev.epicgames.com/documentation/en-us/fortnite/user-interface-settings-in-fortnite-creative
• https://dev.epicgames.com/documentation/en-us/fortnite/user-interface-devices-in-unreal-editor-for-fortnite
• https://dev.epicgames.com/documentation/en-us/fortnite/user-interfaces-feature-template-in-unreal-editor-for-fortnite
• https://dev.epicgames.com/documentation/en-us/uefn/ui-modals-in-unreal-editor-for-fortnite