ORK Framework Logo - RPG Editor for Unity
  • Features
  • Showcase
  • Guide
    • Documentation
    • Tutorials
    • API
  • ORK 2
    • Tutorials
    • Plugins
    • API
  • Support
  • Forum
  • Get ORK

2D RPG Quickstart

  • START 2D RPG Quickstart
  • 01 Initial Setup
  • 02 Player Setup
  • 03 Music & Scenes
  • 04 UI System Setup
  • 05 UI Boxes
  • 06 Flying Texts
  • 07 Status Values
  • 08 Status Effects
  • 09 First Abilities
  • 10 Fighter Setup
  • 11 First Enemies & Battle AI
  • 12 Battle System Setup
  • 13 Animating Battle Start and End
  • 14 Random Battles
  • 15 Animating Actions
  • 16 Player Battle HUD
  • 17 Elemental Attacks
  • 18 Animating More Actions
  • 19 Inventory & Loot
  • 20 Equipment
  • 21 Loot, Start Equipment & Viewers
  • 22 Magic Abilities
  • 23 Caster Setup
  • 24 More Enemies
  • 25 Start Menu & Save Games
  • 26 Menu Screens
  • 27 Interactions
  • 28 Item Collectors
  • END 2D RPG Quickstart

3D RPG Quickstart

  • START 3D RPG Quickstart
  • 01 Initial Setup
  • 02 Player Setup
  • 03 Music & Scenes
  • 04 UI System Setup
  • 05 UI Boxes
  • 06 Flying Texts
  • 07 Status Values
  • 08 Status Effects
  • 09 First Abilities
  • 10 Fighter Setup
  • 11 First Enemies & Battle AI
  • 12 Battle System Setup
  • 13 Animating Battle Start and End
  • 14 Random Battles
  • 15 Animating Actions
  • 16 Player Battle HUD
  • 17 Elemental Attacks
  • 18 Animating More Actions
  • 19 Inventory & Loot
  • 20 Equipment
  • 21 Loot, Start Equipment & Viewers
  • 22 Magic Abilities
  • 23 Caster Setup
  • 24 More Enemies
  • 25 Start Menu & Save Games
  • 26 Menu Screens
  • 27 Interactions
  • 28 Item Collectors
  • END 3D RPG Quickstart

Status System Setup

  • START Status System Setup
  • 01 Status Values
  • 02 Status Development
  • 03 Attack/Defence Modifiers
  • 04 Status Effects
  • 05 Formulas
  • 06 Ability & Item Types
  • 07 Abilities Part 1: Attacks
  • 08 Abilities Part 2: Support & Sabotage
  • 09 Abilities Part 3: Elemental Magic
  • 10 Items
  • 11 Equipment Part 1: Slots & Slot Set Templates
  • 12 Equipment Part 2: Weapons
  • 12.5 (Optional) Equipment Part 2.5: Weapons
  • 13 Equipment Part 3: Shields, Armor & Accessories
  • 13.5 (Optional) Equipment Part 3.5: Shields, Armor & Accessories
  • 14 Equipment Part 4: Available Equipment Templates
  • 15 Loot
  • 16 Battle AIs
  • 17 Combatants Part 1: General Settings
  • 18 Combatants Part 2: Players
  • 19 Combatants Part 3: Enemies
  • 20 Combatant Groups
  • END Status System Setup

