How to Add a Viewmodel to Your Fortnite HUD

Have you ever wanted to change how your health bar looks? Or maybe make a custom score counter? You can do this with Widgets. Widgets are the menus and screens you see in the game.

A Viewmodel is like the brain behind a Widget. It holds the data. It tells the Widget what to show. Let's build one together.

What You'll Learn

• What a Viewmodel is in simple terms.
• How to add a Viewmodel to your Widget.
• How to connect data to your screen.

How It Works

Imagine you are watching TV. The TV screen is the Widget. It shows pictures. But where do the pictures come from? They come from the cable box. The cable box is the Viewmodel.

The Viewmodel holds the information. It might hold your health points. It might hold your ammo count. The Widget just displays that info.

In Fortnite, we use Widgets for things like health bars. We use Viewmodels to get the player's data. Without a Viewmodel, the Widget has nothing to show. It would be an empty screen.

Think of it like a recipe. The Viewmodel is the list of ingredients. The Widget is the cake. You need the ingredients to bake the cake. You need the Viewmodel to show the Widget.

Let's Build It

We will add a Viewmodel to a Widget. This lets us control the Widget with game data. We will use the Tracker Viewmodel. This is a common tool for custom UI.

Follow these steps in Unreal Editor for Fortnite (UEFN).

1. Open your Widget Blueprint.
2. Go to the top menu. Click Window.
3. Select Viewmodels. A new window will open.
4. Click the + Viewmodel button.
5. A list will pop up. Look for Device - Tracker View Model.
6. Click it to add it.

Now your Widget has a brain! It can now talk to game devices.

Here is what the code logic looks like in Verse. Verse is the language we use. This code sets up the connection.

# This is a simple example of how a Viewmodel connects to data.
# In the editor, you do this with buttons. In Verse, we write it.

using { /Fortnite.com/Devices }
using { /Fortnite.com/Characters }
using { /Verse.org/Simulation }
using { /UnrealEngine.com/Temporary/UI }

# We define a simple Verse device to manage the connection.
viewmodel_example := class(creative_device):

    # A reference to a tracker device placed in the level.
    # Wire this up in the editor's Details panel.
    @editable
    MyTracker : tracker_device = tracker_device{}

    # OnBegin runs when the game starts.
    OnBegin<override>()<suspends> : void =
        # Get the current score value from the tracker device.
        # tracker_device exposes GetValue to read its total tracked value.
        CurrentCount := MyTracker.GetValue()

        # Print the value so we can confirm the connection works.
        # In a full project you would pass this to a UI widget instead.
        # note: Verse UI text binding uses message types; direct widget
        # health-bar calls are authored in the Widget Blueprint via
        # View Bindings, not in Verse code directly.
        Print("Tracker value: {CurrentCount}")```

Let's walk through this.

The first line creates the Viewmodel. It is empty at first. It is like an empty box.

The second line gets data. It asks the game, "How much health does the player have?" The Viewmodel finds the answer.

The third line sends the answer to the Widget. The Widget sees the number. It draws the bar. This happens every frame. It is very fast.

## Try It Yourself

Now it is your turn to build.

**Challenge:** Add a Tracker Viewmodel to your Widget. Then, try to bind a simple value. Maybe change the color of a square when you pick up an item.

**Hint:** After adding the Viewmodel, go to **Window > View Bindings**. This panel helps you link the data to your widgets. Look for the property you want to change. Drag it to the widget element.

## Recap

*   A Viewmodel is the brain of a Widget.
*   It holds the data the Widget shows.
*   You add it via the Window menu.
*   It connects game data to your custom UI.

You just learned how to add the brain to your screen! Great job.

## References

*   https://dev.epicgames.com/documentation/en-us/uefn/making-custom-health-and-shield-bars-in-unreal-editor-for-fortnite
*   https://dev.epicgames.com/documentation/en-us/uefn/setting-material-parameters-in-umg-in-unreal-editor-for-fortnite
*   https://dev.epicgames.com/documentation/en-us/uefn/conversion-function-setting-material-parameters-in-umg-in-unreal-editor-for-fortnite
*   https://dev.epicgames.com/documentation/en-us/fortnite/conversion-function-setting-material-parameters-in-umg-in-unreal-editor-for-fortnite
*   https://dev.epicgames.com/documentation/en-us/uefn/tmnt-custom-ui-player-info-in-unreal-editor-for-fortnite