Stop Using the Default HUD: How to Build Your Own Health Bar with Verse

Look, we all love the default Fortnite HUD. It’s clean, it’s familiar, and it tells you exactly how much health you have. But if you’re building a custom island, you probably don’t want your players looking at the standard UI. You want a health bar that looks like a dragon’s health, or a shield meter that glows neon purple, or a timer that screams when it hits zero.

That’s where the Viewmodel comes in.

Think of the Viewmodel as the bridge between the "invisible" logic of your game (Verse) and the "visible" graphics on the player's screen (UMG). Without it, your Verse code is just shouting into the void. With it, you can take raw numbers—like player health or elimination counts—and turn them into dynamic, animated visuals that actually look cool.

In this tutorial, we’re going to build a custom Dynamic Health Bar. Instead of the default bar, we’ll create a UI element that changes color and width based on the player's actual health. By the end, you’ll understand how to bind game data to UI, which is the foundation for everything from custom minimaps to loot notifications.

What You'll Learn

• What the Viewmodel is: Understanding the link between Verse logic and UMG visuals.
• Data Binding: How to move numbers from a Verse variable into a UI widget.
• Material Parameters: How to change the look of a UI element (like color or opacity) using code.
• The Scene Graph Context: Where the Viewmodel lives in the hierarchy of your island.

How It Works

Before we write a single line of Verse, let’s break down the mechanics using things you already know.

The Viewmodel: The "Battle Bus" of Data

Imagine the Viewmodel as the Battle Bus. The Bus doesn’t fight; it doesn’t build. Its job is to transport players (data) from the lobby (Verse logic) to the drop zone (the player’s screen/UMG).

In Fortnite, when you get an elimination, the game engine calculates the math, then pushes that number to the UI so you see "+1 Elimination." The Viewmodel is the specific tool in UEFN that lets you say, "Hey UI, take this health number and put it here."

UMG Widgets: The "Loot Pool"

UMG (Unreal Motion Graphics) is the system we use to design the UI. Think of UMG widgets like the loot pool. You have different items: a Text Block (for words), an Image (for pictures), and a Progress Bar (for health/shield meters). These widgets sit on the screen, waiting for instructions.

Variables: The "Storm Timer"

In programming, a variable is a container that holds a value that can change. In Fortnite, think of the Storm Timer. At the start, it’s 60 seconds. As time passes, the number changes. In Verse, we’ll create a variable called CurrentHealth. This variable will hold the player's health value, just like the storm timer holds the time remaining.

Material Parameters: The "Building Edit"

When you edit a wall, you’re changing its properties. Similarly, a Material Parameter is a setting on a graphic that can be changed by code. If you have a health bar image, the "Width" or "Color" is a parameter. We use the Viewmodel to reach into the UI widget and tweak these parameters in real-time.

The Scene Graph: The "Hierarchy"

In UEFN, everything is part of the Scene Graph. This is the family tree of your island.

1. The Island is the parent.
2. Game Systems (like Verse Actors) are children.
3. UI Widgets are special children that live on the player’s screen.

The Viewmodel is a component that lives inside your Verse Actor (the brain) and talks to the UMG Widget (the face). They are separate entities, but the Viewmodel connects them.

Let's Build It

We are going to create a simple Verse Actor that tracks a dummy player’s health and updates a UMG Progress Bar.

Prerequisites:

1. A UMG Widget created in the editor with a Progress Bar named HealthBar.
2. A Verse Actor placed in your world.

The Verse Code

Copy this into your Verse file. Note: This uses the standard ViewModel API available in UEFN.

# Import the necessary modules for Verse and UI
using /Fortnite.com/Devices
using /Engine/Systems/GameplayTagManager
using /UnrealEngine.com/Temporary/Symbols

