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

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: 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
  • 3D RPG Playground
  • MENU 02 Template HUDs

MENU 02 Template HUDs

Table of Contents
  • Status Value UI Prefabs
    • Experience
      • Image
    • Normal (No Bar)
      • Value Bar
      • Value
    • Normal Preview (No Bar)
      • Name
      • Value
  • Combatant Info HUD Prefab
    • HUD
      • Rect Transform
      • UI Color Changer
      • Content Size Fitter
    • Icon
      • Layout Element
    • Child Object
    • Status Text
      • ORK HUD Status Text Content
      • TextMesh Pro - Text (UI)
    • Status Value List
      • HUD Status Value List
    • Status Effect List
      • HUD Status Effect List
      • Grid Layout Group
    • Create Prefab
  • Combatant Info EXP HUD Prefab
    • HUD Status Value List
    • Create Prefab
  • Status Value Preview HUD
    • HUD
      • Rect Transform
      • UI Color Changer
      • Vertical Layout Group
      • Content Size Fitter
    • Status Text
      • ORK HUD Status Text Content
      • TextMesh Pro - Text (UI)
    • Status Value List
      • HUD Status Value List
      • Vertical Layout Group
    • Create Prefab
  • Empty Button Prefab
    • Remove Child Objects
    • Image
    • Layout Element
    • Create Prefab
  • HUD Setup
    • Combatant Information
      • Unity UI
    • Combatant Information EXP
      • Unity UI
    • Status Value Preview
      • Unity UI
  • Status Value UI Setup
    • Experience
      • UI Settings > Custom Status Value UI
    • Other Status Value UI
      • ORK UI Settings > HUD Settings > Default Status Value UI
  • Save Changes

In this tutorial we’ll set up HUDs we’ll use as templates.

This tutorial continues the sub-series for setting up menu screens.

HUDs can be used as templates to be added to UI boxes (either directly or on buttons) – we’ll make use of this to display status information of our combatants in different ways.

First, we’ll set up additional Status Value UI setups (see this documentation for details):

  • experience with value bar (just a variation of our already created HP/MP UI)
  • name and value (no bar)
  • name and value (no bar) with preview values to show how equipment changes the status values

Afterwards, we’ll set up 3 HUD templates:

  • template similar to the player HUD, but with different layout
  • another variant of this, but including experience bar
  • listing all Normal type status values (for equipment change previews)

We’ll also set up an empty button prefab we’ll use in our menus to display a HUD template.

Let’s get to it!

Status Value UI Prefabs #

We’ll start with the status value UI prefab setup.

Experience #

This one will be easy – duplicate the Status Value MP prefab, open it for editing and change the following settings.

Image #

Select the Status Value > Value Bar > Value Sprite child object and change the Image component.

  • Color
    Select a yellow color with full alpha (e.g. A=255 or 1, depending on your color picker).

Exit the prefab editing and rename the prefab, e.g. name it Status Value EXP.

Normal (No Bar) #

This’ll be used to display the name and value (without maximum value) of a status value, e.g. for listing normal status values.

Duplicate the Status Value HP prefab – i.e. the original, not variant prefab. Open it for editing and change the following settings.

Value Bar #

Remove the Status Value > Value Bar child object.

Value #

Select the Status Value > Value child object, we’ll adjust the text of the ORK HUD Status Text Content component.

  • Default Content (Text)
    Set to: <value>

Exit the prefab editing and rename the prefab, e.g. name it Status Value.

Normal Preview (No Bar) #

This’ll be used to additionally show previews for status value changes, e.g. when selecting equipment.

Duplicate the Status Value prefab we just created, open it for editing and change the following settings.

Name #

Select the Status Value > Name child object, we’ll change settings in the ORK HUD Status Text Content component.

  • Value Origin
    Select Preview.
  • Use Preview Blink
    Disable this setting.
  • Default Content (Positive Preview Text)
    Set to: <color=#00FF00FF><shortname></color>
  • Default Content (Negative Preview Text)
    Set to: <color=#FF0000FF><shortname></color>

Value #

Select the Status Value > Value child object, we’ll change settings in the ORK HUD Status Text Content component.

  • Value Origin
    Select Preview.
  • Use Preview Blink
    Disable this setting.
  • Default Content (Positive Preview Text)
    Set to: <color=#00FF00FF>(+<change>) <value></color>
  • Default Content (Negative Preview Text)
    Set to: <color=#FF0000FF>(<change>) <value></color>

Exit the prefab editing and rename the prefab, e.g. name it Status Value Preview.

That’s it for the status value UI prefabs.

Combatant Info HUD Prefab #

Now, we’ll set up our first template HUD, we’ll use it as information in some menu screens, as well as the content for buttons in combatant selections (e.g. also for target selection in battle menus).

