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.
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.
The next tutorial will handle the player’s death.