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

30
  • 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

30
  • 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

24
  • 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

53
  • 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

20
  • 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

17
  • 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

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

UI Setups

16
  • 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: Battle Actions 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

13
  • 2.5D Setup
  • Body Part Weakpoint
  • Click Attack
  • Combining Input Origins
  • Combining Status Value Flying Texts
  • Fun With Flying Text
  • HUD Effects With Conditional Schematics
  • Inventory Containers
  • Local Multiplayer
  • Multi Interaction Controllers
  • Target Selection Lines
  • World Space HUD
  • World Space Dialogue
  • Home
  • Guide
  • Tutorials
  • 3D Action RPG
  • 08 HUDs
View Categories

08 HUDs

In this tutorial we’ll set up multiple HUDs.

We’ll set up the following HUDs:

  • enemy HUD at the enemy’s position
  • player’s health HUD in the lower left corner of the screen
  • player’s stamina HUD in the center of the screen (only shown when stamina isn’t full)

Using the Unity UI module most of our HUD setup is handled in prefabs.

Let’s get to it!

Enemy HUD Prefab #

We’ll start with the enemy HUD, it’ll display the enemy’s name and HP (as a value bar). I recommend setting up UI prefabs in a new scene (or use the UI Environment scene you’ve set up for editing UI prefabs).

HUD Base #

Use the scene hierarchy’s context menu to create the base HUD: Makinom > HUD > HUD (Vertical Layout)

This creates a canvas, an empty HUD with a vertical layout. We use a Vertical Layout Group to arrange the HUD’s content in a vertical list.

Rect Transform #

The width of the HUD should already be set to 100, that’s what we’ll use.

  • Width
    Set to 100.

Vertical Layout Group #

We’ll set the padding and spacing all to 0.

  • Padding
    Set all to 0.
  • Spacing
    Set to 0.

Content Size Fitter #

Add a Content Size Fitter component using the component menu.

  • Vertical Fit
    Select Preferred Size.

Name #

Use the scene hierarchy context menu on the HUD game object to add an ORK status text content: ORK Framework > HUD > Content > Status Text Content

ORK HUD Status Text Content #

This component handles the content that will be displayed.

It’s already set up as we need it, displaying the name (via <name> text code) of the combatant.

TextMeshPro – Text (UI) #

This component handles displaying the text, we’ll adjust it to our needs.

  • Font Size
    Set to 14.
  • Alignment
    Select Center.
  • Wrapping
    Select Disabled.

HP #

Use the scene hierarchy context menu on the HUD game object to add a status value with a value bar: ORK Framework > HUD > Status Value > Status Value with +- changes – Name+Value+Bar (single)

This’ll add more than we need, remove the following child objects from the Status Value game object:

  • Name
  • Value

That leaves us with the Value Bar child object.

Select the Status Value game object.

HUD Status Value #

This defines the status value that will be displayed.

  • Status Value
    Select HP.

Layout Element #

Add a Layout Element component using the component menu.

We’ll need this to define the height the value bar will have in the vertical layout.

  • Preferred Height
    Enable this setting.
    Set the value to 5.

Empty Sprite #

Select the Status Value > Value Bar > Empty Sprite child object, we’ll adjust the Image component.

  • Source Image
    Select White_16x16.

Positive Change Sprite #

Select the Status Value > Value Bar > Positive Change Sprite child object, we’ll adjust the Image component.

  • Source Image
    Select White_16x16.
  • Color
    Select a light green color with full alpha.
    E.g. I’m using this hexadecimal color code: 96FF96

Negative Change Sprite #

Select the Status Value > Value Bar > Negative Change Sprite child object, we’ll adjust the Image component.

  • Source Image
    Select White_16x16.
  • Color
    Select a yellow color with full alpha.
    E.g. I’m using this hexadecimal color code: FFC700

Value Sprite #

Select the Status Value > Value Bar > Value Sprite child object, we’ll adjust the Image component.

  • Source Image
    Select White_16x16.
  • Color
    Select a red color with full alpha.
    E.g. I’m using this hexadecimal color code: FF0000