The HUD will display the combatant’s icon, name, level, HP, MP and status effects.

Create a new HUD using the scene hierarchy context menu: Makinom > HUD > HUD (Horizontal Layout)

HUD #

We’ll adjust the root HUD game object.

Rect Transform #

  • Width
    Set to 300.
    This is just for making editing a bit easier and things better visible.
    The actual width of the HUD will be set whatever is displaying it, e.g. a UI box or input button.

UI Color Changer #

Remove the UI Color Changer component.

Usually, we’ll want this added to be able to change the color of the HUD, but this HUD is used as a template and displayed by UI boxes or inputs on them.

When used on inputs, the UI Color Changer of the HUD would interfere with the input’s color changer, preventing from using the input’s color for selection highlighting.

Content Size Fitter #

Add a Content Size Fitter component and change the following setting.

  • Vertical Fit
    Select Preferred Size.

Icon #

Use the context menu on the HUD game object to add a content icon: ORK Framework > HUD > Content > Status Icon Content

Layout Element #

Add a Layout Element component to the icon’s game object and change the following settings.

We’ll use the size of our combatant icons as preferred width/height.

  • Preferred Width
    Enable this setting.
    Set the value to 128.
  • Preferred Height
    Enable this setting.
    Set the value to 128.

Child Object #

Add an empty child object to the HUD game object and rename it to e.g. Status Information. We’ll use this to list the combatant’s status information vertically beside the icon.

Add a Vertical Layout Group component to the child object and change the following settings.

  • Spacing
    Set to 5.
  • Control Child Size
    Enable Width and Height.
  • Child Force Expand
    Enable Width.
    Disable Height.

Status Text #

Use the context menu on the Status Information child object to add a content text: ORK Framework > HUD > Content > Status Text Content

ORK HUD Status Text Content #

  • Default Content (Text)
    Set to: <name>, Level <level>

TextMesh Pro – Text (UI) #

Adjust the text to your liking, e.g. I’m using a font size of 20.

Status Value List #

Use the context menu on the Status Information child object to add a status value list: ORK Framework > HUD > Status Value > Status Value List (Vertical Layout)

HUD Status Value List #

  • List Status Values
    Select Status Value Type.
  • Status Value Type
    Select Consumable.
  • UI Key
    Nothing defined here (empty text).

Status Effect List #

Use the context menu on the Status Information child object to add a status effect list: ORK Framework > HUD > Status Effect > Status Effect List (Grid Layout)

HUD Status Effect List #

We’ll stick with the default setup here.

Grid Layout Group #

  • Cell Size
    Set to X=50, Y=50.
  • Spacing
    Set to X=5, Y=5.

Create Prefab #

That’s it for this HUD prefab – create a prefab out of it, e.g. name it Combatant Information HUD.

Combatant Info EXP HUD Prefab #

With the HUD still open, we’ll now make a small adjustment and create another prefab.

HUD Status Value List #

Select the HUD > Status Information > Status Value List child object and change the following settings in the HUD Status Value List component.

  • List Status Values
    Select Defined.

We’ll now define which status values are displayed – this way we can mix different types. Change the already added Status Value 0.

  • Status Value
    Select Health Points.

Click on Add Status Value.

  • Status Value
    Select Magic Points.

Click on Add Status Value.

  • Status Value
    Select Experience.

Create Prefab #

That’s it for this HUD prefab – create a new prefab out of it, e.g. name it Combatant Information EXP HUD.

Status Value Preview HUD #

Now, we’ll create a new HUD that’ll list all Normal type status values to show preview values.

Create a new HUD using the context menu: Makinom > HUD > HUD (Vertical Layout)

HUD #

We’ll adjust the root HUD game object.

Rect Transform #

  • Width
    Set to 300.
    This is just for making editing a bit easier and things better visible.
    The actual width of the HUD will be set whatever is displaying it, e.g. a UI box or input button.

UI Color Changer #

Remove the UI Color Changer component.

Vertical Layout Group #

  • Spacing
    Set to 20.

Content Size Fitter #

Add a Content Size Fitter component and change the following setting.

  • Vertical Fit
    Select Preferred Size.

Status Text #

Use the context menu on the HUD game object to add a content text: ORK Framework > HUD > Content > Status Text Content

ORK HUD Status Text Content #

  • Default Content (Text)
    Set to: <name>, Level <level>

TextMesh Pro – Text (UI) #

Adjust the text to your liking, e.g. I’m using a font size of 20.

Status Value List #

Use the context menu on the HUD game object to add a status value list: ORK Framework > HUD > Status Value > Status Value List (Vertical Layout)

HUD Status Value List #

  • List Status Values
    Select Status Value Type.
  • Status Value Type
    Select Normal.
  • UI Key
    Set to preview.
    We’ll use this UI key to set up the preview status value UI.

