Track Player Attributes

The combat system provides Viewmodels to support your user interface. Let's get started with that topic, by creating some progress bars that will track the player's main attributes: Health, Stamina, and Magic.

Review your Player attributes

Open your Combat Attribute Data Table for the Player. This was configured before, while configuring GAS.
Check your Health Stamina, and Magic, to ensure they have valid values.

Create the Player Attributes Widget

Create a new widget, based on NinjaCombatBaseWidget.
In the Designer tab, add a Vertical Box and three Progress Bars, with Size boundaries.
In the Viewmodels tab, add a ViewModel_CombatVitals entry. In the Details panel, set the Creation Type to Create Instance.
Feel free to create any design that is appropriate for your game, but make sure to use a Progress Bar for now.
If you cannot see the Viewmodel or View Bindings tab, enable them in the Window menu.
In the View Bindings tab, set the following bindings
- Health Bar: HealthBar::Progress Value ← ViewModel_CombatVitals::Health Percent
- Stamina Bar: StaminaBar::Progress Value ← ViewModel_CombatVitals::Stamina Percent
- Magic Bar: MagicBar::Progress Value ← ViewModel_CombatVitals::Magic Percent
Go to the Graph tab, and implement the Construct event, setting the Player Pawn as the Combat Actor.

Create the Gameplay Widget

Create a new User Widget that will be used for the main Gameplay UI.
Add the Player Attributes Widget. In this example it will be anchored in the top-left corner, with a margin.

Create the Player HUD

Create a new HUD, extending the HUD class.
Implement the BeginPlay event as follows.
Add the new HUD to your Game Mode.

Test everything

Press Play and notice your progress bars are filled based on the attribute values.
Modify your initial health, magic or stamina and see these changes in your UI.

Last modified: 29 December 2024