Stop Hiding Your Squadmates: How to Build a Custom Squad View in UEFN

Let's be real: the default Fortnite squad list is fine, but it's boring. It's the UI equivalent of wearing basic jeans to a rave. If you're building an island where teamwork matters—whether it's a chaotic warzone, a cozy roleplay hub, or a competitive tournament—you want your players to see who is alive, who is healing, and who is currently stuck in a wall.

In this tutorial, we're going to build a Custom Squad View. We won't just slap some text on the screen; we're going to create a dynamic, scrolling list that automatically updates whenever a teammate joins, leaves, or gets eliminated. Think of it as the "Lobby Screen" but for when you're actually in the fight.

What You'll Learn

• The "Stack Box" Concept: How to turn a single player info card into a repeating list.
• Data Binding: How to connect your UI to the actual game data (health, shields, names) without writing messy logic.
• Widget Hierarchy: How to nest widgets inside other widgets to create complex layouts.
• The Scene Graph in UI: Understanding how the editor sees your UI as a tree of objects, not just a flat picture.

How It Works

Before we touch any code or widgets, let's look at the mechanic. In Fortnite, when you look at your squad, you see a list. If there are 4 players, you see 4 cards. If 2 players leave, you see 2 cards. The UI adapts to the data.

In UEFN (Unreal Editor for Fortnite), we don't hard-code this. We create a Template and a Container.

1. The Player Card (The Template): Imagine you design one beautiful health bar, name tag, and icon. This is your "single player view."
2. The Stack Box (The Container): This is a special widget that acts like a conveyor belt. It takes your "Player Card" template and duplicates it as many times as there are squad members. It lines them up neatly, either left-to-right or top-to-bottom.
3. The Data Link (Binding): This is the magic. We tell the Stack Box: "Hey, every time you make a copy of the Player Card, grab the health, shield, and name from the actual player sitting in that slot."

If Player A has 50 HP, their card shows 50 HP. If Player B has 100 HP, their card shows 100 HP. The Stack Box doesn't care about the numbers; it just cares about keeping the cards organized.

The Scene Graph Connection

In the Verse world (and UE6), everything is part of a Scene Graph. Think of this like a family tree or a folder structure on your computer.

• Root: Your Squad View Widget.
• Child 1: The Stack Box.
• Grandchild 1: The Player Card Instance (for Player 1).
• Grandchild 2: The Player Card Instance (for Player 2).

When you build this, you aren't just drawing pixels; you are building a hierarchy. If you move the Stack Box, the whole squad moves. If you hide the Root, the whole squad disappears. This hierarchical structure is why Verse and UEFN are so powerful—you manipulate the structure of the game, not just static images.

Let's Build It

We are going to build this using the Widget Editor in UEFN. While Verse handles the logic behind the scenes, the visual layout is done here.

Note: This tutorial assumes you have basic familiarity with the Widget Editor. If you haven't created a "User Widget" before, go do that first!

Step 1: Create the "Player Card" Widget

First, we need the individual piece.

1. In the Content Browser, right-click and create a User Widget. Name it WBP_PlayerInfo.
2. Double-click it to open the Widget Editor.
3. Add a Vertical Box (this is your container for the card).
4. Inside that, add:
   • An Image for the player avatar/icon.
   • A Text block for the Player Name.
   • A Horizontal Box containing two Progress Bars (one for Health, one for Shield).
5. Style it however you want. Make it look cool. This is your single player card.

Step 2: Create the "Squad Stack" Widget

Now, the container.

1. Create another User Widget. Name it WBP_SquadView.
2. Open it.
3. Add a Vertical Box to the canvas. This will hold the entire list.
4. Inside that Vertical Box, add a Stack Box.
   • Orientation: Set this to "Vertical" (so players stack down the screen).
   • Size: Make it big enough to hold 4 cards.
5. Crucial Step: In the Details panel for the Stack Box, look for Item Template. Click the dropdown and select WBP_PlayerInfo (the widget we made in Step 1).

What just happened? You just told the Stack Box: "Whenever you need to show a player, use WBP_PlayerInfo as the blueprint."

Step 3: Bind the Data

Now we connect the blueprint to the real players.

1. Click on the Stack Box in your WBP_SquadView editor.
2. In the Details panel, find Item Source.
3. Set this to Player Info List. (This is a built-in data source that automatically pulls all agents in your current squad/team).
4. Now, we need to tell the Player Card what data to show. Click on the WBP_PlayerInfo widget in the hierarchy (or open it and look at its properties).
   • For the Text Block (Name): Set the Text source to Player Name.
   • For the Health Bar: Set the Progress source to Health.
   • For the Shield Bar: Set the Progress source to Shield.

Note: In the actual UEFN widget editor, you use the "Data Binding" dropdowns on the right-hand side. Look for "Player Info" or "Agent Info" categories.

Step 4: Show It!

