1. [Developer](/)
2. [Documentation](/documentation/ "Documentation")
3. Fortnite
* [Unreal Engine](/documentation/en-us/unreal-engine)
* [Fortnite](/documentation/en-us/fortnite)
* [MetaHuman](/documentation/en-us/metahuman)
* [Twinmotion](/documentation/en-us/twinmotion)
* [RealityScan Mobile](/documentation/en-us/realityscan-mobile)
* [Fab](/documentation/en-us/fab)
4. [Fortnite Documentation](/documentation/en-us/fortnite/fortnite-documentation "Fortnite Documentation")
5. [Game Collections](/documentation/en-us/fortnite/game-collections-in-fortnite "Game Collections")
6. [Teenage Mutant Ninja Turtle Islands](/documentation/en-us/fortnite/teenage-mutant-ninja-turtle-islands-in-unreal-editor-for-fortnite "Teenage Mutant Ninja Turtle Islands")
7. [TMNT Arcade Template](/documentation/en-us/fortnite/tmnt-arcade-template-in-unreal-editor-for-fortnite "TMNT Arcade Template")
8. Custom UI: Player Info
Custom UI: Player Info
======================
Learn to create custom player information UI elements used in the TNMT Arcade template.
On this page
In this section, you will learn how to create fully customized UI overlays for your games by following the steps to recreate the TMNT Arcade Template player UI.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/8deb8ad2-24bd-480c-b8ce-fe9cfaaa28da?resizing_type=fit)
The basic breakdown of the steps is:
1. [Set up the look of your custom widgets.](https://uefn-docs.yuzulabs.dev/documentation/en-us/fortnite/custom-ui-player-info-in-unreal-editor-for-fortnite)
2. [Add view bindings to each interactive widget element.](https://uefn-docs.yuzulabs.dev/documentation/en-us/fortnite/custom-ui-player-info-in-unreal-editor-for-fortnite)
3. [Create a player info stack for multiple concurrent players.](https://uefn-docs.yuzulabs.dev/documentation/en-us/fortnite/custom-ui-player-info-in-unreal-editor-for-fortnite)
4. [Set up the HUD Controller device to display the custom UI.](https://uefn-docs.yuzulabs.dev/documentation/en-us/fortnite/custom-ui-player-info-in-unreal-editor-for-fortnite)
Download the [UI Material Lab](https://www.unrealengine.com/marketplace/product/ui-material-lab) texture pack for free and experiment with your own UI configurations!
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/a3ba8302-5b46-4e50-a70d-83fc94db659c?resizing_type=fit)
UI Material Lab
_Click image to expand._
Let’s dive right in!
Set Up Custom Widgets
---------------------
In your Content Browser, open the **UI** folder, then select **Widgets** and open the **PlayerInfoBlock** widget Blueprint.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/8a5011ab-18fe-44cc-9652-14c403eaffe2?resizing_type=fit)
On the left side, you will see the **Hierarchy** tab, which works just like the Outliner from the main editor window and displays the various components of the finished widget.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/f0706a34-f4fa-427e-a0ee-ef7c8bb3ee96?resizing_type=fit)
### Backplate
The top section is made up of three backplate images, containing gray tinted background, a white outline and an orange outline.
When importing images to use for your UI, make sure to choose **Texture Group** to **UI** and **Compression Settings** to **UserInterface2D(RGBA8)**.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/5befc5e2-b3af-40d8-b19b-b398fa9f65a7?resizing_type=fit)
### Player Name
This component is made up of two elements, an **Active Player name**, and an **Inactive Player name**, which will show up when the player is alive, eliminated or disconnected in game.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/5b64373d-1199-4935-aac4-8bb7b774e4ed?resizing_type=fit)
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/42774736-48bb-4801-b0a8-14971a08556e?resizing_type=fit)
Pick two distinct colors that will inform the players who on their team is currently active and who is eliminated.
For the Active player name, set the **Visibility** to **Visible**, and for Inactive, set it to **Hidden**. This will be shown only under certain conditions.
Set the **Width Override** to **220.0** so that longer player names do not overlap with the player avatar icon.
### Player Avatar Icon
This component shows the player’s character portrait based on their chosen skin in game.
The component is bound to a material instance called **MI\_UI\_PlayerCard**, found under the **UI** > **Material Instances** folder.
You can customize this material instance to your liking by changing the settings in the Details panel. Try importing your own image and adding some outline colors!
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/14120c1b-658e-47f8-84b4-5ec9d2f62f2e?resizing_type=fit)
In this example, the chosen image is an empty transparent image that will be connected later to the character skin.
### Health
This component contains the regions that will display the player’s health and shield levels.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/46fbd73a-72c3-4968-8f34-871f4049185f?resizing_type=fit)
On the parent level, you can see the size box that determines how large the overall region is allowed to be.
Next is the health backplate image, called **MI\_UI\_Health\_Backplate**. This UI material is also provided under **Fortnite** > **UI** > **Materials**. It is very customizable and can provide lots of options for showing the player’s health bar right out of the box.
On top of the backplate is a stack box made up of two components: a health bar and a shadow called **Health\_Image** and **Health\_Shadow**, respectively.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/eb13d031-5636-4c65-bae1-b9a609048e7d?resizing_type=fit)
The Health\_Image is a customizable progress bar UI material. If you open up the material instance, you can zoom in by changing the **Preview Size**.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/64dd37fd-8908-4dc0-8152-3ad1d6e8fbbb?resizing_type=fit)
Try changing some of the settings in the Details panel to see how they affect the existing material.
Since scalar parameter values (the progress bar fill state) range from **0** to **1**, and Fortnite’s health and shield values typically range from **0** to **100**, it is important to set the **Multiplier** to **0.01** so that health and shield values are correctly displayed to players.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/2d757288-94cd-45e1-8922-56b516790c37?resizing_type=fit)
The **Health\_Shadow** bar is a simple shaded overlay added for aesthetic purposes.
### Shield
The shield component is made up of a **Shields\_Container** background that shows the empty shield area in dark gray, and a **Shields\_Image** that contains the progress bar UI material.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/f0faf9f7-1599-4699-9dab-268c1c042967?resizing_type=fit)
The **Shield\_Image** uses a basic progress bar material instance, which is a simplified version of the **Health\_Image** material.
Add View Bindings
-----------------
Now that you’ve built up the core components of the UI for your game, let’s practice adding view bindings that will allow each of the components to update based on data they receive from a live session.
### Player Name
To get a player name to appear in the correct field, follow these steps:
1. Open the **View Bindings** tab by clicking **Window** \> **View Bindings** or by selecting **View Bindings** on the bottom of the screen and docking it.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/e757c2dd-706b-4b5b-996d-5bdf92d64308?resizing_type=fit)
To see the **HUDPlayerInfoViewModel** list of view bindings:
1\. Open the Viewmodels window by selecting **Window** \> **Viewmodels**.
1\. Go to **+Viewmodel** and select **HUD - Player Info Viewmodel Base**.
1\. Click on **Device - HUD Controller Player Info Viewmodel** and click **Select**.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/779335df-e32a-4711-b9e9-74fe0a0155ad?resizing_type=fit)
2. Select **NameActive\_Text** from the **Hierarchy** list or by clicking the Playername area of the UI Preview screen.
3. Click **\+ Add Widget NameActive\_Text** and select **Text** from the dropdown menu.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/b7eca3de-cf34-41fa-a2cf-e7da06ae6899?resizing_type=fit)
4. In the empty field to the right, select **HUDPlayerInfoViewmodel** and **Player Name** from the ensuing dropdown.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/76570964-b8ad-49fd-9074-4a66ea26808e?resizing_type=fit)
5. The final binding should look like this:
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/cc613119-5d45-4bd9-81f2-7ac9413b3ac2?resizing_type=fit)
6. Repeat steps **1** to **3** for the **NameInactive\_Text** element.
7. To modify visibility settings on the inactive name, add a new widget to **NameInactive\_Text** and select **Visibility** from the dropdown.
8. Click the empty field to the right, and select **Conversion Functions** > **To Visibility (Boolean)**.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/7a7be88e-272e-48e1-9c36-3a2702056469?resizing_type=fit)
9. Selecting this option causes three new fields to pop up. Click the **Link** icon next to **Is Visible**. From the menu, select **HUDPlayerInfoViewModel** and **Is Eliminated**.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/5e78334d-8c18-4e4a-b8c2-3b52a17c58d9?resizing_type=fit)
10. Set **True Visibility** to **Not Hit-Testable (Self Only)** below. Leave **False Visibility** on **Collapsed**. When the player gets eliminated or disconnects, the name will replace the **NameActive\_Text**, but when the player is alive, it will remain collapsed.
11. The final **NameInactive\_Text** binding should look like this:
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/af260b22-a354-4d54-b56d-42831ef37367?resizing_type=fit)
12. Press **Compile** to submit the changes, and you’re done with the player names!
### Player Avatar Icon
1. Choose **Profile\_Image** from the **Hierarchy**, or click the player icon area on the UI preview screen.
2. Click **\+ Add Widget Profile\_Image**.
3. Go to **Profile\_Image** > **Brush** and press **Select**. This binding is essentially looking at the selected Brush setting from the **Profile\_Image** details panel.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/f2f5bc6f-1474-4d7a-841c-5932cb8983c1?resizing_type=fit)
4. Click inside the empty field to the right, and select **Conversion Functions** > **Set Texture Parameter**.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/2fa086ff-e43e-4ce1-88fb-f037aee161b9?resizing_type=fit)
5. Type **Texture** in the **Parameter Name** field. To find the name of this field, open the player avatar material instance.
For **Set Vector/Scalar/Texture Parameter** functions, make sure the material instance parameter names are an exact match to the Parameter Name field.
6. Click on the Link icon next to the **Value** field and select **HUDPlayerInfoViewModel** > **Player Avatar Icon**.
7. The finalized binding should look like this:
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/2fa03418-9506-4b3e-9432-436563cbcbf4?resizing_type=fit)
### Health and Shield
1. Choose **Health\_Image** from the **Hierarchy**, or click the health bar area on the UI preview screen.
2. Click **\+ Add Widget Health\_Image**.
3. Go to **Profile\_Image** > **Brush** and press **Select**.
4. Click inside the empty field to the right, and select **Conversion Functions** > **Set Scalar Parameter**.
5. Type **Progress** in the **Parameter Name** field. To find the name of this field, open the player avatar material instance.
6. Click the **Link** icon next to **Value** and select **HUDPlayerInfoViewModel** > **Health**.
1. The progress gives a percentage of the player’s remaining health, and since the **Multiplier** has been set to 0.1, every percentage point will move the progress bar by 1/100th. You can test this by arbitrarily changing the percentage value in the Material Instance to see the progress bar moving.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/bf60c2a8-cd3a-4448-86d2-e24f2b4afd75?resizing_type=fit)
Health Percentage
_Click image to expand._
7. The finalized binding should look like this:
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/a9469e74-0f4f-4586-8757-4c3a4bb9de3e?resizing_type=fit)
8. For the shield bar, Repeat steps 1 to 6, but choose **Shield** instead of **Health**.
9. The finalized binding for Shield should look like this:
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/dee10663-a783-4c19-a61b-8fe0e6c5957c?resizing_type=fit)
10. Press **Compile** to submit the changes.
### Full Widget
This binding ensures that the entire widget displays only after a player is connected to the game.
1. Choose **PlayerInfoBlock\_Overlay** from the **Hierarchy**.
2. Select **\+ Add Widget PlayerInfoBlock\_Overlay**, then choose Visibility from the dropdown menu.
3. Click the empty field to the right, and select **Conversion Functions** > **To Visibility (Boolean)**. Selecting this option causes three new fields to pop up.
4. Click the **Link** icon next to **Is Visible**. From the menu, select **HUDPlayerInfoViewModel** and **Is Disconnected**.
5. Set **True Visibility** to **Collapsed** and **False Visibility** to **Not Hit-Testable (Self Only)**.
6. The final binding should look like this. Press **Compile** to save your changes.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/cea2b617-9fa6-4761-8f18-fae08df935b0?resizing_type=fit)
That’s it, you now have a fully set up UI widget that will display in-game information!
Create a Player Stack
---------------------
This section will show you how to create a user widget that displays additional squad players along with the controlling player.
1. To start off, create a new Widget Blueprint by right-clicking in the Content Browser and selecting **User Interface** > **Widget Blueprint**.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/5e43550a-941b-471f-a1a8-74c412c38f47?resizing_type=fit)
2. Select **User Widget** from the dialog box, and rename it to **HUDInfoStack**.
3. Double-click the User Widget to open a new Editor window.
4. From the **Palette** panel, drag an **Overlay** element into the **Hierarchy** panel to get started.
5. Drag a **Stack Box** to the level below the Overlay, and rename it to **PlayerInfoStack**.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/878bc340-82a7-4f3f-8d4b-5798817b8571?resizing_type=fit)
6. From the Viewmodels panel, press **+Viewmodel** and select a **Device - HUD Controller Team/Squad Player Info List**.
7. Go to the **Details** panel, and press **+Add Viewmodel Extension**. This allows the PlayerInfoStack to accept an Entry Widget Class.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/91473d31-67d1-429f-9b80-524e78d56890?resizing_type=fit)
If you do not see these options, try compiling the widget one more time.
8. For the Entry Widget Class, select the **PlayerInfoBlock** previously created. Below, select **HUDPlayerInfoViewmodel** as the **Entry Viewmodel**.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/6024c401-40dc-4555-8f8a-525ad1b9761a?resizing_type=fit)
9. Under the **Slot Template** section, you can adjust the spacing between each widget and alignment, and preview what a certain number of widgets would look like in game.
_Click gif to expand._
10. In the **View Bindings** panel, click **+Add Widget**, then choose **HUDInfoStack**. Choose **PlayerInfoStack\_Viewmodel\_Extension** and expand it to see **Set Items**, then select it. If **PlayerInfoStack\_Viewmodel\_Extension** doesn't appear in your list, press **Compile** and it should appear.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/d411a557-c87a-4ef0-b7bd-96d2d87f6f9b?resizing_type=fit)
11. In the empty field to the right, select **HUDPlayerInfoListViewModel** > **Team/Squad Players Info Array**. This passes the array of player info viewmodels into the newly set up extension with a function called **Set Items**.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/a48e741c-44be-4be4-92b9-f8a911e364c5?resizing_type=fit)
12. Press **Compile** to save your changes. You are now ready to add these to your game using the **HUD Controller** device.
If you would like to make a widget for the controlling player that is separate from the rest of the squad:
1. Create a new widget for your controlling player and set up the view bindings just like you had previously using the **Device - HUD Controller Player Info Viewmodel**.
2. Bring this widget under the parent widget holding the Stack Box.
3. Create a binding for that widget. In the left field, select **Device - HUD Controller Player Info Viewmodel**. In the right field, select **Device - HUD Controller Team/Squad Player Info List** > **Controlling Player Info**.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/58e13289-b59d-4329-9788-78ae05ccd2b2?resizing_type=fit)
Set Up the HUD Controller Device
--------------------------------
1. Search for the **HUD Controller device** in the Content Browser, and drag it into your scene.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/0c91f6dd-2b2d-4baf-81e9-e235fafff502?resizing_type=fit)
2. In the User Options, choose what you want the player to see, and ensure that **Show HUD** is set to **Yes** and **Show Team Info** is set to **No**.
3. Scroll down to **Player Info Widget Override** and drag the **HUDInfoStack** widget into the empty field. Make sure this is the newly-created stack widget, not the original widget you created.
[](https://uefn-docs.yuzulabs.dev/community/api/documentation/image/dfee2203-3aa8-4755-9b16-11cf9e890a05?resizing_type=fit)
4. Click **Save**.
That’s it! Your fresh UI should now appear when you playtest your game!
Up Next
-------
Next, you will learn about setting up the cameras and controls devices for your side scroller game!
[
TMNT Cameras and Controls
Set up the cameras and controls for a side scroller game using the TMNT Arcade template.
](https://uefn-docs.yuzulabs.dev/documentation/en-us/fortnite/tmnt-cameras-and-controls-in-unreal-editor-for-fortnite)
* [ui](https://uefn-docs.yuzulabs.dev/community/search?query=ui)
* [shield](https://uefn-docs.yuzulabs.dev/community/search?query=shield)
* [character](https://uefn-docs.yuzulabs.dev/community/search?query=character)
* [health](https://uefn-docs.yuzulabs.dev/community/search?query=health)
* [tmnt](https://uefn-docs.yuzulabs.dev/community/search?query=tmnt)
* * *
Ask questions and help your peers [Developer Forums](https://forums.unrealengine.com/categories?tag=fortnite)
Write your own tutorials or read those from others [Learning Library](https://uefn-docs.yuzulabs.dev/community/fortnite/learning)
On this page
* [Set Up Custom Widgets](/documentation/en-us/fortnite/custom-ui-player-info-in-unreal-editor-for-fortnite#set-up-custom-widgets)
* [Backplate](/documentation/en-us/fortnite/custom-ui-player-info-in-unreal-editor-for-fortnite#backplate)
* [Player Name](/documentation/en-us/fortnite/custom-ui-player-info-in-unreal-editor-for-fortnite#player-name)
* [Player Avatar Icon](/documentation/en-us/fortnite/custom-ui-player-info-in-unreal-editor-for-fortnite#player-avatar-icon)
* [Health](/documentation/en-us/fortnite/custom-ui-player-info-in-unreal-editor-for-fortnite#health)
* [Shield](/documentation/en-us/fortnite/custom-ui-player-info-in-unreal-editor-for-fortnite#shield)
* [Add View Bindings](/documentation/en-us/fortnite/custom-ui-player-info-in-unreal-editor-for-fortnite#add-view-bindings)
* [Player Name](/documentation/en-us/fortnite/custom-ui-player-info-in-unreal-editor-for-fortnite#player-name)
* [Player Avatar Icon](/documentation/en-us/fortnite/custom-ui-player-info-in-unreal-editor-for-fortnite#player-avatar-icon)
* [Health and Shield](/documentation/en-us/fortnite/custom-ui-player-info-in-unreal-editor-for-fortnite#health-and-shield)
* [Full Widget](/documentation/en-us/fortnite/custom-ui-player-info-in-unreal-editor-for-fortnite#full-widget)
* [Create a Player Stack](/documentation/en-us/fortnite/custom-ui-player-info-in-unreal-editor-for-fortnite#create-a-player-stack)
* [Set Up the HUD Controller Device](/documentation/en-us/fortnite/custom-ui-player-info-in-unreal-editor-for-fortnite#set-up-the-hud-controller-device)
* [Up Next](/documentation/en-us/fortnite/custom-ui-player-info-in-unreal-editor-for-fortnite#up-next)