In this tutorial we’ll set up a HUD to display the player’s status information during battle.

The HUD will show the status effects added to the player, the combatant’s name and their current HP and MP. Since we’ll add a 2nd player combatant later, the HUD will be displayed using a UI layout and list them vertically in the bottom right corner of the screen.

We’ll set up multiple things for this:

• status value UI
• status effect UI
• HUD prefab
• HUD setup

Let’s get to it!

Status Value UI Prefab #

First, we’ll set up the status value UI – a way to define how a status value should be displayed in the UI.

We’ll create a UI that shows the status value’s name on the left side, it’s current value at the right side and a value bar below the text. The value bar uses a sprite and fills it according to the status value’s filled state.

As with all content when using Unity UI, we’ll set up a prefab for that. It’s best to do this in the UI Environment Scene, so open it.

We can create a ready-to-use setup using the scene hierarchy’s context menu (ORK Framework > HUD > Status Value > Prefab: Status Value – Name+Value+Bar) or the ORK toolbar (search for: Status Value Prefab and select the variant with Name+Value+Bar).

Rect Transform #

We’ll change the size of the Status Value object.

Layout Element #

We’ll display our status values in a horizontal list and want them to stick to the size we defined, so we need to make sure by using a Layout Element component.

Add a Layout Element component using the component menu.

Name #

The Status Value > Name child object contains the setup to display the name on the left side. This is handled by the HUD Text Content component, which is the component for all HUD text displays.

The actual display of the content is handled by Image and TextMeshPro – Text (UI) components, i.e. similar to the UI boxes and input prefabs.

Value #

The Status Value > Value child object contains the setup to display the value on the right side. It works the same way as the Name.

Value Bar #

We’ll adjust the value bar to only be displayed at the bottom of the status value UI.

Select the Status Value > Value Bar child object.

Rect Transform #

The value bar uses a stretch stretch anchor preset, i.e. it’ll stretch to the width/height of the parent object.

We’ll add a padding to the top, to have the bar only at the bottom.

HUD Value Bar Content #

This component handles what’s displayed by the value bar.

HUD Value Bar (Sprite) #

This component handles actually displaying the value bar via multiple Image components (on child objects).

We need to set the sprite used by those components.

Empty Sprite #

Select the Status Value > Value Bar > Empty Sprite child object.

This is used to display the empty part of the value bar.

Value Sprite #

Select the Status Value > Value Bar > Value Sprite child object.

This is used to display the filled part of the value bar.

The Value Sprite‘s image type should be set to Filled, this enables the value display to fill the sprite according to the value that’s displayed.

The finished status value UI should look like this:

Create Prefab #

Create a prefab out of the Status Value object by dragging it on the project view. Rename the prefab to Status Value UI.

Remove the object from the canvas.

Status Effect UI #

Next, we’ll set up the status effect UI for our status effects – a way to define how a status effect should be displayed in the UI. You can learn more about status effect UI in this documentation.

We’ll create a UI that shows the status effect’s icon and it’s duration at the bottom.

Again, we can use the scene hierarchy’s context menu (ORK Framework > HUD > Status Effect > Prefab: Status Effect Content+Duration) or ORK toolbar (search for: Status Effect Prefab and use the Content+Duration variant)

Rect Transform #

We’ll change the size of the Status Effect Content object.

Layout Element #

Like with the status value UI, we want to make sure the size is used when displayed in a layout component list.

Add a Layout Element component using the component menu.

Name #

The created setup also displays the name of the effect – we don’t want that.

Remove the Status Effect Content > Content > Text child object.

Duration Text #

Select the Status Effect Content > Duration Text child object.

This is set up to display the duration of the status effect at the bottom center of the effect’s UI. That’s fine for us, but we still want to adjust the text size and color.

TextMeshPro – Text (UI) #

We can adjust this in the TMP component (as usual).

The finished status effect UI should look like this:

Create Prefab #

Create a prefab out of the Status Effect Content object by dragging it on the project view. Rename the prefab to Status Effect UI.

Remove the object from the canvas.

Battle HUD Prefab #

Next, we’ll set up our actual HUD prefab.

The HUD should list the combatant’s currently applied status effects, name, HP and MP and allign all of them horrizontally.

Base HUD #

