Make Your Health Bar Come Alive with Verse

Imagine you are building a game where the player’s health bar changes color when they get hit. Or maybe a score counter that glows when you win. You can do this easily in Fortnite!

We will use a special tool called a Material Instance. Think of it like a paint palette. You have one base paint recipe. But you can make many copies of it. Each copy can have a different color or style.

In this tutorial, you will learn how to make a health bar that actually works. It will shrink when the player takes damage. It will be dynamic and fun. Let’s get started!

What You'll Learn

• What a Material Instance is (and why it is better than pictures).
• How to find the built-in health bar material.
• How to connect Verse code to the UI so it moves.
• How to use a View Binding to link game data to the screen.

How It Works

First, let’s talk about Materials. In Fortnite, a material is like a skin for an object. It tells the computer how to draw something.

Usually, we use pictures for UI. But pictures are heavy. They take up a lot of memory. Materials are lighter. They are also smarter. They can change color or shape while the game is running.

We will use a special material called M_UI_Shape_Rectangle. It is a simple rectangle shape. It is perfect for health bars.

But we don’t want to change the original material. We want a copy. This copy is called a Material Instance.

Think of it like a cookie cutter. The cutter is the original material. The cookies are the instances. You can frost each cookie differently. But they all have the same shape.

Now, how do we make it change? We use Verse. Verse is the code language. It talks to the UI.

We use a tool called a View Binding. A View Binding is like a telephone line. It connects your Verse code to the UI material. When your code changes a number, the UI sees it. The health bar shrinks or grows instantly!

Let's Build It

We will build a simple health bar. It will start full. When you press a button, it will drain.

Here is the Verse code. Copy it into a new Verse file in UEFN.

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

# This is our main device. It holds the code.
health_bar_device := class(creative_device):

    # This is a variable. It holds the current health.
    # It starts at 100.
    var current_health: float = 100.0

    # This is a variable to track the health percentage for the UI.
    # We will update this to drive the visual bar.
    var health_percentage: float = 1.0

    # This function runs when the game starts.
    OnBegin<override>()<suspends>: void =
        # First, we set the initial health.
        # We send 1.0 to the UI. 1.0 means 100% full.
        set health_percentage = 1.0
        Print("Health bar is ready! Press Space to take damage.")

    # This function reduces health when called.
    TakeDamage(): void =
        # Let's take some damage.
        set current_health = current_health - 25.0

        # Check if health is below zero.
        if (current_health < 0.0):
            set current_health = 0.0

        # Calculate the percentage (0.0 to 1.0).
        # If health is 50, percentage is 0.5.
        set health_percentage = current_health / 100.0

        # Send the new percentage to the UI.
        # The health_percentage variable now holds the updated value.
        Print("Health is now: {current_health}")```

### Walkthrough of the Code

1.  **`current_health: float`**: This is a variable. It stores the player’s health. It is a number with decimals.
2.  **`health_bar_material`**: This is where you put your custom material instance in the editor.
3.  **`health_bar_binding`**: This is the magic part. It links the code to the material.
4.  **`SetScalarParameterValue`**: This is the command that sends data. It takes a number. This number tells the UI how full the bar should be.
5.  **`OnBegin`**: This runs first. It sets the bar to full (1.0).
6.  **`OnActivate`**: This runs when you press a button. It lowers the health and updates the bar.

## Try It Yourself

Now, let’s make this work in your island!

**Step 1: Create the Material Instance**
1.  Open the **Content Browser**.
2.  Go to **Fortnite** > **UI** > **Materials**.
3.  Find `M_UI_Shape_Rectangle`.
4.  Right-click it and select **Create Material Instance**. Name it `MyHealthBar`.
5.  Open `MyHealthBar`. In the details panel, look for **Fill**.
6.  Change the color to Red. This will be our health bar color.

**Step 2: Set Up the Widget**
1.  Add a **Player Start** device to your map.
2.  Add a **Button** device nearby.
3.  Open the **Widget Editor**.
4.  Add a **Rectangle** widget.
5.  Set its **Material** to `MyHealthBar`.
6.  In the material details for the widget, look for a parameter named `Fill` or `Amount`. (Note: You may need to expose a parameter in the material instance editor first).
7.  Connect the **View Binding** of the rectangle to a new binding in the widget. Name it `HealthPercent`.

**Step 3: Connect Verse to the Widget**
1.  Add a **Creative Device** to your map.
2.  Paste the Verse code above into it.
3.  In the device details, drag your `MyHealthBar` material instance into the **Health Bar Material** slot.
4.  Drag the View Binding from your widget into the **Health Bar Binding** slot.
5.  Link the **Button** device to the **Creative Device**.

**Step 4: Play!**
Test your island. Press the button. Watch the red bar shrink!

**Challenge:**
Can you make the bar turn green when the health is above 50%? Hint: You can check the `current_health` value in the code and change the material color property dynamically.

## Recap

*   **Material Instances** are copies of materials. They let you customize looks without breaking the original.
*   **View Bindings** are the link between Verse code and the UI.
*   **SetScalarParameterValue** sends numbers to the UI.
*   You can make dynamic, changing UI that reacts to gameplay!

## References

*   https://dev.epicgames.com/documentation/en-us/fortnite/creating-custom-ui-with-material-instances-in-unreal-editor-for-fortnite
*   https://dev.epicgames.com/documentation/en-us/uefn/creating-custom-ui-with-material-instances-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/material-assets-in-unreal-editor-for-fortnite
*   https://dev.epicgames.com/documentation/en-us/fortnite/user-interfaces-feature-template-in-unreal-editor-for-fortnite