Stop Using Default Health Bars: Build Your Own with UMG ViewModels

Look, the default Fortnite health bar is fine if you’re trying to blend in with the NPCs. But if you’re building a custom island, you want your UI to look as unique as your gameplay. The problem? Most creators try to hack the UI with messy Verse code that breaks every time Epic updates the engine.

Enter the ViewModel. Think of it as the invisible bridge between your Creative devices (like a Health Controller or a Score Tracker) and your custom UMG (User Motion Graphics) widgets. It’s the only official, stable way to make your custom UI react to game events without writing complex data-syncing code. We’re going to build a custom "Revenge Tracker" that uses a ViewModel to display how many times you’ve been eliminated. No complex logic, just clean binding.

What You'll Learn

• What a ViewModel actually is (and why it’s not just a fancy button).
• How to add a ViewModel to your UMG Widget.
• How to create View Bindings to link device data to UI visuals.
• How to replace boring default UI with custom, animated materials.

How It Works

Before we touch the code or the editor, let’s translate this into Fortnite terms.

The Problem: The "Black Box"

Imagine you have a Score Counter device. When you get an elimination, the counter goes up. But you don’t want to see the little floating number that usually appears. You want to see a cool, animated skull icon that grows bigger every time you kill someone.

If you try to do this with just Verse, you have to write code that says: "Every time the device fires, update this variable, then update that texture, then refresh the screen." It’s tedious, error-prone, and often laggy.

The Solution: The ViewModel

A ViewModel is like a dedicated translator. Instead of you writing code to sync data, the ViewModel listens to the device.

1. The Device (The Source): Your Health Controller or Score Tracker is shouting, "I have 50 health!" or "I got an elimination!"
2. The ViewModel (The Translator): It’s sitting there, listening. It has a list of "ears" (functions) that know exactly what data the device is shouting.
3. The Widget (The Display): This is your custom UI. The ViewModel tells the Widget, "Hey, the device just said 50 health. Update this specific bar’s material to reflect that."

Key Terms (Defined for Non-Programmers)

• UMG (User Motion Graphics): The system Epic uses to build menus, health bars, and menus. Think of it as the "canvas" where you paint your UI.
• ViewModel: A special component inside your UMG Widget that connects to a specific Creative Device. It automatically pulls data from that device.
• View Bindings: The actual connections. It’s like plugging an HDMI cable from your console (Device) to your TV (Widget). You tell the binding: "Take the 'Elimination Count' from the device and plug it into this 'Material Parameter' on the widget."
• Material Parameter: A setting on a texture that can change. For example, a "Fill Amount" slider on a health bar texture. You can animate this value to make the bar grow or shrink.

Let's Build It

We are going to build a "Kill Counter" widget. It will use the Tracker Viewmodel (which handles simple integer values like scores) to update a custom UI element.

Step 1: Create the Device

1. Place a Tracker device in your level.
2. Name it "KillCounter".
3. Set the Initial Value to 0.
4. (Optional) Add a Button device that, when clicked, increments the Tracker by 1. This lets us test it easily.

Step 2: Create the UMG Widget

1. Open the UMG Editor (Window > UMG Editor).
2. Create a new Widget. Let’s call it KillCounterWidget.
3. Add a Canvas Panel.
4. Inside the Canvas, add an Image or Button (if you want it clickable). Let’s use an Image for simplicity.
5. Load a custom texture (a skull, a star, whatever) into this Image.
6. Crucial Step: In the Details panel for the Image, look at the Material section. You need to expose a parameter. If you’re using a custom material, make sure it has a Scalar Parameter (like "Scale" or "Opacity") that you can control. For this tutorial, let’s assume we have a material parameter called KillCountScale.

Step 3: Add the ViewModel

1. With KillCounterWidget open in the UMG Editor, go to the main menu: Window > Viewmodel.
2. In the Viewmodel panel that pops up, click + ViewModel.
3. In the popup, select Device - Tracker View Model.
   • Why Tracker? Because our device is a Tracker. If we were using a Health Controller, we’d pick the Health Viewmodel. The ViewModel must match the device type.