3D RPG Playground

  • START 3D RPG Playground
  • 01 Player Setup
  • 02 Start Menu
  • 03 First Interaction
  • 04 Music
  • 05 Areas
  • 06 Collecting Items
  • 07 Displaying Equipment
  • 08 Combatant Prefabs, Icons & Portraits
  • 09 Combatant Animations
  • 10 Camera Positions
  • ANIM 01 Battle Start/End Schematics
  • ANIM 02 Use, Cast & Camera
  • ANIM 03 Abilities & Items
  • ANIM 04 Physical Attacks
  • ANIM 05 Special Actions
  • BATTLE 01 Battle Menu
  • BATTLE 02 Prepare for Battle
  • TURN 01 Turn Based Setup
  • TURN 02 Turn Order HUD
  • ATB 01 Active Time Setup
  • ATB 02 Cast Times
  • ATB 03 Timebar HUD
  • BATTLE 03 The First Battle
  • BATTLE 04 Hunting Move AI
  • BATTLE 05 Spawning Combatants
  • 11 Save Games
  • MENU 01 UI Boxes
  • MENU 02 Template HUDs
  • MENU 03 Overview Menu
  • MENU 04 Menu Screens
  • 12 Shop
  • BATTLE 06 Random Battles
  • DUNGEON 01 Enter the Dungeon
  • DUNGEON 02 The Trapdoor
  • DUNGEON 03 Enemies on Level 1 & 2
  • DUNGEON 04 Traps on Level 3
  • DUNGEON 05 Going Deeper
  • 13 Bestiary (+MENU+ANIM)
  • QUEST 01 Hunting Quests (+MENU)
  • QUEST 02 Guard NPC
  • QUEST 03 Forest Ruin Cheese
  • QUEST 04 Witch NPC with Cheese
  • QUEST 05 Quest Mark HUDs
  • 14 Research Trees (+MENU)
  • CRAFT 01 Crafting Materials
  • CRAFT 02 Crafting Recipes
  • CRAFT 03 Crafting Menu
  • CRAFT 04 Crafting Proficiency & Critical Crafting
  • CRAFT 05 Materials Loot
  • 15 Changing Choice Dialogue
  • 16 Follow Me!
  • BATTLE 07 Sequence Loot Dialogue

3D Action RPG

  • START 3D Action RPG
  • 01 Status System Setup
  • 02 Player Setup
  • 03 Player Weapon
  • 04 Player Attacks
  • 05 Enemy: Chomper
  • 06 Chomper Attack
  • 07 Hit & Death
  • 08 HUDs
  • 09 Rolling on the Floor
  • 10 Enemy: Spitter
  • 11 Spit Attack
  • 12 Potion
  • 13 Grenade
  • 14 Item HUD
  • 15 Enemy: Grenadier
  • 16 Grenadier Melee Attacks
  • 17 Grenadier Flamethrower
  • 18 Item Drops
  • END 3D Action RPG

2D Grid Battle RPG

  • START 2D Grid Battle RPG
  • 01 Player Setup
  • 02 Prefab & Music Setup
  • 03 Randomizing Combatants
  • 04 UI Setup
  • 05 Battle Start, End & Phase Schematics
  • 06 Battle System Setup
  • 07 Battle Grid Setup
  • 08 Grid Move
  • 09 Forest Battle Grid
  • 10 Battle AI
  • 11 Ability Ranges
  • 12 Death & Use Schematics
  • 13 Attack Schematic
  • 14 Shoot Schematics
  • 15 Battle Selection Interaction
  • END 2D Grid Battle RPG

Schematics

  • Simple Start Schematic
  • Battle Start Schematic
  • Battle End Schematic
  • Moving to Target and Back
  • Animating a Base Attack
  • Animating a Magic Ability
  • Grid Movement
  • Open and Close UI Animations
  • Flying Text Mover

UI Setups

  • Unity UI: Initial Setup
  • Unity UI: TextMesh Pro Setup
  • Unity UI: UI Box
  • Unity UI: Flying Text
  • Unity UI: Dragging Notification
  • Unity UI: Canvas with Screen Space Camera
  • Unity UI: Interaction HUD
  • Unity UI: Simple Player HUD
  • Unity UI: Quest HUD
  • Unity UI: Shortcuts HUD
  • Unity UI: Currency HUD
  • Unity UI: Tooltip HUD
  • Unity UI: Control HUD
  • Unity UI: Attack Modifiers
  • Unity UI: Defence Modifiers

Gameplay Bits

  • Combining Input Origins
  • Combining Status Value Flying Texts
  • Fun With Flying Text
  • HUD Effects With Conditional Schematics
  • Inventory Containers
  • Multi Interaction Controllers
  • World Space HUD
  • World Space Dialogue
  • Home
  • Guide
  • Tutorials
  • UI Setups
  • Unity UI: Control HUD

Unity UI: Control HUD