The finished HUD will look like this:

Create Prefab #

You might be wondering about the placement of the HUD. We’ll use the enemy’s on-screen position for that, it’ll be placed using the HUD’s pivot, i.e. in our HUD the (default) center pivot position.

Create a prefab out of the HUD, e.g. save it as Enemy HUD.

You can remove the HUD game object from the scene (but keep the canvas).

Player Health HUD Prefab #

Next, we’ll create the prefab for the player’s health HUD.

HUD Base #

Use the scene hierarchy’s context menu to create the base HUD: Makinom > HUD > HUD

This time we’ll create a HUD without any layout.

Rect Transform #

Change the settings in the following order.

Select the bottom left anchor preset.

  • Pivot
    Set to X=0, Y=0.
  • Pox X
    Set to 50.
  • Pos Y
    Set to 50.
  • Width
    Set to 400.
  • Height
    Set to 36.

HP #

Use the scene hierarchy context menu on the HUD game object to add a status value with a value bar: ORK Framework > HUD > Status Value > Status Value with +- changes – Name+Value+Bar (single)

Select the Status Value game object.

Rect Transform #

We’ll change it to fill out the whole HUD.

Select the stretch stretch anchor preset.

  • Left
    Set to 0.
  • Top
    Set to 0.
  • Right
    Set to 0.
  • Bottom
    Set to 0.

HUD Status Value #

This defines the status value that will be displayed.

  • Status Value
    Select HP.

Border Image #

Add an empty game object to the Status Value game object and place it between the Value Bar and the Name child objects.

We’ll use it to display an image acting as the border of the value bar. The text (name, value) should be visible in front of it, the bar behind it.

Rename the game object to Border Image.

Rect Transform #

Select the stretch stretch anchor preset.

  • Left
    Set to 0.
  • Top
    Set to 0.
  • Right
    Set to 0.
  • Bottom
    Set to 0.

Image #

Add an Image component using the component menu.

  • Source Image
    Select SimpleMaskBar_Border.

Name, Value #

The Name and Value child objects of the Status Value game object are already set up as we need them.

Mask #

Add another empty game object to the Status Value game object and place it above the Border Image child object.

Rename the game object to Mask.

This game object will serve as a mask, hiding parts of the value bar (we’ll parent it to this game object after we’re done with it’s setup).

Rect Transform #

Select the stretch stretch anchor preset.

  • Left
    Set to 0.
  • Top
    Set to 0.
  • Right
    Set to 0.
  • Bottom
    Set to 0.

Mask #

Add a Mask component using the component menu.

Image #

Add an Image component using the component menu.

  • Source Image
    Select SimpleMaskBar_Mask.

Move the Value Bar child object and parent it to the new game object. You’ll see that parts of the value bar are now hidden.

Value Bar #

All that’s left to do is set up the value bar’s sprites.

Empty Sprite #

Select the Value Bar > Empty Sprite child object, we’ll adjust the Image component.

  • Source Image
    Select White_16x16.

Positive Change Sprite #

Select the Value Bar > Positive Change Sprite child object, we’ll adjust the Image component.

  • Source Image
    Select White_16x16.
  • Color
    Select a light green color with full alpha.
    E.g. I’m using this hexadecimal color code: 96FF96

Negative Change Sprite #

Select the Value Bar > Negative Change Sprite child object, we’ll adjust the Image component.

  • Source Image
    Select White_16x16.
  • Color
    Select a red color with full alpha.
    E.g. I’m using this hexadecimal color code: FF0000

Value Sprite #

Select the Value Bar > Value Sprite child object, we’ll adjust the Image component.

  • Source Image
    Select White_16x16.
  • Color
    Select a green color with full alpha.
    E.g. I’m using this hexadecimal color code: 00FF00

The finished HUD will look like this:

Create Prefab #

Create a prefab out of the HUD, e.g. save it as Player Health HUD.

You can remove the HUD game object from the scene (but keep the canvas).

Player Stamina HUD Prefab #

Our last HUD prefab to set up is for the player’s stamina HUD.

HUD Base #