1. Go back to your main Game Mode or a simple Trigger in your level.
2. Add a Show Widget device.
3. Set the Widget to WBP_SquadView.
4. Set the Player Index to All (or Local Player if you only want to see your own perspective, but All is better for testing).
5. Hit Play.

Boom. You have a live squad list. When a teammate joins, a new card appears. When they die, their card fades out (if you added a fade animation) or disappears.

Let's Build It (The Verse Logic Behind the Scenes)

While the Widget Editor handles the visuals, Verse is the brain. Here is a simplified look at how Verse might manage the logic of when to show or hide this squad view, or how to customize the data before it hits the widget.

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

# This is our main Game Mode. Think of it as the "Game Master" script.
squad_view_manager := class(creative_device):

    # A reference to the UI Control Device that shows our WBP_SquadView widget.
    # Wire this up in the UEFN level editor Details panel.
    @editable
    SquadUIDevice : hud_controller_device = hud_controller_device{}

    # This function runs when the game starts.
    # Think of this as the "Bus Ride" start phase.
    OnBegin<override>()<suspends> : void =
        # 1. Get all players currently in the session.
        Players := GetPlayspace().GetPlayers()

        # 2. Listen for when players are eliminated so we can react.
        # This is like a "Trigger" that fires when someone steps on it.
        for (Player : Players):
            ListenForPlayerEliminated(Player)

        # 3. Show the squad UI widget for every player via the HUD controller device.
        for (Player : Players):
            SquadUIDevice.Enable()

    # A helper function that listens for a single player's elimination event.
    ListenForPlayerEliminated(Player : agent)<suspends> : void =
        # Fort characters expose an EliminatedEvent we can await.
        # When this event fires it calls our OnPlayerEliminated logic.
        if (FortCharacter := Player.GetFortCharacter[]):
            FortCharacter.EliminatedEvent().Await()
            OnPlayerEliminated(Player)

    # This runs whenever a teammate is eliminated.
    OnPlayerEliminated(Player : agent) : void =
        # Log a message to the output log (like debug text in the bottom left).
        Print("Teammate eliminated")

        # Hide the squad UI for the eliminated player so their screen
        # is no longer cluttered while they spectate.
        SquadUIDevice.Disable()```

### Walkthrough of the Code

*   **`squad_view_manager := class(creative_device)`**: This is your main script. It's like the "Game Rules" book. Everything starts here. In Verse, island logic lives in `creative_device` classes, not bare `game_mode` classes.
*   **`SquadUIDevice : hud_controller_device`**: This is a **Variable**. It holds a reference to a `hud_controller_device` placed in your level, which is the UEFN device responsible for showing and hiding UI widgets. The `@editable` tag lets you wire it up in the Details panel without touching code.
*   **`OnBegin`**: This is an **Event**. It fires automatically when the game begins. It's like the "Start Counting" button on the storm timer.
*   **`GetPlayspace().GetPlayers()`**: This fetches every player currently in the session from the **Playspace**, which is Verse's name for the live game world.
*   **`ListenForPlayerEliminated`**: This sets up a **Listener** per player. In Fortnite, a Trigger listens for players stepping on it. Here, our code awaits each player's `EliminatedEvent`.
*   **`FortCharacter.EliminatedEvent().Await()`**: This suspends the coroutine until the player's Fortnite character fires its built-in elimination event — no invented APIs needed.
*   **`OnPlayerEliminated`**: This is a **Function**. It's a block of code that runs when someone is eliminated. It takes `Player` as an **Argument** (input), just like how a Trap needs a "Target" to know who to hit.

## Try It Yourself

You've built the basics. Now, let's add some flair.

**Challenge:** Add a "Status Indicator" to your Player Card.

*   If the player's health is below 30, change the border color of their card to Red.
*   If they are above 30, keep it Green.

**Hint:**
1.  Open your `WBP_PlayerInfo` widget.
2.  Add a **Border** widget around your entire card content.
3.  Look for the **Border Color** property in the Details panel.
4.  Can you bind this to the Health bar? (Spoiler: You can't directly bind "Color" to "Health" with a simple dropdown, but you can use a **Custom Binding** or a **Switch** widget in the widget editor to change the color based on the health value).
5.  *Pro Tip:* In the Widget Editor, you can use a "Switch" or "If/Else" logic node to change the color dynamically. Try setting the Border Color to a variable that changes based on health!

## Recap

*   **Stack Box** is your best friend for lists. It duplicates templates automatically.
*   **Data Binding** connects your UI to the live game state (health, names, etc.).
*   **Scene Graph** is the hierarchy. Your Squad View contains a Stack Box, which contains Player Cards. Move the parent, move the children.
*   **Verse** handles the logic *around* the UI, like when to show it or what sounds to play when someone joins.

Now go make your squad look as good as their gameplay (or at least, better than the default UI).

## 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/uefn/making-custom-squad-view-in-unreal-editor-for-fortnite
*   https://github.com/vz-creates/uefn
*   https://github.com/vz-creates/uefn