Table of Contents
  • HUD Prefab Setup
    • Rect Transform
    • Joystick
      • Rect Transform
      • HUD Joystick Control Content
      • HUD Input Display
      • Image
    • Button (Accept)
      • Rect Transform
      • HUD Button Control Content
      • Image
    • Button (Cancel)
      • Rect Transform
      • HUD Button Control Content
      • Image
    • Create Prefab
  • HUD Setup
    • HUD Settings
    • Display Conditions
    • Unity UI
    • Schematics
    • Save Settings
  • Testing
  • Tip: Mix and match

Create a virtual control HUD using the Unity UI module.

In this tutorial we’ll create a Control type HUD to display virtual controls – a joystick and 2 buttons.

Your project’s UI system should already be set to use the Unity UI module. If not, check the initial setup tutorial for the Unity UI module.

You can download the completed HUD setup here:

Download HUD

This contains the control HUD prefab. You’ll need to select the input keys you want to use (in the HUD Joystick Control Content and HUD Button Control Content components of the prefab) and use the prefab for the HUD setup in the Makinom editor.

For simplicity, we’ll create a single HUD for the used virtual controls. In your game, you’ll most likely need to place virtual controls at different parts of the screen, e.g. a joystick on the left sice and accept/cancel inputs on the right side. For such a setup, simply create multiple HUDs and place them where you need them.

HUD Prefab Setup #

The Unity UI module uses prefabs to create HUDs, i.e. your HUD’s setup is done in the scene view via game objects and components.

We use the scene hierarchy’s context menu to create our base HUD: Makinom > HUD > HUD (i.e. without any layout)

This creates an empty HUD without any layout group, we’ll freely place the virtual controls as we need them.

Rect Transform #

We’ll adjust the placement of the HUD, placing the virtual controls in the lower left corner of the screen.

Select a bottom left anchor preset.

  • Pivot
    Set to X=0, Y=0.
  • Pos X
    Set to 100.
  • Pos Y
    Set to 100.
  • Width
    Set to 500.
  • Height
    Set to 300.

Joystick #

Next, we’ll add a joystick control to the HUD game object.

Create a ready-to-use setup using the scene hierarchy’s context menu: Makinom > HUD > Control > Joystick Control Content (Sprite)

This adds a virtual control for a joystick (i.e. with horizontal and vertical axis) and uses a sprite to show the control.

Rect Transform #

We’ll place the joystick on the left side of the HUD.

Select the Joystick Control Content game object and change the following settings.

Select a middle left anchor preset.

  • Pos X
    Set to 150.
  • Pos Y
    Set to 0.

HUD Joystick Control Content #

The HUD Joystick Control Content component manages which input keys will receive input from this virtual control.

For a joystick, this requires horizontal and vertical input.

  • Horizontal Input Key
    Select Horizontal Move (or any other horizontal axis you want to use).
  • Vertical Input Key
    Select Vertical Move (or any other vertical axis you want to use).
  • Maximum Distance
    Set to 100.
    This is the distance the control can be moved from it’s current position (in a circle around the position).
  • Full Input Factor
    Leave it at 1.
    I.e. moving the control to it’s maximum distance will result in an axis input of 1 (or -1, depending on the direction).
    E.g. set it to 0.5 if you want to reach full input (1/-1) at half the maximum distance.

HUD Input Display #

Select the Input Display child object of the joystick control.

The HUD Input Display (Sprite) component manages how an input will change the displayed sprite. You can change the used sprite as well as change the color of the image. We’ll leave it as is for this tutorial (i.e. no changes) – when you change the sprite or color for one of the states, keep in mind that you also need to set up the default (non-pressed) sprite/color to return to.

When using the Game Object variant instead of Sprite, you can select the game objects that will be enabled/disabled for the different input states.

Image #

Since the created default setup doesn’t have any sprite selected, let’s just select a standard Unity UI sprite for this simple setup.

Feel free to use your own sprites.

  • Source Image
    Select Knob.

So far, the HUD will look like this.

Button (Accept) #

Next, we’ll add a button to the HUD game object.

Create a ready-to-use setup using the scene hierarchy’s context menu: Makinom > HUD > Control > Button Control Content (Sprite)

This adds a virtual control for a button (i.e. a single input key) and uses a sprite to show the control.

Rect Transform #

We’ll place the button on the upper right of the HUD.

