September
22
2015

Setting up the game’s HUDs.

In this tutorial we’ll set up HUDs for the player’s lives and score, and a HUD that’s displayed when the game is paused.

We’ve already set up the GUI boxes we need for it in the first tutorial – go back there if you missed that step.

Lives HUD

First, we’ll set up the HUD displaying the player’s lives. The HUD will be displayed at the lower left corner of the screen (defined in the GUI box we’re using).

Open the Makinom editor and navigate to Menus > HUDs. Change the following settings of the first HUD (the default HUD that’s already added).

HUD Settings

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

Display Conditions

  • Auto Display
    Enable this setting.

Game State Condition

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

  • Condition Type
    Select Game State.
  • Game State
    Select Game Running.
  • Check State
    Select Active.

Information Element 0

Click on Add Information Element to add a HUD element.

  • Element Type
    Select Text.
  • English
    Set to:
    Lives: <var.int=lives>
  • Variable Origin
    Select Global.

Element Bounds

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

Score HUD

Next, we’ll set up the HUD to display the player’s score. The HUD will be displayed at the upper center of the screen (defined in the GUI box we’re using).

Add a new HUD and change the following settings.

HUD Settings

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

Display Conditions

  • Auto Display
    Enable this setting.

Game State Condition

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

  • Condition Type
    Select Game State.
  • Game State
    Select Game Running.
  • Check State
    Select Active.

Information Element 0

Click on Add Information Element to add a HUD element.

  • Element Type
    Select Text.
  • English
    Set to:
    Score: <var.int=score>
  • Variable Origin
    Select Global.

Element Bounds

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

Pause HUD

Finally, we’ll set up the HUD that’s displayed when the game is paused. The HUD will be displayed at the center of the screen (defined in the GUI box we’re using).

Add a new HUD and change the following settings.

HUD Settings

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

Display Conditions

  • Auto Display
    Enable this setting.

Game State Condition

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

  • Condition Type
    Select Game State.
  • Game State
    Select Game Paused.
  • Check State
    Select Active.

Information Element 0

Click on Add Information Element to add a HUD element.

  • Element Type
    Select Text.
  • English
    Set to:
    Pause

Element Bounds

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

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

Testing

Hit Play to test the game. You’ll now see the player’s lives and score – the HUDs are automatically udpated when the used variables change. When pausing the game, you’ll see Pause written at the center of the screen.

We now have a fully functional breakout game – but there’s one more thing we can do to improve the experience: adding more sounds.

The next tutorial will handle sound assignments.