Making a Custom Squad View

Creating a custom squad view builds on the single player nameplate widget design to create a squad view. The Stack Box widget transforms the player view from single player to squad by reproducing the single player info widget using the Viewmodel.

The Stack Box is a container that arranges the single player widget copies in a linear way, either left-to-right or top-to-bottom.This creates a consistent look for the squad.

For this example, the squad view is stacked up and down.

Player Information Widget

To use the player information from team members during a game, the Player_Info widget must be set using the Device - HUD Controller Player Info Viewmodel. This setting creates separate widgets for the Controlling Player and their Squad/Team, using properties in Device - HUD Controller Player Info Viewmodel for each widget.

You can continue using the settings to set up the bindings from the Backplate and Health and Shield tutorials to bind the necessary pieces of player information.

Without the proper setup for the Player_Info widget, you will get error messages in the compiler.

Below are the steps to create a Squad stack widget that binds the Team/Squad Player Info List viewmodels to Player Icon, Player Name, health, and shields.

Create a User Widget

1. Follow the steps in UI Pop-Ups to create a User Widget.

2. Name the User Widget Squad_View.

   

3. Double-click the User Widget thumbnail to open the Event Editor in Unreal Motion Graphics (UMG).

The Widget Editor is where you plan and layout your UI design for the squad view. Once you've decided on a layout, you can add materials to give your UI a custom look.

You should now have two user widgets in your Content Browser — one called Player_Info and a second called Squad_View.

Create the Squad Layout

It’s best practice to bring a fully functional single Player_Info widget into a Squad_View widget using a Stack Box as a container. This provides a consistent design by reproducing the single player design inside the Stack Box and repeating the design in a top-to-bottom direction or let-to-right direction.

You’ll add the single player widget to the viewmodel, then arrange the layout in the Event Graph through the Stack Box.

Do the following:

1. Drag an Overlay under the Squad_Info and name it Container_Overlay.

2. Resize Container_Overlay to 2560 x 1440. This is the optimal size for all screens.

   

3. Nest a Stack Box under the Container_Overlay.

4. In the Details panel, change the following settings for the Stack box:

   1. Padding = 25

   2. Orientation = Vertical

   

   The Stack Box has 25 px of padding from the screen edge.

5. From the Main Menu Bar, select Window > Viewmodels to open the Viewmodel panel.

   

6. Click +Viewmodel, then select Device - HUD Controller Team/Squad Player Info List > Select. This creates a viewmodel for the HUD Controller device.

7. From the Details panel, click +Add Viewmodel Extension. This opens options that provide a way to dynamically generate the squad widget inside the Squad_View widget based on the number of players in your team/squad.

   

   

   Before +Add Viewmodel Extension

   After +Add Viewmodel Extension

8. From the Entry Widget Class setting, select your Player_Info widget from the dropdown and set Entry ViewModel to HUDPlayerInfoListViewModel.

9. Expand the Slot Template option and adjust the spacing between each player widget. Add or remove widgets, and change the alignment. Use these options to visualize how the widgets will look in-game.

   If your UI elements are too large for the available space, go back into the Player_Info widget and adjust the size of your Image widgets down to fit the Squad_View widget.

Next, you'll add bindings to make all the UI functional for squads.

Squad Bindings

To bind a squad’s information to the Squad_View widget, you need to reference the squad member information through view bindings. The bindings tell the widget what information it needs to grab from the bound devices, and for which player. The information for each player is then populated in the UI through the HUD Controller device.

1. Select the Stack Box in the Hierarchy panel, then open the View Bindings and select +Add Widget. This adds the Stack Box as a widget to the View Bindings panel.

2. Select Squad_View > Select from the Widget dropdown. This selects the squad widget and all its internal widgets for binding.

   

3. In the Squad_View field on the left, select Squad_View > StackBox > StackBox Viewmodel > Set Items > Select. This passes the array of player info viewmodels into the newly set up extension with a function called Set Items.

   If you don't see the Set Items function at this step, compile the widget and check again.

   

   If PlayerInfoStack_Viewmodel_Extension doesn't appear in your list, press Compile and it should appear.

4. In the empty field to the right, select Squad_View > HUDPlayerInfoListViewModel > Team/Squad Player Info Array > Select. This passes the array of player info viewmodels into the newly set up extension with a function called Set Items.

   

5. Click Compile. Your widget is ready to be added to the Hud Controller device.

Add your widget to the HUD Controller and playtest your project.

HUD Controller Device Setup

There are a few essential HUD Controller settings to change. You'll replace these default Fortnite HUD elements with your own widget design.

1. Drag a HUD Controller device into your project and leave the device selected to populate its settings in the Details panel.

2. In the Details panel, set the following options:

   1. Show HUD = Yes

   2. Player Info Widget Override = Name of Your widget

3. Click the Save icon to save your changes.

   

4. Select Launch Session to playtest your custom UI.

   

Playtest with two or more players to make sure the layout works and looks right for the island you created.