Create the base of the HUD using the scene hierarchy’s context menu (ORK Framework > HUD > HUD (Horizontal Layout)) or the ORK toolbar (search for: HUD horizontal).

Rect Transform #

Since we’ll use a UI layout to list the HUD for multiple (player) combatants, we don’t have to worry about the position of it, but we need to set the size.

Horizontal Layout Group #

We’ll adjust the padding, spacing and child alignment.

Image #

Add an Image component using the component menu – we’ll use it to add a blue background to the HUD.

Status Effects #

The first information in the HUD (listed from the left side) will be the status effects.

Content can be listed in HUDs using HUD List Content components. When displaying status effects, it’ll use the status effect UI prefab to create instances (as child objects of the list) for individual status effects.

We can add a setup using the scene hierarchy’s context menu (ORK Framework > HUD > Status Effect > Status Effect List (Horizontal Layout)) or the ORK toolbar (search for: Status Effect List horizontal).

HUD List Content #

We’ll adjust how the effects are listed – we’ll limit the display to 4 effects at a time.

The status effects are displayed using status effect UI, where you can set up different versions using UI keys.

Horizontal Layout Group #

We’ll change it to fill the layout from the right side.

Layout Element #

Add a Layout Element component using the component menu.

We’ll use it to set the size of the status effect list – otherwise it’d be determined by the parent HUD’s layout group.

Name #

Next, we’ll add the combatant’s name.

Use the scene hierarchy’s context menu (ORK Framework > HUD > Content > HUD: Text Content) or the ORK toolbar (search for: HUD Text Content) on the root HUD object to add a HUD text content.

This’ll add a text-only content, without any icon/image setup.

HUD Text Content #

This component handles the text content that’s displayed – the standard setup already shows the combatant name, but let’s look into it anyway.

TextMeshPro – Text (UI) #

We’ll adjust the alignment of the text to keep it in the (vertical) center.

Layout Element #

Add a Layout Element component using the component menu.

We’ll use it to set the size of the name – otherwise it’d be determined by the parent HUD’s layout group.

Status Values #

And finally, we add the status values (HP and MP) – we’ll use another HUD List Content component for this, similar to the status effects.

The status value UI will be used to create prefabs of the individual status values as child objects of the list.

Add a horizontal status value list using the scene hierarchy’s context menu (ORK Framework > HUD > Status Value > Status Value List (Horizontal Layout)) or the ORK toolbar (search for: Status Value List horizontal) on the root HUD object.

HUD List Content #

We’ll select which status values will be listed – the Consumable status values HP and MP.

The status values are displayed using status value UI, where you can set up different versions using UI keys.

Horizontal Layout Group #

We’ll change the spacing to use the same as the root HUD.

The finished HUD should look like this:

Create Prefab #

Create a prefab out of the HUD object by dragging it on the project view. Rename the prefab to Player Battle HUD.

Remove the object from the canvas.

UI Setup #

We still need to set up the status value UI, status effect UI and HUD in the editor.

UI Layout #

We’ll set up the UI layout we’ll use to list our HUDs. The layout will list them horizontally in the lower right corner.

Open the ORK editor and navigate to UI > UI Layouts and change the Default layout.

UI Layout Settings #

List Layout Settings #

We’ll invert the displayed content, i.e. the first will be at the bottom of the screen, adding them upwards.

HUDs General Settings #

Navigate to UI > HUDs and select the General Settings.

We’ll set up default schematics to animate opening/closing HUDs, the status value UI and status effect UI.

Default Schematic #

Default Status Value UI #

These settings define the default status value UI for all status values. Individual status values can replace them with their custom setup.

Default Status Effect UI #

These settings define the default status effect UI for all status effects. Individual status effects can replace them with their custom setup.

Player Battle HUD #

And finally, we set up the actual HUD.

Select the Default HUD.

HUD Settings #

Combatant Settings #

Display Conditions > Game State Condition #

We’ll use the game state Show Battle HUD we set up earlier (and which is set by our battle start/end schematics).

The HUD will only be displayed when the game state is active.

Unity UI #

Save Changes #

And that’s it!

Save the changes using the Save Settings button at the bottom of the editor.

Testing #

Hit play and start a battle outside of town.

The HUD is displayed during battles – the status updates according to what happens, giving us some insight in the player’s state.

Everything works, great!

 

Next, we’ll add elemental attacks for the player.