Use the scene hierarchy’s context menu to create the base HUD: Makinom > HUD > HUD

We’ll create a HUD without any layout again.

Rect Transform #

The HUD should already be placed using a middle center anchor preset. We’ll display it slightly above the center and reduce it’s size.

Select the middleft anchor preset.

  • Pox X
    Set to 0.
  • Pos Y
    Set to 100.
  • Width
    Set to 50.
  • Height
    Set to 50.

Image #

Add an Image component using the component menu.

The base of the HUD will serve as a mask.

  • Source Image
    Select SmallMaskBar_Round.

Soft Mask #

Add a Soft Mask component using the component menu.

This uses the SoftMaskForUGUI available under the MIT license.

We can keep the settings as they are.

Stamina #

Use the scene hierarchy context menu on the HUD game object to add a status value with a value bar: ORK Framework > HUD > Status Value > Status Value – Name+Value+Bar (single)

This’ll add more than we need, remove the following child objects from the Status Value game object:

  • Name
  • Value

That leaves us with the Value Bar child object.

Select the Status Value game object.

Rect Transform #

We’ll change it to fill out the whole HUD.

Select the stretch stretch anchor preset.

  • Left
    Set to 0.
  • Top
    Set to 0.
  • Right
    Set to 0.
  • Bottom
    Set to 0.

HUD Status Value #

  • Status Value
    Select Stamina.

Empty Sprite #

Select the Value Bar > Empty Sprite child object, we’ll adjust the Image component.

  • Source Image
    Select White_16x16.

Add a Soft Maskable component to the Empty Sprite child object. This component is needed for the soft mask to work on the image.

Value Sprite #

Select the Value Bar > Value Sprite child object, we’ll adjust the Image component.

  • Source Image
    Select White_16x16.
  • Color
    Select a yellow color with full alpha.
    E.g. I’m using this hexadecimal color code: FFFF00
  • Fill Method
    Select Radial 360.
  • Fill Origin
    Select Top.
  • Clockwise
    Dislabe this setting.

Add a Soft Maskable component to the Value Sprite child object.

The finished HUD will look like this:

Create Prefab #

Create a prefab out of the HUD, e.g. save it as Player Stamina HUD.

We’re done with our prefabs – you can now remove the canvas (in case you worked in the game’s scene).

HUD UI Layer #

Open the editor and navigate to UI > UI Layers, we’ll add a new layer for our HUDs.

  • Name
    Set to HUDs.

Drag the HUDs layer in the list above the Screen Fader layer, i.e. the order is:

  • Flying Texts
  • Layer 1
  • HUDs
  • Screen Fader

HUD Animations #

Navigate to UI > HUDs > General Settings, we’ll set up default UI animations for all our HUDs.

Default Schematics #

We’ll use schematics to fade in/out our HUDs. If you haven’t set them up yet, see this tutorial (or download them there).

  • Before Open Schematic
    Select UIFadeIn.
  • Wait
    Enable this setting.
  • Before Close Schematic
    Select UIFadeOut.
  • Wait
    Enable this setting.

HUD Setup #

Navigate to UI > HUDs, we’ll change the Default HUD and add additional HUDs.

0: Player Health #

First, we’ll set up the player’s health HUD.

HUD Settings #

  • Name
    Set to Player Health.
  • HUD Type
    Select Combatant.
  • Auto Display
    Enable this setting.
    This will automatically show the HUD. If you use a HUD only as a  template, make sure to disable this setting.

Combatant Settings #

  • Only Leaders
    Enable this setting.
    This’ll display the HUD only for the player combatant itself (we only have one in this game anyway).
  • Player
    Enable this setting.

Display Conditions #

You can use these settings to only show the HUD based on conditions. We’ll not use this for this tutorial.

Unity UI #

  • UI Layer
    Select HUDs.
  • HUD Prefab
    Select the Player Health HUD prefab.

1: Player Stamina #

Copy the Player Health HUD.

HUD Settings #

  • Name
    Set to Player Stamina.

Display Conditions > Combatant Requirements #

The stamina will use a display condition – only showing when the stamina isn’t full.

