In this tutorial we’ll set up a timebar HUD.

A combatant’s timebar can either be displayed in the combatant’s own HUDs, or you can use a Timebar HUD and show them all on the same timebar, optionally including cast times.

We’ll use a Timebar HUD – for this, we need to set up 2 Combatant HUDs for the player and enemy combatants (due to different placement above and below our timebar) and the Timebar HUD itself.

Learn more about timebar HUDs in this documentation.

Player Timebar HUD Prefab Setup #

First, we’ll create the prefab for our player timebar HUD, we’ll simply display the combatant’s icon and use a box background image. Additionally, we’ll add a small arrow image to point it at the position on the timebar.

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 the HUD itself will be placed on the Timebar HUD, we can ignore the positioning. However, the root of the HUD should just be a single point, we’ll add the rest as child objects.

Arrow Image #

Use the context menu to add an Image component to the HUD game object: UI > Image

This’ll add a new child object, where we’ll adjust the Image component.

Image #

Rect Transform #

The player should be displayed above the timebar, i.e. our arrow needs to point downwards and point at the HUD game object’s position.

Change the settings in this order:

This’ll place the arrow like this:

Box and Icon #

Next, use the context menu on the HUD game object to add a Status Text Content child object: ORK Framework > HUD > Content > Status Text+Icon Content

This’ll add the Status Text Content child object with two own child objects, Image and Text. We don’t need text, so remove the Text child object.

We’re not using the Status Icon Content variant here (which would only have the icon), as that’d put the icon’s Image component directly on the created game object instead of adding another child object. For our setup, we need the icon as a child object, because we also display a box image around it.

Select the Status Text Content child object and change the following things.

Rect Transform #

ORK HUD Status Text Content #

Horizontal Layout Group #

Image #

Add an Image component to the Status Text Content game object.

The finished HUD will look like this:

Create Prefab #

Create a prefab out of the HUD game object, e.g. naming it Player Timebar Icon HUD.

Don’t remove the game object from the scene yet, we’ll now adjust it and make another prefab for the enemy.

Enemy Timebar HUD Prefab Setup #

The enemy’s icon will be placed below the timebar, i.e. we’ll have to change the arrow and box locations (and rotation of the arrow).

Arrow #

Select the Image child object of the HUD game object.

Rect Transform #

And this already rotates and places the arrow as it should be.

Box and Icon #

Select the Status Text Content child object of the HUD game object.

Rect Transform #

The finished HUD will look like this:

Create Prefab #

Create an original prefab out of the HUD game object, e.g. naming it Enemy Timebar Icon HUD.

Remove the HUD game object from the scene, but keep the canvas, we’ll now set up the timebar itself.

Timebar HUD Prefab Setup #

This’ll be pretty easy, we’ll use the scene hierarchy context menu to create a ready-to-use setup: ORK Framework > HUD > Timebar HUD with Cast Time

We’ll adjust it for our needs, mainly the placement.

Rect Transform #

The HUD should be placed in the upper left corner of the screen, with enough space to the top to show the player icons.

I’m using these settings:

Image #

Feel free to change the used images for the timebar and cast time bar.

I’m using this setup on the Timebar HUD game object.

I’m using this setup on the Cast Time child object.

The finished HUD will look like this:

In case you’re wondering how the position of the individual combatant HUDs will be handled: Their position on the timebar is determined by the Empty Timebar Position and Max Timebar Position settings of the Timebar HUD component.

The position on the cast time bar is determined by the Empty Cast Position and Full Cast Position settings of the Timebar HUD component.

This points to empty game objects on the timebar to define those locations.

You can also separate those 2, having the cast time bar at a separate location.

Create Prefab #

Create a prefab out of the HUD game object, e.g. naming it Timebar 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).

HUD Setups #

Now, we’ll set up the HUDs using our prefabs.

Navigate to UI > HUDs, we’ll add new HUDs.

Player Timebar Icon #

The player (and enemy) timebar HUD is just used as a template, i.e. we don’t display it on itself and don’t need to set up which combatants use it or display conditions.

HUD Settings #

Unity UI #

Enemy Timebar Icon #

Copy the Player Timebar Icon HUD and change the following settings.

HUD Settings #

Unity UI #

Timebar #

Add a new HUD, now we’ll set up the actual timebar.

HUD Settings #

Timebar Settings > Player Combatants #

Timebar Settings > Ally Combatants #

Timebar Settings > Enemy Combatants #

Display Conditions #

A Timebar type HUD will only be displayed during running Active Time 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 #

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!