# Define our Verse Actor. This is the "Brain" of our operation.
actor CustomHealthUI is Activatable
    # This is the "Viewmodel". It's the bridge to the UI.
    # We bind it to a UMG Widget named "HealthWidget" in the editor.
    # Think of this as plugging the Battle Bus into the Drop Zone.
    var viewmodel: ViewModel = ViewModel {
        # The path to your UMG widget in the editor.
        # This must match the name of the widget asset in your Content Browser.
        widget_path: "/Game/Widgets/HealthWidget.HealthWidget_C"
    }

    # This is the "Storm Timer" - a variable that changes.
    # It holds the current health value (0 to 100).
    var current_health: float = 100.0

    # This function runs when the actor starts.
    on_begin() override:
        # Initialize the UI with full health
        update_health_ui()

    # This function is called when health changes.
    # In a real game, you'd call this from a Damage Event.
    # Here, we simulate it for the tutorial.
    function set_health(new_health: float):
        # Clamp the health between 0 and 100 (no negative health!)
        current_health = max(0.0, min(100.0, new_health))
        
        # Send the update to the UI
        update_health_ui()

    # This function talks to the Viewmodel.
    # It’s like sending a message from the Bus to the Player.
    function update_health_ui():
        # Calculate the percentage (0.0 to 1.0)
        health_percentage = current_health / 100.0
        
        # Use the Viewmodel to set the "Value" parameter of the Progress Bar.
        # "HealthBar" is the name of the Progress Bar in your UMG widget.
        viewmodel.set_float("HealthBar.Value", health_percentage)
        
        # Optional: Change color based on health
        # If health is low, turn the bar red. If high, turn it green.
        if current_health < 30.0:
            viewmodel.set_color("HealthBar.BackgroundColor", {R: 1.0, G: 0.0, B: 0.0, A: 1.0}) # Red
        else:
            viewmodel.set_color("HealthBar.BackgroundColor", {R: 0.0, G: 1.0, B: 0.0, A: 1.0}) # Green

    # Event: When the actor is activated (e.g., by a button press for testing)
    on_activate():
        # Simulate taking damage
        set_health(current_health - 25.0)

Walkthrough: What Just Happened?

1. actor CustomHealthUI is Activatable: We created a new actor. This is the container for our logic.
2. var viewmodel: ViewModel: This is the core of the tutorial. We declared a variable called viewmodel and assigned it a ViewModel type. We gave it a widget_path. This path tells Verse exactly which UMG asset to talk to. It’s like giving the Battle Bus a GPS coordinate.
3. var current_health: float: We created a float variable (a number with decimals) to store health. Floats are like the storm timer—they can be 59.9, 59.8, etc.
4. viewmodel.set_float("HealthBar.Value", health_percentage): This is the magic line. We are telling the Viewmodel: "Go to the UMG widget, find the element named 'HealthBar', and change its 'Value' property to this number."
5. viewmodel.set_color(...): Just like we changed the value, we can change the color. We’re using a simple if statement (a decision point, like "if the storm is closing, run") to switch colors based on health.

Setting Up the UMG Widget

For this code to work, your UMG widget in the editor needs:

• A Progress Bar named HealthBar.
• The Value property of that Progress Bar should be bound to a variable or parameter if you want it to animate smoothly, but set_float in Verse will override it directly.
• (Optional) A BackgroundColor parameter if you want the color change to work smoothly.

Try It Yourself

You’ve built a basic health bar. Now, let’s make it more interesting.

Challenge: Add a Text Block to your UMG widget named HealthText. Use the Viewmodel to update this text block to show the actual number (e.g., "Health: 75") instead of just the bar width.

Hint: You’ll need to convert your float number to text. In Verse, you can use conversion functions like to_text() or format strings to turn numbers into strings. Then, use viewmodel.set_string("HealthText.Text", text_value) to update the text block.

Don’t peek at the official docs yet—try to figure out how to pass a string to the UI first!

Recap

• The Viewmodel is your bridge between Verse logic and UMG visuals. It’s the Battle Bus that carries data to the screen.
• Variables like current_health hold the data that changes during the game.
• viewmodel.set_float() and viewmodel.set_string() are the commands you use to update UI elements in real-time.
• The Scene Graph keeps your actors, viewmodels, and widgets organized so they know how to talk to each other.

Now go forth and make your UI look less like default Fortnite and more like your own custom island.

References

• https://dev.epicgames.com/documentation/en-us/fortnite/using-the-viewmodel-in-umg-in-unreal-editor-for-fortnite
• https://dev.epicgames.com/documentation/en-us/uefn/using-viewmodel-in-umg-in-unreal-editor-for-fortnite
• https://dev.epicgames.com/documentation/en-us/uefn/creating-in-game-ui-in-verse
• https://dev.epicgames.com/documentation/en-us/fortnite/ingame-user-interfaces-in-unreal-editor-for-fortnite
• https://dev.epicgames.com/documentation/en-us/fortnite/modeling-in-unreal-editor-for-fortnite