Step 4: Create the Binding

Now we connect the dots.

1. Go to Window > View Bindings to open the View Bindings panel.
2. In the View Bindings panel, you’ll see your "Tracker View Model" listed.
3. Drag the Current Value property from the Tracker Viewmodel into the View Bindings list.
   • Note: In newer versions of UEFN, you can drag properties directly. If you can't drag, look for the "Add Binding" button.
4. Now, select your Image element in the UMG hierarchy.
5. In the View Bindings panel, find the binding you just created (Current Value).
6. Drag the Current Value binding onto the Material Parameter of your Image (specifically the KillCountScale parameter we mentioned earlier).

Step 5: Test It

1. Save your Widget.
2. Go back to your level.
3. Place the KillCounterWidget as a User Widget on the screen (or assign it to a player via a Verse script if you’re feeling fancy, but for now, just placing it in the level as a persistent widget works for testing).
4. Click your Button. The Tracker increments. The ViewModel sees the change. The Binding updates the Material Parameter. Your skull scales up!

The Verse Code (Minimal)

You don’t need Verse for this basic binding, but here’s how you’d trigger it if you wanted to automate the counter via Verse:

# This is a simple Verse script to increment the tracker
# It doesn't touch the UI directly; the ViewModel handles that!

using { /Fortnite.com/Devices }
using { /Verse.org/Simulation }

# Define the device we want to control
type KillCounterDevice = extends TrackerDevice {
}

# This function runs when the game starts
OnBegin<override>()<suspends>: void = {
    # We don't need to manually update the UI.
    # The ViewModel is already listening to this device.
    # Just change the device's value, and the UI follows.
    
    # Example: Set initial value
    SetCurrent(0)
}

# A simple function to add a kill
AddKill(): void = {
    # Get current value
    current := GetCurrent()
    # Add 1
    SetCurrent(current + 1)
    # The ViewModel automatically catches this change
    # and updates the UMG widget via the binding.
}

Wait, why is the Verse code so short? Because the ViewModel does the heavy lifting. In older systems, you’d have to write code to update the UI every time the value changed. With ViewModels, the UI reacts to the device. You change the device, the ViewModel shouts the update to the UI, and the UI updates itself. It’s like having a smart TV that automatically adjusts its brightness based on the room light—you just set the room light, and the TV handles the rest.

Try It Yourself

Challenge: Create a "Shield Bar" that uses the Health Controller Viewmodel.

1. Place a Health Controller device.
2. Create a UMG widget with a Rectangle that acts as a shield bar.
3. Use a material with a Scalar Parameter called ShieldFill.
4. Add the Health Controller Viewmodel to your widget.
5. Bind the Shield value from the ViewModel to the ShieldFill parameter.
6. Test it by taking damage (or healing) and watch your custom bar update in real-time.

Hint: If the bar doesn’t update, check if your material parameter name in the UMG editor matches exactly what you’re binding to. Case sensitivity matters!

Recap

• ViewModels are the bridge between Creative Devices and UMG Widgets.
• They listen to device functions and automatically push data to your UI.
• View Bindings are the connections that tell the UI which data to display and where to put it (e.g., into a material parameter).
• You don’t need complex Verse code to sync UI; you just need to bind the right ViewModel to the right device.

References

• https://dev.epicgames.com/documentation/en-us/uefn/using-viewmodel-in-umg-in-unreal-editor-for-fortnite
• 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/fortnite/umg-widgets-in-unreal-editor-for-fortnite
• https://dev.epicgames.com/documentation/en-us/fortnite/35-00-fortnite-ecosystem-updates-and-release-notes
• https://dev.epicgames.com/documentation/en-us/uefn/conversion-function-setting-material-parameters-in-umg-in-unreal-editor-for-fortnite