Vertical Layout Group #

  • Spacing
    Set to 10.

Create Prefab #

That’s it for this HUD prefab – create a new prefab out of it, e.g. name it Status Value Preview HUD.

Empty Button Prefab #

As our last prefab, we’ll set up the empty button – but we’ll not use the Empty Button variant from the context menu, as we still want the button to have an image, just no content.

Use the scene hierarchy context menu to create a button: Makinom > UI Box > Input (Button) > Choice Button

Remove Child Objects #

Remove the Image and Text Child objects from the button.

Image #

Select the Choice Button game object and change the Image component.

  • Source Image
    Select Button Simple.

Layout Element #

  • Preferred Height
    Set to 50.

Create Prefab #

That’s it for this button prefab – create a prefab out of it, e.g. name it Empty Button.

HUD Setup #

Open the Makinom editor and navigate to UI > HUDs, we’ll add 3 new HUDs.

All 3 HUDs will be used as templates, i.e. they’re not displayed on their own, so we can ignore most of their settings.

Combatant Information #

  • Name
    Set to Combatant Information.
  • HUD Type
    Select Combatant.
  • Auto Display
    Disable this setting.

Unity UI #

  • UI Layer
    Select HUDs.
  • HUD Prefab
    Select the Combatant Information HUD prefab.

Combatant Information EXP #

Copy the Combatant Information HUD and change the following settings.

  • Name
    Set to Combatant Information EXP.

Unity UI #

  • HUD Prefab
    Select the Combatant Information EXP HUD prefab.

Status Value Preview #

Copy the Combatant Information EXP HUD and change the following settings.

  • Name
    Set to Status Value Preview.

Unity UI #

  • HUD Prefab
    Select the Status Value Preview HUD prefab.

Status Value UI Setup #

And finally, we’ll use the status value UI prefabs.

Experience #

Navigate to Status > Status Values and select the Experience status value.

UI Settings > Custom Status Value UI #

  • Own Status Value UI
    Enable this setting.
  • UI Prefab
    Select the Status Value EXP prefab we created.

Other Status Value UI #

Navigate to UI > UI Settings, we’ll set up the default status value UI for all status values here.

ORK UI Settings > HUD Settings > Default Status Value UI #

  • UI Prefab
    Select the Status Value prefab we created.

Click on Add Key Setup, we’ll also add the preview variant.

  • UI Key
    Set to preview.
    Make sure this matches the UI key we used in the template HUD prefab earlier.
  • UI Prefab
    Select the Status Value Preview prefab we created.

Save Changes #

And that’s it!

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

Next, we’ll set up the overview menu (and some other menu settings).

Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Updated on March 19, 2022
Table of Contents
  • Status Value UI Prefabs
    • Experience
      • Image
    • Normal (No Bar)
      • Value Bar
      • Value
    • Normal Preview (No Bar)
      • Name
      • Value
  • Combatant Info HUD Prefab
    • HUD
      • Rect Transform
      • UI Color Changer
      • Content Size Fitter
    • Icon
      • Layout Element
    • Child Object
    • Status Text
      • ORK HUD Status Text Content
      • TextMesh Pro - Text (UI)
    • Status Value List
      • HUD Status Value List
    • Status Effect List
      • HUD Status Effect List
      • Grid Layout Group
    • Create Prefab
  • Combatant Info EXP HUD Prefab
    • HUD Status Value List
    • Create Prefab
  • Status Value Preview HUD
    • HUD
      • Rect Transform
      • UI Color Changer
      • Vertical Layout Group
      • Content Size Fitter
    • Status Text
      • ORK HUD Status Text Content
      • TextMesh Pro - Text (UI)
    • Status Value List
      • HUD Status Value List
      • Vertical Layout Group
    • Create Prefab
  • Empty Button Prefab
    • Remove Child Objects
    • Image
    • Layout Element
    • Create Prefab
  • HUD Setup
    • Combatant Information
      • Unity UI
    • Combatant Information EXP
      • Unity UI
    • Status Value Preview
      • Unity UI
  • Status Value UI Setup
    • Experience
      • UI Settings > Custom Status Value UI
    • Other Status Value UI
      • ORK UI Settings > HUD Settings > Default Status Value UI
  • Save Changes
Sitemap
  • Features
  • Showcase
  • Guide
    • Documentation
    • Tutorials
    • API
  • ORK 2 Hub
    • Tutorials
    • Plugins
    • API
  • Support
  • Forum
  • Get ORK
  • Contact
  • Blog
  • Makinom
  • gamingislove.com
Categories
  • News (59)
  • ORK 2 (137)
    • Tutorial (137)
      • Game tutorial (50)
      • Gameplay (32)
      • How-to (55)
  • Release (129)
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!