05 UI Setup

Setting up the game’s UI.

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

If you remember, we’ve already set the Makinom project’s UI system to use the Unity UI module, i.e. we’ll do most of the setup in the scene, using components and the Unity UI. You can learn more about UI systems in general in this documentation, or about the Unity UI module in this documentation.

UI Box #

First, let’s set up the UI box we already used in previous schematics. We’ll set up a pretty simple one, since we just need to display a message for some time and don’t need to confirm anything. At the end we’ll create a prefab out of our setup and use it in the UI box in the Makinom editor.

The easiest way to set up a UI box is using the context menu in the scene hierarchy: Makinom > UI > UI Box > UI Box (TextMesh Pro)

This already gives us all we need, but we can style it to our liking, e.g. change the position or size of the box, or change the font, font size or alignment.

TextMesh Pro – Text (UI) #

I’ll change the text to be centered and use a larger font size – select the Text child object of the created UI Box game object and change the TextMesh Pro – Text (UI) component’s settings.

  • Font Size
    Set to 35.
  • Alignment
    Select Center.

I’ll also add a Content Size Fitter component to the UI Box, to automatically adjust the height to the displayed text.

  • Vertical Fit
    Select Preferred Size.

That’s it for the UI box – now create a prefab out of it by dragging the UI Box game object from the scene hierarchy to the project view, e.g. into a new folder in Assets/Tutorial Resources/Prefabs/UI/.

Lives HUD #

Next we’ll set up the lives HUD to display the player’s lives. We’ll show them in the lower left corner of the screen.

Use the context menu in the scene hierarchy to add a simple HUD: Makinom > UI > HUD > HUD

Rect Transform #

Change the newly created HUD’s Rect Transform:

  • Width
    Set to 200.
  • Height
    Set to 50.
  • Anchors
    Use the bottom left anchor preset.

Now move it to the lower left corner of the canvas.

Add a HUD Text Content to the HUD using the scene hierarchy context menu: Makinom > UI > HUD > Content > Text Content (TextMesh Pro)

Adjust the new game object’s bounds to match the parent HUD’s bounds (or place it any way you like).

HUD Text Content Component #

This component is responsible for setting the TextMesh Pro component’s text in the HUD, we’ll use a Makinom text code to show the value of our lives int variable.

  • Default Content
    Set to:
    Lives: <var.int=lives>
  • Variable Origin
    Select Global.

You can display int variables using the text code <var.int=key>, replacing key with the variable key you want to show.

TextMesh Pro – Text (UI) #

As before, I’ll change the text to be centered (this time vertically) and use a larger font size – select the Text child object of the created Text Content game object and change the TextMesh Pro – Text (UI) component’s settings.

  • Font Size
    Set to 30.
  • Alignment
    Select Middle.

That’s it for the lives HUD – now create a prefab out of it by dragging the HUD game object from the scene hierarchy to the project view and save/rename it to Lives HUD.

Score HUD #

The setup for the score HUD is mostly the same as the lives HUD, so we can just continue with our current HUD in the scene, adjust it as needed and create a new prefab out of it.

First, move the HUD into the upper right corner.

Rect Transform #

  • Anchors
    Use the top left anchor preset.

HUD Text Content Component #

We’ll display a different text, since we want to show the score variable now.

  • Default Content
    Set to:
    Score: <var.int=score>

That’s it for the score HUD – now create a new prefab out of it by dragging the HUD game object from the scene hierarchy to the project view and save/rename it to Score HUD. When asked if you want to create an Original Prefab or a Prefab Variant, create an Original Prefab.

Pause HUD #

For getting used to creating HUDs, let’s create a new one from scratch for the pause HUD, although we could also just adjust the previous one like before.

Use the context menu in the scene hierarchy to add a HUD: Makinom > UI > HUD > HUD

Change the newly created HUD’s Rect Transform:

  • Width
    Set to 400.
  • Height
    Set to 200.

Keep the HUD in the center of the screen.

Add a HUD Text Content to the HUD using the scene hierarchy context menu: Makinom > UI > HUD > Content > Text Content (TextMesh Pro)

Adjust the new game object’s bounds to match the parent HUD’s bounds (or place it any way you like).

HUD Text Content Component #

  • Default Content
    Set to:
    Pause

TextMesh Pro – Text (UI) #

Select the Text child object of the created Text Content game object and change the TextMesh Pro – Text (UI) component’s settings.

  • Font Size
    Set to 40.
  • Alignment
    Select Center and Middle.

That’s it for the lives HUD – now create a prefab out of it by dragging the HUD game object from the scene hierarchy to the project view and save/rename it to Pause HUD.

With that we’re done with the setup of our UI prefabs, but we need to clean up the Canvas and Event System that where created by Unity for our UI setup in the scene. In the scene hierarchy, select the Canvas and EventSystem game objects and delete them (e.g. via the Delete key).

Using the UI Prefabs #

All that’s left to do is use the UI prefabs we just set up in Makinom.

UI Box 0: Message #

First we’ll set up the UI box – open the Makinom editor and navigate to UI > UI Box and select the Default UI box we already used in our schematics.

Change the following settings.

Base Settings #

  • Name
    Set to Message.
  • UI Layer
    Select Layer 1.

Unity UI #

If you don’t have the Unity UI settings available, you probably forgot to set the UI system to use the Unity UI module, go back to the first tutorial to check out how to do it.

  • UI Box Prefab
    Select the UI Box prefab we created.

That’s it for the UI box.

HUD 0: Lives #

Navigate to UI > HUDs and select the Default HUD that’s already been added in the initial project setup. Change the following settings.

HUD Settings #

  • Name
    Set to Lives.
  • HUD Type
    Select Information.
  • Auto Display
    Enable this setting.

Information Settings #

  • User
    Select None.
  • Display Without User
    Enable this setting.

Display Conditions #

We only want to display this HUD during a running game, i.e. when we won or died, the HUD will be hidden (e.g. while displaying the dialogue).

Click on Add Game State.

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

Unity UI #

  • UI Layer
    Select Layer 1.
  • HUD Prefab
    Select the Lives HUD prefab we created.

HUD 1: Score #

This HUD’s setup is nearly identical, so we can just copy the Lives HUD and adjust the settings.

HUD Settings #

  • Name
    Set to Score.

Unity UI #

  • HUD Prefab
    Select the Score HUD prefab we created.

HUD 2: Pause #

This HUD’s setup is nearly identical, so we can just copy the Score HUD and adjust the settings, but watch out, this time we also need to change the checked game state.

HUD Settings #

  • Name
    Set to Pause.

Display Conditions #

  • Game State
    Select Game Paused.

Unity UI #

  • HUD Prefab
    Select the Pause HUD prefab we created.

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. The game over and victory message will now also be displayed.

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.