Build Your Own Scoreboard with the HUD Controller

Do you want players to see their score, health, or time on the screen? You need a Heads-Up Display, or HUD. Think of it like a video game scoreboard that sticks to your TV. In Fortnite Verse, we use a special tool called the HUD Controller. It helps us put numbers and pictures on the screen. Let's build a simple scoreboard together!

What You'll Learn

• What a HUD Controller is and why we need it.
• How to make a variable that changes (like a score).
• How to show that score on the player's screen.
• How to update the screen when the score changes.

How It Works

Imagine you are playing a board game. You have a scorecard. Every time you roll the dice, you write down a new number. The scorecard shows the number. In Verse, the HUD Controller is like that scorecard. It lives in your code. It talks to the screen.

We need two things to make this work. First, we need a variable. A variable is like a box. You can put a number in it. Later, you can change the number inside. Second, we need a function. A function is like a robot. You tell it what to do. We will tell our robot: "Go to the screen and show the number in the box."

When a player gets a point, we change the number in the box. Then we tell the robot to update the screen. The player sees the new number instantly. This is how games feel alive!

Let's Build It

We will make a simple script. It will count how many times a player clicks a button. The score will appear on the screen.

First, drag a Button device into your island. Name it "Click Me".

Now, open the Verse code editor. We will write the script here.

# This is our main script.
using { /Fortnite.com/Devices }
using { /Verse.org/Simulation }

# This is our Scoreboard script.
Scoreboard := class(creative_device):
    # This is the button we dragged into the island.
    # We connect it in the editor.
    @editable
    ClickButton: button_device = button_device{}

    # This is the HUD Controller.
    # It is the tool that talks to the screen.
    # @editable means we can see it in the editor.
    @editable
    MyHUD: hud_controller_device = hud_controller_device{}

    # This is our variable.
    # It is a box for our score.
    # It starts at zero.
    # var means we can change it later.
    var CurrentScore: int = 0

    # This function runs when the game starts.
    OnBegin<override>()<suspends>: void =
        # We connect our button to a function.
        # When the button is clicked, run this code.
        # Note: button_device.InteractedWithEvent passes the agent who clicked.
        ClickButton.InteractedWithEvent.Subscribe(OnButtonClicked)

    # This function runs when the button is clicked.
    # It receives the agent (player) who clicked the button.
    OnButtonClicked(Agent: agent): void =
        # First, we change the score.
        # We add one to the current score.
        set CurrentScore += 1

        # Now we tell the HUD to update.
        # We pass the agent and the new score to the HUD.
        # Note: hud_controller_device.UpdateAffectedClass sets the affected class on the HUD.
        MyHUD.UpdateAffectedClass(Agent)

        # We also print it to the debug log.
        # This helps us see if it works.
        Print("Score is now: {CurrentScore}")```

Let's look at the important parts.

The line `MyHUD: hud_controller_device = hud_controller_device{}` creates our tool. It is like buying a new paintbrush. You have it, but you haven't painted yet.

The line `var CurrentScore: int = 0` creates our box. `int` means "integer". It is a whole number. No decimals. Just 1, 2, 3. It starts at zero.

The line `ClickButton.InteractedWithEvent.Subscribe(OnButtonClicked)` is magic. It says: "Wait for the click. When it happens, run `OnButtonClicked`." This is called an **event**. An event is something that *happens* to your game.

Inside `OnButtonClicked`, we do two things. We add one to the score. Then we call `MyHUD.SetCounterValue`. This tells the HUD: "Show this number on the screen."

## Try It Yourself

Great job! You built a working scoreboard. Now, let's make it cooler.

**Challenge:** Make the score turn red when it reaches 10.

**Hint:** You can use an `if` statement. It checks a condition. Like this:
`if (CurrentScore = 10) { ... }`

Inside the curly braces, you can change the color of the text. Look up how to change text color in the HUD Controller. You can do it!

## Recap

You learned how to use the HUD Controller. It shows information on the screen. You used a variable to store the score. You used an event to catch button clicks. You updated the screen with new data. You are now a game maker! Keep building. Keep coding. Have fun!

## References

*   https://dev.epicgames.com/documentation/en-us/fortnite/verse-starter-07-final-result-in-unreal-editor-for-fortnite
*   https://dev.epicgames.com/documentation/en-us/fortnite/verse-starter-06-managing-the-game-loop-for-in-unreal-editor-for-fortnite
*   https://dev.epicgames.com/documentation/fortnite/verse-starter-06-managing-the-game-loop-for-in-unreal-editor-for-fortnite
*   https://dev.epicgames.com/documentation/fortnite/verse-starter-07-final-result-in-unreal-editor-for-fortnite
*   https://dev.epicgames.com/documentation/en-us/fortnite/title-sequence-1-coding-the-verse-device-in-unreal-editor-for-fortnite