Setting up the HUDs and basic UI settings.

We’ll display 2 HUDs, the player’s health and the score. HUDs (and other UI elements, e.g. dialogues) are displayed using GUI Boxes, which define the position and other settings of a UI.

Menu Settings

First, we’ll set up some basic menu settings. Open the Makinom editor and navigate to Menus > Menu Settings. Change the following settings.

Base Settings

We’ll use the default settings that should already be set up in a new project.

  • Default Screen Size
    Set to X=1280, Y=720.
  • GUI Scale Mode
    Select Scale To Fit.
  • GUI Anchor
    Select Middle Center.

That’s it for the menu settings.

GUI Boxes

Now, we’ll set up 3 GUI boxes – 2 for the HUDs (health and score) and one for a game over dialogue. Navigate to Menus > GUI Boxes and change the following settings.

0: Health HUD

Edit the first (default) GUI box. This will be used for the HUD displaying the player’s health.

Base Settings

  • Name
    Set to Health HUD.
  • Height Adjustment
    Select Auto.
    The height of the GUI box will automatically be adjusted to the displayed content.

Content Box Settings

  • Bounds
    Set to X=0, Y=720, W=400, H=200.
  • Anchor
    Select Lower Left.
  • Show Box
    Disable this setting.
  • Font
    Select LuckiestGuy.
  • Font Size
    Set to 40.
  • Text Alignment
    Select Center.

Choice Settings

  • Font
    Select LuckiestGuy.
  • Font Size
    Set to 20.
  • Text Alignment
    Select Center.

1: Score HUD

Copy the Health HUD and change the following settings.

Base Settings

  • Name
    Set to Score HUD.

Content Box Settings

  • Bounds
    Set to X=640, Y=0, W=1280, H=200.
  • Anchor
    Select Upper Center.

2: Game Over

Copy the Score HUD and change the following settings.

Base Settings

  • Name
    Set to Game Over.

Content Box Settings

  • Bounds
    Set to X=640, Y=360, W=300, H=200.
  • Anchor
    Select Middle Center.

That’s it for the GUI boxes.

Setting up the HUDs

Finally, we’ll set up the 2 HUDs. Navigate to Menus > HUDs and change the following settings.

0: Health

Edit the first (default) HUD.

HUD Settings

  • Name
    Set to Health.
  • GUI Box
    Select Health HUD.
  • HUD Type
    Select Information.
  • User
    Select Player.

Display Conditions

The player’s health should be displayed automatically when the game starts and hide when changing scenes (i.e. while reloading after game over).

  • Auto Display
    Enable this setting.

Click on Add Game State to add a game state condition.

  • Condition Type
    Select Game State.
  • Game State
    Select Changing Scene.
  • Check State
    Select Inactive.

Information Element 0

Click on Add Information Element to add a new HUD element. A HUD displays information (e.g. text or images) through HUD elements – the elements are positioned within the content bounds of the used GUI box.

We’ll display a heart image and the player’s health as a value bar. This element will display the heart image.

  • Element Type
    Select Image.
  • Use Image
    Enable this setting.
  • Image
    Select Heart.
    The image can be found at Assets/Tutorial Resources/Textures/.
  • Scale Mode
    Select Stretch To Fill.

The Element Bounds define the position and size of the HUD element.

  • Position
    Set to X=0, Y=0.
  • Width
    Set to 50.
  • Is Percent (Width)
    Disable this setting.
  • Height
    Set to 50.
  • Is Percent (Height)
    Disable this setting.

Information Element 1

Click on Add Information Element to add another HUD element. This element will display the player’s health as a value bar.

  • Element Type
    Select Value Bar.

The Value defines the current value displayed by the value bar. This will be the player’s health.

  • Value
    Select Int Variable.
  • Variable Key
    Set to health.
  • Variable Origin
    Select Object.
  • Game Object
    Select User.

The Minimum Value defines the minimum value displayed by the value bar (i.e. the lower border).

  • Minimum Value
    Set to 0 (Value).

The Maximum Value defines the maximum value displayed by the value bar (i.e. the upper border).

  • Maximum Value
    Set to 100 (Value).

A value bar can use images or colors to fill the bar. We’ll use colors – change the following settings in the already added Value Bar 0 settings.

  • Use Image
    Disable this setting.
  • Color
    Set to a light red color (e.g. R=255, G=101, B=101).
  • Use Empty Bar
    Enable this setting.
    The empty parts of the bar should also be filled.
  • Use Image
    Disable this setting.
  • Color
    Set to a black color (e.g. R=0, G=0, B=0).

The Element Bounds of this element should be relative to the previous element, this is handled by the Anchor and Relative To settings.

  • Position
    Set to X=10, Y=0.
  • Anchor
    Select Middle Left.
  • Relative To
    Select Middle Right.
  • Use Last Element
    Enable this setting.
    This HUD element will now be placed with it’s middle left position placed at the middle right of the previous element (using the position as an offset).
  • Width
    Set to 200.
  • Is Percent (Width)
    Disable this setting.
  • Height
    Set to 10.
  • Is Percent (Height)
    Disable this setting.

That’s it for the health HUD.

1: Score

This HUD will display the score stored in the global variable score.

HUD Settings

  • Name
    Set to Score.
  • GUI Box
    Select Score HUD.
  • HUD Type
    Select Information.
  • User
    Select None.

Display Conditions

The score should be displayed automatically when the game starts and hide when changing scenes (i.e. while reloading after game over).

  • Auto Display
    Enable this setting.

Click on Add Game State to add a game state condition.

  • Condition Type
    Select Game State.
  • Game State
    Select Changing Scene.
  • Check State
    Select Inactive.

Information Element 0

Click on Add Information Element to add a new HUD element.

  • Element Type
    Set to Text.
  • Text (English)
    Set to:
    Score: <var.int=score>
  • Variable Origin
    Select Global.
  • Position
    Set to X=0, Y=0.
  • Width
    Set to 100.
  • Is Percent (Width)
    Enable this setting.
  • Height
    Set to 100.
  • Is Percent (Height)
    Enable this setting.

And that’s it – click on Save Settings to save the changes.

Testing

Click on Play to test the game. You’ll now see the player’s health displayed in the lower left corner of the screen and the score at the upper center.

survival_shooter_06_HUDs1

The next tutorial will handle the player’s death.