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 updated 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.