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 for our status values – a way to define how a status value should be displayed in the UI. You can learn more about status value UI in this documentation.

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 the Unity UI module, 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 > Status Value – Name+Value+Bar (for prefabs)

Rect Transform #

We’ll change the size of the Status Value game 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 ORK HUD Status Text Content component, which is the go-to component for all status-related HUD 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 game object.

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

ORK 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 game object by dragging it on the project view. Rename the prefab to Status Value UI.

Remove the game 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 for a quick setup: ORK Framework > HUD > Status Effect > Status Effect Content+Duration (for prefabs)

Rect Transform #

We’ll change the size of the Status Effect Content game 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 game object by dragging it on the project view. Rename the prefab to Status Effect UI.

Remove the game 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: Makinom > HUD > HUD (Horizontal Layout)

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.

HUDs can list them using a HUD Status Effect List component. It’ll use the status value UI to create prefabs (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)

HUD Status Effect List #

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. We’ll only have the one version we created earlier (still need to set it up in the editor), so we’ll use an empty UI key to use the default/standard setup we’ll set up.

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 on the root HUD game object to add a status text content: ORK Framework > HUD > Content > Status Text Content

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

ORK HUD Status 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 a HUD Status Value List 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 on the root HUD game object: ORK Framework > HUD > Status Value > Status Value List (Horizontal Layout)

HUD Status Value List #

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. We’ll only have the one version we created earlier (still need to set it up in the editor), so we’ll use an empty UI key to use the default/standard setup we’ll set up.

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 game object by dragging it on the project view. Rename the prefab to Player Battle HUD.

Remove the game 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 Settings #

We’ll start with the status value/effect UI.

Open the Makinom editor and navigate to UI > UI Settings.

ORK Settings > HUD Settings > 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.

ORK Settings > HUD Settings > 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.

UI Layout #

Next, 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.

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.

This will fit how your player combatants are ordered on screen due to their battle spots.

HUDs General Settings #

Next, we set up the default schematics for animating opening and closing our HUDs.

Navigate to UI > HUDs > General Settings.

Default Schematic #

Player Battle HUD #

And lastly, we set up the actual HUD.

Navigate to UI > HUDs and 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 #

Open the Forest (or Town) scene and hit play. Run around to start a random battle.

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.