In this tutorial we’ll set up a turn order HUD.

A turn order HUD displays each combatant in it’s own individual HUD – we’ll use an UI layout to arrange them in a horizontal list.

HUD Prefab Setup #

First, we’ll create the prefab for our HUD, we’ll simply display the combatant’s portrait and use a box background image.

Use the scene hierarchy context menu to create a new HUD: Makinom > HUD > HUD (i.e. without any layout)

Let’s adjust the HUD game object to our needs.

Rect Transform #

Since we’ll use an UI layout to position the individual HUDs, we’ll only set the width and height and can ignore the positioning.

Image #

Add an Image component to the HUD game object. We’ll use it to add a background image (box) to the HUD.

Rect Mask 2D #

Add a Rect Mask 2D component to the HUD game object. This’ll hide parts of the HUD that’ll otherwise exceed it’s bounds – our portrait would otherwise be larger than the actual HUD.

Portrait #

Now, we’ll add a portrait content child object to the HUD game object.

We’ll use the scene hierarchy context menu on the HUD game object: Makinom > HUD > Content > Portrait Content (Sprite)

We’re using the Sprite variant due to our portraits being sprites.

Rect Transform #

The Portrait Content child object should be placed like this:

HUD Portrait Content #

This component handles which portrait type will be displayed.

UI Portrait #

This component manages which components are used to display the portrait (e.g. sprite or texture).

We need to disable setting the sprite to it’s native size, adjusting to the size of the game object instead.

Image #

We want the portrait to keep it’s aspect ratio – to have access to this setting, we need to first select any sprite (not sliced like the box) in the Source Image field.

Afterwards, change this setting:

Remove the sprite afterwards by selecting the None asset in the Source Image field.

The finished HUD will look something like this (e.g. when using one of the portrait sprites for testing):

Create Prefab #

Create a prefab out of the HUD game object, e.g. naming it Turn Order Portrait HUD.

If you’ve done the setup in one of your game’s scenes, don’t forget to remove the canvas (with the HUD game object).

Turn Order HUD Setup #

Now, we’ll set up our UI layout and turn order HUD.

UI Layout #

Open the Makinom editor and navigate to UI > UI Layouts, we’ll add a new layout.

UI Layout Settings #

List Layout Settings #

Move Settings #

HUD #

Next, we’ll set up the HUD. Navigate to UI > HUDs, add a new HUD and change the following settings.

HUD Settings #

Turn Order Settings #

Display Conditions #

A Turn Order type HUD will only be displayed during running Turn Based battles, so we could just keep the display conditions as they are.

We’ll set up our Show Battle HUD game state check anyway, maybe we want to hide the battle HUDs in the future (e.g. during a ‘cinematic’ attack, or something like that).

Unity UI #

Schematics #

I’m also using the move from right and move to left schematics from the UI animations schematics to animate the HUD.

Save Changes #

And that’s it!

Don’t forget to save your changes by clicking on Save Settings at the bottom of the editor.

Next, we’ll set up our first battle!