How to Show Player Icons in UEFN

Have you ever wondered how Fortnite shows your character's face in the corner of the screen? It looks like magic! But it is just smart programming. In this tutorial, we will learn how to make a custom Player Avatar Icon. You will create a small square that shows the player's skin. It is like a digital trading card.

What You'll Learn

• What a Scene Graph is. Think of it as a family tree for your game objects.
• How to use Widgets. These are the screens you see on top of the game.
• How to Bind data. This means connecting a variable (like a skin) to a visual element.

How It Works

Imagine you are building a LEGO house. The Scene Graph is the list of all the LEGO bricks. Some bricks are parents. Some are children. A child brick sits inside a parent brick.

In Fortnite, the HUD (Heads-Up Display) is like a picture frame. Inside that frame, we place a Widget. A Widget is a special screen that stays on top of the game world.

We want to show the player's face. The game already knows which skin the player chose. This is data. We need to take that data and put it inside our Widget. We do this by binding them together.

Think of binding like a string. One end is tied to the player's skin. The other end is tied to the picture box in your UI. When the player changes skins, the string pulls the new skin into the box.

We will use a Material Instance. This is like a paint can. We pick a color or an image, and the game uses it to paint the screen.

Let's Build It

We will build a simple UI that shows the player's avatar. We will use the Widget Component in UEFN. This is the easiest way to make custom UI.

Here is the plan. We will create a widget. We will add a "Profile Image" to it. We will bind that image to the player's avatar.

// This is a simple Verse script to help us understand the logic.
// In UEFN, we mostly use the Visual Scripting or Widget Editor.
// But here is how the data flows in Verse.

using { /Fortnite.com/Devices }
using { /Fortnite.com/UI }
using { /Fortnite.com/Characters }
using { /UnrealEngine.com/Temporary/UI }
using { /Verse.org/Simulation }
using { /UnrealEngine.com/Temporary/SpatialMath }

# This is our main device. It holds our UI.
PlayerAvatarDevice := class(creative_device):

    # This function runs when the game starts.
    OnBegin<override>()<suspends>: void =
        # Get all players currently on the island.
        AllPlayers := GetPlayspace().GetPlayers()

        # Loop over every player and show their avatar UI.
        for (Player : AllPlayers):
            ShowAvatarUI(Player)

        Print("Avatar shown!")

    # Helper function: build and display the avatar widget for one player.
    ShowAvatarUI(Player : player): void =
        # GetFortCharacter[] fails if the player has no character yet,
        # so we use 'if' to safely unwrap the optional result.
        if (FortChar := Player.GetFortCharacter[]):
            # GetDisplayName is on the sidekick_cosmetic_definition, accessed via the agent.
            # We get the agent from the fort_character, then get the display name.
            if (Agent := FortChar.GetAgent[]):
                DisplayName := Agent.GetDisplayName()
                
                # Create a simple text widget as a stand-in for the avatar icon.
                # note: Verse has no built-in PlayerAvatarIcon widget at runtime;
                # the real avatar image binding is done in the UEFN Widget Editor
                # using the HUDPlayerInfoViewModel Brush binding (see tutorial body).
                AvatarLabel := text_block:
                    DefaultText := "Avatar: " + DisplayName
                    # note: GetDisplayName() returns the player's display name string.

                # Wrap the label in a canvas so it can be positioned on screen.
                AvatarCanvas := canvas:
                    Slots := array:
                        canvas_slot:
                            Widget := AvatarLabel
                            Anchors := anchors:
                                Minimum := vector2{X := 0.05, Y := 0.05}
                                Maximum := vector2{X := 0.05, Y := 0.05}
                            Offsets := margin{Top := 0.0, Left := 0.0,
                                              Bottom := 0.0, Right := 0.0}
                            Alignment := vector2{X := 0.0, Y := 0.0}
                            SizeToContent := true

                # Add the widget to this specific player's HUD.
                if (PlayerUI := GetPlayerUI[Player]):
                    PlayerUI.AddWidget(AvatarCanvas)```

Let's walk through this code.

1.  **`PlayerAvatarDevice := class(creative_device)`**: This creates a new kind of device. It is like a new LEGO brick type.
2.  **`GetPlayspace().GetPlayers()`**: This asks the island, "Who is playing?" and returns everyone at once.
3.  **`OnBegin`**: This runs when the island starts. It is the "start" button.
4.  **`Player.GetFortCharacter[]`**: This fetches the in-game character for a player. The `[]` means it can fail safely, so we wrap it in `if`.
5.  **`text_block`**: A real Verse UI widget that displays text — used here as a stand-in because avatar image binding is handled in the Widget Editor, not in Verse code directly.
6.  **`GetPlayerUI[Player]`**: Retrieves the HUD layer for one specific player so the widget appears only for them.
7.  **`PlayerUI.AddWidget(AvatarCanvas)`**: This tells the player's HUD, "Put this widget here." That is the **binding** in action!

In UEFN, you do not write this code by hand. You use the **Widget Editor**. You drag a **Profile Image** widget. You bind its **Brush** to the **Player Avatar Icon**. It is the same idea!

## Try It Yourself

Now it is your turn to build it!

**Challenge:** Create a simple UI that shows a circle around the player's avatar.

**Hint:**
1.  Open the **Widget Editor** in UEFN.
2.  Add a **Profile Image** widget.
3.  Look for the **Brush** property.
4.  Bind it to the **Player Avatar Icon** from the **HUDPlayerInfoViewModel**.
5.  Add a **Border** widget around it to make it look cool!

If you get stuck, remember the string analogy. Tie one end to the skin, and the other end to the picture box.

## Recap

You learned how to show a player's face in your game. You used the **Scene Graph** to organize your widgets. You learned about **Widgets** as on-screen screens. You used **Binding** to connect data to visuals. Great job! You are now a UI wizard.

## References

*   https://dev.epicgames.com/documentation/en-us/fortnite/tmnt-custom-ui-player-info-in-unreal-editor-for-fortnite
*   https://dev.epicgames.com/documentation/en-us/uefn/tmnt-custom-ui-player-info-in-unreal-editor-for-fortnite
*   https://dev.epicgames.com/documentation/en-us/uefn/making-custom-backplates-in-unreal-editor-for-fortnite
*   https://dev.epicgames.com/documentation/en-us/fortnite/making-custom-backplates-in-unreal-editor-for-fortnite
*   https://dev.epicgames.com/documentation/en-us/fortnite-creative/using-player-counter-devices-in-fortnite-creative