Click on Add Status Condition.

  • Condition Type
    Select Status.
  • Status Needed
    Select Status Value.
  • Status Value
    Select Stamina.
  • Used Value
    Select Display Value.
    Since our stamina uses count to value, we’ll base this on the displayed value, not the real value.
  • Check In
    Select Percent.
  • Check Type
    Select Is Less.
  • Check Value
    Select Value > Value.
    Set the value to 100.

Unity UI #

  • HUD Prefab
    Select the Player Stamina HUD prefab.

2: Enemy #

The enemy HUD is a bit different, add a new HUD.

It’ll be displayed at the combatant’s game object (they already have a child object added for the HUD’s position).

HUD Settings #

  • Name
    Set to Enemy.
  • HUD Type
    Select Combatant Object.
  • Auto Display
    Enable this setting.

Combatant Settings #

  • Enemy
    Enable this setting.
  • Child Object
    Select Path.
    We’ll define the path to a child object.
  • Find Child
    Set to HUD.
    This’ll use a child object on the combatants named HUD to place the HUD.
  • Limit Display Range
    Enable this setting.
    We only display the HUD when the combatant is close enough to the player.
  • Range
    Select Value > Value.
    Set the value to 15.

Unity UI #

  • UI Layer
    Select HUDs.
  • HUD Prefab
    Select the Enemy HUD prefab.

Save Changes #

And that’s it for the HUD setup.

Don’t forget to save your changes by clicking on Save Settings at the bottom of the editor.

Testing #

Hit play (in the Scene scene) and do something.

Attacking or sprinting will show the stamina HUD (and it vanishes when it’s full again).

Enemies have a HUD above them when they’re close enough – attacking them shows the damage we do in a different color and our own health also works.

Great! You can also finally notice that the stamina system we’ve set up works – using stamina shortly stops regeneration, kicking back in after a second (until we keep using it).

 

Next, we’ll start rolling on the floor!

Share This Article :
  • Facebook
  • X
  • LinkedIn
  • Pinterest
Table of Contents
  • Enemy HUD Prefab
    • HUD Base
      • Rect Transform
      • Vertical Layout Group
      • Content Size Fitter
    • Name
      • ORK HUD Status Text Content
      • TextMeshPro - Text (UI)
    • HP
      • HUD Status Value
      • Layout Element
      • Empty Sprite
      • Positive Change Sprite
      • Negative Change Sprite
      • Value Sprite
    • Create Prefab
  • Player Health HUD Prefab
    • HUD Base
      • Rect Transform
    • HP
      • Rect Transform
      • HUD Status Value
    • Border Image
      • Rect Transform
      • Image
    • Name, Value
    • Mask
      • Rect Transform
      • Mask
      • Image
    • Value Bar
      • Empty Sprite
      • Positive Change Sprite
      • Negative Change Sprite
      • Value Sprite
    • Create Prefab
  • Player Stamina HUD Prefab
    • HUD Base
      • Rect Transform
      • Image
      • Soft Mask
    • Stamina
      • Rect Transform
      • HUD Status Value
      • Empty Sprite
      • Value Sprite
    • Create Prefab
  • HUD UI Layer
  • HUD Animations
    • Default Schematics
  • HUD Setup
    • 0: Player Health
      • HUD Settings
      • Combatant Settings
      • Display Conditions
      • Unity UI
    • 1: Player Stamina
      • HUD Settings
      • Display Conditions > Combatant Requirements
      • Unity UI
    • 2: Enemy
      • HUD Settings
      • Combatant Settings
      • Unity UI
  • Save Changes
  • Testing
Sitemap
  • Features
  • Showcase
  • Guide
    • Documentation
    • Tutorials
    • API
  • ORK 2 Hub
    • Tutorials
    • Plugins
    • API
  • Support
  • Forum
  • Get ORK
  • Contact
  • Blog
  • Makinom
  • gamingislove.com
Categories
  • News (69)
  • ORK 2 (137)
    • Tutorial (137)
      • Game tutorial (50)
      • Gameplay (32)
      • How-to (55)
  • Release (149)
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!