Select the Button Control Content game object, rename it to Accept Button and change the following settings.

Select a top right anchor preset.

  • Pivot
    Set to X=1, Y=1.
  • Pos X
    Set to 0.
  • Pos Y
    Set to 0.

HUD Button Control Content #

The HUD Button Control Content component manages which input key will receive input from this virtual control.

For a button, this requires a single input.

  • Input Key
    Select Accept (or any other input key you want to use).

Image #

Select the Input Display child object of the button control.

Like the joystick, the display of the input is handled by the HUD Input Display (Sprite) component.

We’ll again use a standard Unity UI sprite for this simple setup. Feel free to use your own sprites.

  • Source Image
    Select UISprite.

To not mix up the two buttons, let’s make the accept button green.

  • Color
    Select a green color.

Button (Cancel) #

We can just copy the button we just set up and adjust it a bit.

Duplicate the Accept Button game object and rename it to Cancel Button.

Rect Transform #

We’ll place the button on the upper right of the HUD.

Select the Button Control Content game object, rename it to Accept Button and change the following settings.

Select a bottom right anchor preset.

  • Pivot
    Set to X=1, Y=0.
  • Pos X
    Set to 0.
  • Pos Y
    Set to 0.

HUD Button Control Content #

Change the used input key.

  • Input Key
    Select Cancel (or any other input key you want to use).

Image #

Change the used color (and/or sprite).

  • Color
    Select a red color.

And with that, our virtual control HUD’s prefab is ready. It should now look something like this.

Create Prefab #

Create a prefab out of our HUD game object (without the Canvas). E.g. name the prefab Control HUD.

You can now remove the game object from the scene (and the canvas, if you’ve set this up in one of your regular game scenes).

HUD Setup #

Finally, we’ll set up the HUD in the Makinom editor. Navigate to UI > HUDs, add a new HUD and change the following settings.

HUD Settings #

  • Name
    Set to Virtual Control.
  • HUD Type
    Select Control.
  • Auto Display
    Enable this setting.
    This will automatically show the HUD.

Display Conditions #

You can use these settings to only show the HUD based on conditions. E.g. only when the player controls are enabled (game state In Control being active).

We’ll ignore this for now.

Unity UI #

  • UI Layer
    Select HUDs (or any other UI layer you want the HUD to display on).
    UI layers are used to organize your UI, learn more in the Makinom documentation.
  • HUD Prefab
    Select the HUD prefab you just created.

Schematics #

You can optionally use schematics to animate opening and closing the HUD, e.g. fading it in/out. You can also set up default schematics for all HUDs.

See this tutorial for details.

Save Settings #

That’s it for the setup.

Don’t forget to save the changes you did in the Makinom editor via the Save Settings button at the bottom.

Testing #

Hit play and test your HUD!

You’ll see your virtual controsl in the lower left corner of the screen, being able to move your player (if you’ve used the movement input keys) and accept/cancel (e.g. start interactions).

Tip: Mix and match #

The different HUD elements are not limited to a single HUD type.

E.g. you can add virtual controls to any of your HUDs if you want.

UI
Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Updated on May 8, 2022
Table of Contents
  • HUD Prefab Setup
    • Rect Transform
    • Joystick
      • Rect Transform
      • HUD Joystick Control Content
      • HUD Input Display
      • Image
    • Button (Accept)
      • Rect Transform
      • HUD Button Control Content
      • Image
    • Button (Cancel)
      • Rect Transform
      • HUD Button Control Content
      • Image
    • Create Prefab
  • HUD Setup
    • HUD Settings
    • Display Conditions
    • Unity UI
    • Schematics
    • Save Settings
  • Testing
  • Tip: Mix and match
Sitemap
  • Features
  • Showcase
  • Guide
    • Documentation
    • Tutorials
    • API
  • ORK 2 Hub
    • Tutorials
    • Plugins
    • API
  • Support
  • Forum
  • Get ORK
  • Contact
  • Blog
  • Makinom
  • gamingislove.com
Categories
  • News (60)
  • ORK 2 (137)
    • Tutorial (137)
      • Game tutorial (50)
      • Gameplay (32)
      • How-to (55)
  • Release (130)
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!