Makinom - Game Toolkit for Unity
  • Features
  • Showcase
  • Guide
    • Documentation
    • Tutorials
    • Extensions
    • API
  • Makinom 1
    • Tutorials
    • Plugins
    • API
  • Support
  • Forum
  • Get Makinom

Guide

Schematics

  • Setting the Player
  • Simple Character Controller
  • Mouse Orbit Camera
  • Random Waypoints

Breakout

  • Breakout Tutorial Introduction
  • 01 First Steps
  • 02 Player Controls
  • 03 Bricks
  • 04 Losing a Life
  • 05 UI Setup
  • 06 Sound Assignments

Space Shooter

  • Space Shooter Tutorial Introduction
  • 01 First Steps
  • 02 Player Move Controls
  • 03 Player Weapon Controls
  • 04 Hit and Destroy
  • 05 Asteroids
  • 06 Game Controller
  • 07 UI Setup
  • 08 Player’s Destruction
  • 09 Enemy Ship Mechanics
  • 10 Enemy Ship
  • 11 Moving the Background

Match 3

  • Match 3 Tutorial Introduction
  • 01 First Steps
  • 02 UI Setup
  • 03 Generating the Level
  • 04 Matching Jewels
  • 05 Destroying Jewels
  • 06 Game Controls
  • 07 Jewel Setup

Survival Shooter

  • Survival Shooter Tutorial Introduction
  • 01 First Steps
  • 02 Player Movement
  • 03 Player Shooting
  • 04 Enemy Mechanics
  • 05 Setting up the Enemies
  • 06 UI Setup
  • 07 Player’s Death
  • 08 Enemy Spawner

2D Roguelike

  • 2D Roguelike Tutorial Introduction
  • 01 First Steps
  • 02 Generating the Level
  • 03 Level Generation Machines
  • 04 Player Controls
  • 05 Walls, Food and Exit
  • 06 Game Manager and UI Setup
  • 07 Enemy Mechanics
  • 08 Game Over

2D Platformer

  • 2D Platformer Tutorial Introduction
  • 01 First Steps
  • 02 Player Movement
  • 03 Camera and Background
  • 04 Shooting Rockets
  • 05 Enemy Mechanics
  • 06 Setting up the Enemies
  • 07 Enemy Spawners
  • 08 Player Damage and Fall Remover
  • 09 Health Pickup
  • 10 Bomb Pickup
  • 11 Bomb Prefabs and Lay Bombs
  • 12 Pickup Spawner
  • 13 UI Setup
  • 14 Background Animations
  • Home
  • Guide
  • Tutorials
  • Match 3
  • 02 UI Setup

02 UI Setup

Table of Contents
  • HUD Scene Setup
    • Rect Transform
    • HUD Text Content Component
    • TextMesh Pro - Text (UI)
  • Using the UI Prefab
    • HUD 0: Player Info
      • HUD Settings
      • Information Settings
      • Unity UI

Setting up the game’s UI.

In this tutorial we’ll set up the HUD to display the player’s score and the number of turns.

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.

HUD Scene Setup #

First, we’ll set up the HUD’s game object and components in the scene. At the end we’ll create a prefab out of our setup and use it in the HUD setup in the Makinom editor.

We’ll show them in the upper 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 100.
  • Anchors
    Use the top left anchor preset.

Now move it to the upper 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:
    Score: <var.int=score>
    Turns: <var.int=turns>
  • 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) #

We’ll 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.

That’s it for the HUD – now create a prefab out of it by dragging the HUD game object from the scene hierarchy to the project view (e.g. into Assets/Tutorial Resources/Prefabs/).

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 Prefab #

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

HUD 0: Player Info #

Open the Makinom editor, 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 Player Info.
  • HUD Type
    Select Information.
  • Auto Display
    Enable this setting.

Information Settings #

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

Unity UI #

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

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

The next tutorial will handle generating the level.

Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Updated on January 4, 2021
Table of Contents
  • HUD Scene Setup
    • Rect Transform
    • HUD Text Content Component
    • TextMesh Pro - Text (UI)
  • Using the UI Prefab
    • HUD 0: Player Info
      • HUD Settings
      • Information Settings
      • Unity UI
Sitemap
  • Features
  • Showcase
  • Guide
    • Documentation
    • Tutorials
    • Extensions
    • API
  • Makinom 1 Hub
    • Tutorials
    • Plugins
    • API
  • Support
  • Forum
  • Get Makinom
  • Contact
  • Blog
  • ORK Framework
  • gamingislove.com
Categories
  • Makinom 1 (97)
    • Tutorial (97)
      • 2D Platformer (14)
      • 2D Roguelike (8)
      • Breakout (6)
      • How-to (34)
      • Match 3 (6)
      • Schematic (4)
      • Scripting (6)
      • Space Shooter (11)
      • Survival Shooter (8)
  • News (11)
  • Release (68)
Search

© 2015 Gaming is Love e.U.

Disclosure: This site may contain affiliate links, which means I may receive a commission if you click a link and purchase something that I have recommended. While clicking these links won’t cost you any money, they will help me fund my development projects while recommending great assets!