We can use HUDs to display all kinds of information – in our case, the player’s status (HP and MP).

In this tutorial we’ll focus on creating a simple HUD – a more detailed introduction to HUDs will be added later.

A new GUI Box

First of all we need a new GUI box to display our HUD. We want to display the HUD in the lower right corner of the screen – so open the ORK Framework editor and navigate to Menus > GUI Boxes.

Copy the Battle Menu GUI box and change the following settings.

  • Name
    Set to Player HUD.

Content Box Settings

  • Bounds
    Set to X=1280, Y=800, W=200, H=50.
  • Anchor
    Select Lower Right.

Open Box Behaviour > Move Settings

  • Start Position
    Set to X=1680, Y=800.

Close Box Behaviour > Move Settings

  • End Position
    Set to X=1680, Y=800.

That’s it for the GUI box.

Creating the HUD

Navigate to Menus > HUDs and change the settings of the Default HUD (the first HUD in the list).

HUD Settings

  • Name
    Set to Player HUD.
  • GUI Box
    Select Player HUD.
  • HUD Type
    Select Combatant.
    This type allows us to display information about a combatant, e.g. status values.
  • Combatant Type
    Select Group.
    This will display a list of all members – each member will be displayed in it’s own GUI box (with an offset).
    Individual would display the GUI box at each member’s game object position.
  • Combatant Offset
    Set to X=0, Y=-5.
  • Relative Offset
    Enable this setting.
  • Relative To
    Select Upper Right.
    The HUDs for different combatants will now be relative to the upper right of the previous combatant’s HUD, with an offset of -5 vertically.
  • Displayed Groups
    Enable Player and disable the rest.

Display Conditions

  • In Control
    Select Ignore.
  • In Battle
    Select Yes.
  • Turn Based, Active Time, Real Time, Phase
    Enable this settings.

Set all other Game States to No.

HUD Elements

A HUD consists of one ore multiple HUD elements. In our case (Combatant type HUD), it consists of multiple Status Elements. The drawing order is from first to last – i.e. the element with index 1 will be placed above index 0.

Status Element 0

First we want to display the combatant’s name.

Click on Add Status Element to add the first element – change the following settings.

  • Type
    Select Information.
    This type let’s us display information about the combatant (e.g. name, class, etc.).
  • Text
    Set to %n.
    This will display the combatant’s name.
  • Text Color
    Select Yellow.
  • Font Size
    Set to 15.
  • Bounds
    Set to X=0, Y=0, W=180, Y=40.
    The bounds are defined within the GUI boxes content (i.e. X=0, Y=0 is at the upper left corner of the GUI box, after adding the GUI box’s padding).

Status Element 1

Now we want to display the Consumable type status values as bars. We will define the default look of those bars later in the status value settings.

Click on Add Status Element to add another element.

  • Type
    Select Status Value.
    This will display information on one or multiple status values.
  • Value Origin
    Select Current.
    The value origin defines where the displayed status value’s value comes from – you can use this to display how status values would change when changing equipment.
    Current will only display the status value’s real value.
  • List Status Values
    Select Status Value Type.
    This will list multiple status values of a defined status value type.
  • Status Value Type
    Select Consumable.
  • Offset
    Set to X=0, Y=20.
    This is the offset added to each status value.
  • Use Bar
    Enable this setting.
  • Bar Bounds
    Set to X=0, Y=20, W=180, H=5.
  • Bounds
    Set to X=0, Y=20, W=180, H=100.

Status Element 2

Additionally, we want to display the name of the status value – to make things easier, let’s copy the previous element. Change the following settings.

  • Use Bar
    Disable this setting.
  • Text
    Set to %n.
  • Font Size
    Set to 18.

Status Element 3

Finally, we also want to display the values as text – copy status element 2 and change the following settings.

  • Text
    Set to %.
  • Text Alignment
    Select Right.

And that’s it for our HUD.

The default bars

While we could define the colors/images used for our status value bars in the HUD as well, it’s better to do this in the status value settings – this way they’ll look everywhere the same.

For now we’ll only set this up for HP and MP – navigate to Status > Status Values and change the following settings.

Status Value 1: HP

Default Value Bar

We can change the look of the bars depending on how much they’re filled – we want the bar to be red when below 25 %, yellow when below 50 % and green for the rest (50-100%).

The first added bar will always represent 100 % – the following are in descending order (e.g. 100, 50, 25). Change the already added value bar settings.

  • Percent
    Set to 100.
    Since this is the first value bar, you can’t change this setting anyway.
  • Color (Bar Image)
    Select Green.
  • Use Empty Bar
    Enable this setting.
    We also want to display the empty part of the bar.
  • Color (Empty Bar Image)
    Select Default Shadow.
    This is a black color.

Now, click on Add Images to add another value bar setting.

  • Percent
    Set to 50.
  • Color (Bar Image)
    Select Yellow.
  • Use Empty Bar
    Enable this setting.
  • Color (Empty Bar Image)
    Select Default Shadow.

Click on Add Images to add the last value bar setting.

  • Percent
    Set to 25.
  • Color (Bar Image)
    Select Red.
  • Use Empty Bar
    Enable this setting.
  • Color (Empty Bar Image)
    Select Default Shadow.

That’s it for HP.

Status Value 3: MP

Default Value Bar

The MP should always display the same value bar – we don’t need to react on it’s filling.

  • Percent
    Set to 100.
  • Color (Bar Image)
    Select Blue.
  • Use Empty Bar
    Enable this setting.
  • Color (Empty Bar Image)
    Select Default Shadow.

That’s it – click on Save Settings and close the ORK Framework editor.

Test it

Open the main menu scene (0 Main Menu) and hit Play. Walk outside of the town and into the battle – you’ll now see the player HUD displaying at the lower right side of the screen.


Wow – now our battle is fully animated! At least for now … there’s always something to play around with.

This concludes our animating the battle marathon.

And that’s it for now – the next lesson will continue with combatant groups and turn based battles.

Want to do more?

You’re still not satisfied with your animated battle? Here’re some things you can do:

  • Create more camera positions.
  • Add camera position changes to ability and item battle events.
  • Create/use more particle effects.