Build a Cool Squad View in Fortnite

Welcome, builders! Have you ever looked at the squad list in Fortnite and thought, "I wish that looked cooler"? You can make your own custom squad view! It shows your team's names and health in a style you design. We will use Verse to control the look. You will make something playable and unique.

What You'll Learn

• What a Widget is (the picture on your screen).
• How a Stack Box lines up items like cards in a hand.
• How to use a Viewmodel to grab player data.
• How to connect Verse code to your UI design.

How It Works

Imagine you are building a tower with blocks. You want to stack them neatly. A Stack Box is like a special tray. It takes items and lines them up in a row. It can go left-to-right or top-to-bottom.

In Fortnite, we use this tray to show your squad. Each player gets one "slot" in the tray. We call this slot a Widget. A widget is just a small picture that shows info. It might show a name, a health bar, or a portrait.

To get the info, we need a source. This is called a Viewmodel. Think of a viewmodel as a magic mirror. It reflects what is happening in the game. It tells the widget who is playing and how much health they have.

We will use Verse to tell the game: "When the game starts, show this stack box." Then, the stack box uses the viewmodel to fill in the names and health bars automatically. You just design the look!

Let's Build It

First, you need to create your design in UEFN.

1. Create a User Widget.
2. Add an Overlay.
3. Add a Stack Box inside the overlay.
4. Add a Viewmodel for "Team/Squad Player Info List."

Now, we need Verse code to turn it on. This code is simple. It just says "Enable this UI."

using /Fortnite.com
using /UnrealEngine.com

# This is the main script for our squad view.
# It connects to the game world.
script SquadViewScript:

    # This variable holds our UI widget.
    # It is a "variable" because it changes (it gets set once).
    var my_ui: widget = external {}

    # This function runs when the game starts.
    # "OnBegin" is an event that fires at the start.
    OnBegin<override>()<suspends>: void =
        # We tell the game to show our UI.
        my_ui.SetVisibility(true)
        
        # We log a message to help us debug.
        print("Squad view is now visible!")

Walkthrough

Let’s look at the code line by line.

1. using /Fortnite.com: This brings in Fortnite tools. It is like grabbing your favorite toy from the shelf.
2. var my_ui: widget: This creates a slot for our UI. We call it my_ui. It is empty until we set it in the editor.
3. OnBegin<override>(): This is a special function. The game calls it when the match begins.
4. my_ui.SetVisibility(true): This makes the widget appear. If it was false, it would be hidden.

In the editor, you must link the script to the widget. Select your device or actor. Find the my_ui variable in the details panel. Drag your User Widget into that slot. Now they are connected!

Try It Yourself

You have the basics! Now, let’s make it fancier.

Challenge: Add a second Stack Box below the first one. Make it show the "Enemy Squad" instead of your team.

Hint: You need a different Viewmodel. Look for one that says "Enemy Player Info List." Drag it into a new Stack Box. Then, add a second variable in your Verse script for the enemy UI.

Recap

You built a custom squad view! You learned that a Stack Box lines up items. You learned that a Viewmodel provides the data. You used Verse to turn the UI on. Great job, coder!

References

• https://dev.epicgames.com/documentation/en-us/fortnite/making-a-custom-squad-view-in-unreal-editor-for-fortnite
• https://dev.epicgames.com/documentation/en-us/fortnite/making-custom-health-and-shield-bars-in-unreal-editor-for-fortnite
• https://dev.epicgames.com/documentation/en-us/fortnite/tmnt-custom-ui-player-info-in-unreal-editor-for-fortnite
• https://github.com/vz-creates/uefn
• https://github.com/vz-creates/uefn