Track Enemy Attributes

Now that we created the first Combat Widget, let's create a more advanced one, the Overhead Info. It will be used with the enemy character, to show attributes and status effects.

This is an advanced topic, in a sense that will be leveraging many ways to use UMG Viewmodels, not just binding them directly to widget components, but creating functions to implement more interesting features.

Review your Enemy Attributes

Open your Combat Attribute Data Table for the Enemy.
Check the Health attribute, to ensure it has valid values.

Create the Enemy Overhead Widget

Create a new widget, based on NinjaCombatBaseWidget.
In the Designer tab, add a Vertical Box with a Text Block for the Damage, a Progress Bar for Health, another Progress Bar for the Stagger meter and a Uniform Grid Panel for Status Effects.
Feel free to create any design that is appropriate for your game, but make sure to use the necessary components listed above.
In the Widget Graph, create the following Variables:
- LockedOnTarget: Boolean
- AccumulatedDamage: Float
- DamageTextTimerHandle: Timer Handle
- AutoDisplayTimerHandle: Timer Handle
Implement the Construct and Destruct functions, used to set initial visibility and clean-up timer handles.
Create two Custom Events, that will be implemented later: AddDamage and ResetDamage.
Create a Custom Event, HideOverhead, that resets the damage and collapses the widget.
Create a Function, ShowWidgetFromIncomingDamage, that will show the widget when damage is received.
Create a Function, ResetState, that resets this widget when a new actor is selected.
Create a Function, UpdateStatusEffects, that adds an icon from an active Gameplay Effect, with a valid Combat UI Data.
Create a Function, SetTargetLock, that shows or hides the widget when the player is locking on this target.
Create a Function, SetCriticalDamage, that will set a different color for the damage block, when a critical hit occurs.
Create a Function, SetDeathState, that will hide the widget when the enemy dies.
Create a Function, SetPoiseValue, that shows the Stagger Progress Bar when there's any ongoing value.
Create a Function, SetStaggerValue, that modifies the Poise Progress Bar when the enemy is staggered.
With all the support functions done, implement the AddDamage and ResetDamage to accumulate and reset damage.
In the Viewmodels tab, add the following Combat Viewmodels, setting their Creation Type to Create Instance.
- CombatVitals: Exposes the main combat attributes.
- PoiseAndStagger: Exposes the poise state and stagger progress.
- Damage: Exposes information about the last damage received.
- StatusEffects: Exposes all active status effects, applied from Gameplay Effects.
- TargetLock: Exposes the Current Target Lock state on this character.
If you cannot see the Viewmodel or View Bindings tab, enable them in the Window menu.
You can find more information about all Viewmodels provided by the Combat Framework in the User Interface page.
Bind the Combat Viewmodels to the correct properties and functions.

Update the Enemy Blueprint

Open your Enemy Blueprint and add a NinjaCombatWidgetComponent to it.
You should add this to your base Blueprint or base C++ class, whichever is the most appropriate location in your character hierarchy.
Adjust the proper location for this widget, probably placing it above the character's head.
Set the Space to Screen.
Set the Widget Class crated in the previous step.

Test everything

Press Play and attack your enemy, the overhead widget should show up and reflect incoming damage.
Lock on your target and the overhead widget should also appear. Unlock and the widget should disappear.
Notice how critical damage, poise damage, stagger state and status effects (if you have them) are displayed.
The widget will also disappear when the enemy dies.

Last modified: 29 December 2024