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
  • 2D RPG Quickstart
  • 16 Player Battle HUD

16 Player Battle HUD

Table of Contents
  • Status Value UI Prefab
    • Rect Transform
    • Layout Element
    • Name
    • Value
    • Value Bar
      • Rect Transform
      • ORK HUD Value Bar Content
      • HUD Value Bar (Sprite)
      • Empty Sprite
      • Value Sprite
    • Create Prefab
  • Status Effect UI
    • Rect Transform
    • Layout Element
    • Name
    • Duration Text
      • TextMeshPro - Text (UI)
    • Create Prefab
  • Battle HUD Prefab
    • Base HUD
      • Rect Transform
      • Horizontal Layout Group
      • Image
    • Status Effects
      • HUD Status Effect List
      • Horizontal Layout Group
      • Layout Element
    • Name
      • ORK HUD Status Text Content
      • TextMeshPro - Text (UI)
      • Layout Element
    • Status Values
      • HUD Status Value List
      • Horizontal Layout Group
    • Create Prefab
  • UI Setup
    • UI Settings
      • ORK Settings > HUD Settings > Default Status Value UI
      • ORK Settings > HUD Settings > Default Status Effect UI
    • UI Layout
      • UI Layout Settings
      • List Layout Settings
    • HUDs General Settings
      • Default Schematic
    • Player Battle HUD
      • HUD Settings
      • Combatant Settings
      • Display Conditions > Game State Condition
      • Unity UI
    • Save Changes
  • Testing

In this tutorial we’ll set up a HUD to display the player’s status information during battle.

The HUD will show the status effects added to the player, the combatant’s name and their current HP and MP. Since we’ll add a 2nd player combatant later, the HUD will be displayed using a UI layout and list them vertically in the bottom right corner of the screen.

We’ll set up multiple things for this:

  • status value UI
  • status effect UI
  • HUD prefab
  • HUD setup

Let’s get to it!

Status Value UI Prefab #

First, we’ll set up the status value UI for our status values – a way to define how a status value should be displayed in the UI. You can learn more about status value UI in this documentation.

We’ll create a UI that shows the status value’s name on the left side, it’s current value at the right side and a value bar below the text. The value bar uses a sprite and fills it according to the status value’s filled state.

As with all content when using the Unity UI module, we’ll set up a prefab for that. It’s best to do this in the UI Environment Scene, so open it.

We can create a ready-to-use setup using the scene hierarchy’s context menu: ORK Framework > HUD > Status Value > Status Value – Name+Value+Bar (for prefabs)

Rect Transform #

We’ll change the size of the Status Value game object.

  • Width
    Set to 400.
  • Height
    Set to 40.

Layout Element #

We’ll display our status values in a horizontal list and want them to stick to the size we defined, so we need to make sure by using a Layout Element component.

Add a Layout Element component using the component menu.

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

Name #

The Status Value > Name child object contains the setup to display the name on the left side. This is handled by the ORK HUD Status Text Content component, which is the go-to component for all status-related HUD displays.

The actual display of the content is handled by Image and TextMeshPro – Text (UI) components, i.e. similar to the UI boxes and input prefabs.

Value #

The Status Value > Value child object contains the setup to display the value on the right side. It works the same way as the Name.

Value Bar #

We’ll adjust the value bar to only be displayed at the bottom of the status value UI.

Select the Status Value > Value Bar child object.

Rect Transform #

The value bar uses a stretch stretch anchor preset, i.e. it’ll stretch to the width/height of the parent game object.

We’ll add a padding to the top, to have the bar only at the bottom.

  • Top
    Set to 35.

ORK HUD Value Bar Content #

This component handles what’s displayed by the value bar.

HUD Value Bar (Sprite) #

This component handles actually displaying the value bar via multiple Image components (on child objects).

We need to set the sprite used by those components.

Empty Sprite #

Select the Status Value > Value Bar > Empty Sprite child object.

This is used to display the empty part of the value bar.

  • Source Image
    Select the White_16x16 sprite.
    You can find it in Assets/Tutorial Assets/Images/UI/.
  • Color
    Set to a black color with full alpha (A=1 or A=255, depending on the color picker).

Value Sprite #

Select the Status Value > Value Bar > Value Sprite child object.

This is used to display the filled part of the value bar.

  • Source Image
    Select the White_16x16 sprite.
    You can find it in Assets/Tutorial Assets/Images/UI/.
  • Color
    Set to a white color with full alpha (A=1 or A=255, depending on the color picker).

The Value Sprite‘s image type should be set to Filled, this enables the value display to fill the sprite according to the value that’s displayed.

The finished status value UI should look like this:

Create Prefab #

Create a prefab out of the Status Value game object by dragging it on the project view. Rename the prefab to Status Value UI.

Remove the game object from the canvas.

Status Effect UI #

Next, we’ll set up the status effect UI for our status effects – a way to define how a status effect should be displayed in the UI. You can learn more about status effect UI in this documentation.

We’ll create a UI that shows the status effect’s icon and it’s duration at the bottom.

Again, we can use the scene hierarchy’s context menu for a quick setup: ORK Framework > HUD > Status Effect > Status Effect Content+Duration (for prefabs)

Rect Transform #

We’ll change the size of the Status Effect Content game object.

  • Width
    Set to 40.
  • Height
    Set to 40.

Layout Element #

Like with the status value UI, we want to make sure the size is used when displayed in a layout component list.

Add a Layout Element component using the component menu.

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

Name #

The created setup also displays the name of the effect – we don’t want that.

Remove the Status Effect Content > Content > Text child object.

Duration Text #

Select the Status Effect Content > Duration Text child object.

This is set up to display the duration of the status effect at the bottom center of the effect’s UI. That’s fine for us, but we still want to adjust the text size and color.

TextMeshPro – Text (UI) #

We can adjust this in the TMP component (as usual).

  • Font Size
    Set to 12.
  • Vertex Color
    Select a red color.
  • Wrapping
    Select Disabled.
    This prevents a longer text from being wrapped when exceeding the available space.

The finished status effect UI should look like this:

Create Prefab #

Create a prefab out of the Status Effect Content game object by dragging it on the project view. Rename the prefab to Status Effect UI.

Remove the game object from the canvas.

Battle HUD Prefab #

Next, we’ll set up our actual HUD prefab.

The HUD should list the combatant’s currently applied status effects, name, HP and MP and allign all of them horrizontally.

Base HUD #

Create the base of the HUD using the scene hierarchy’s context menu: Makinom > HUD > HUD (Horizontal Layout)

Rect Transform #

Since we’ll use a UI layout to list the HUD for multiple (player) combatants, we don’t have to worry about the position of it, but we need to set the size.

  • Width
    Set to 1325.
  • Height
    Set to 60.

Horizontal Layout Group #

We’ll adjust the padding, spacing and child alignment.

  • Padding
    Set to Left=10, Right=10, Top=10, Bottom=10.
  • Spacing
    Set to 10.
  • Child Alignment
    Set to Middle Left.

Image #

Add an Image component using the component menu – we’ll use it to add a blue background to the HUD.

  • Source Image
    Select the BoxBlue sprite.
    You can find it in Assets/Tutorial Assets/Images/UI/.

Status Effects #

The first information in the HUD (listed from the left side) will be the status effects.

HUDs can list them using a HUD Status Effect List component. It’ll use the status value UI to create prefabs (as child objects of the list) for individual status effects.

We can add a setup using the scene hierarchy’s context menu: ORK Framework > HUD > Status Effect > Status Effect List (Horizontal Layout)

HUD Status Effect List #

We’ll adjust how the effects are listed – we’ll limit the display to 4 effects at a time.

The status effects are displayed using status effect UI, where you can set up different versions using UI keys. We’ll only have the one version we created earlier (still need to set it up in the editor), so we’ll use an empty UI key to use the default/standard setup we’ll set up.

  • Count Limit
    Select Defined.
  • Max Count
    Set to 4.
  • UI Key
    Leave empty.
    The UI key defines which status effect UI is used.

Horizontal Layout Group #

We’ll change it to fill the layout from the right side.

  • Child Alignment
    Select Middle Right.

Layout Element #

Add a Layout Element component using the component menu.

We’ll use it to set the size of the status effect list – otherwise it’d be determined by the parent HUD’s layout group.

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

Name #

Next, we’ll add the combatant’s name.

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

This’ll add a text-only content, without any icon/image setup.

ORK HUD Status Text Content #

This component handles the text content that’s displayed – the standard setup already shows the combatant name, but let’s look into it anyway.

  • Status Type
    Select Combatant Information.
    This type is used to display different content about a combatant.
  • Default Content (Text)
    Set to: <name>

TextMeshPro – Text (UI) #

We’ll adjust the alignment of the text to keep it in the (vertical) center.

  • Alignment
    Select Left and Middle alignment.

Layout Element #

Add a Layout Element component using the component menu.

We’ll use it to set the size of the name – otherwise it’d be determined by the parent HUD’s layout group.

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

Status Values #

And finally, we add the status values (HP and MP) – we’ll use a HUD Status Value List component for this, similar to the status effects.

The status value UI will be used to create prefabs of the individual status values as child objects of the list.

Add a horizontal status value list using the scene hierarchy’s context menu on the root HUD game object: ORK Framework > HUD > Status Value > Status Value List (Horizontal Layout)

HUD Status Value List #

We’ll select which status values will be listed – the Consumable status values HP and MP.

The status values are displayed using status value UI, where you can set up different versions using UI keys. We’ll only have the one version we created earlier (still need to set it up in the editor), so we’ll use an empty UI key to use the default/standard setup we’ll set up.

  • List Status Values
    Select Status Value Type.
  • Status Value Type
    Select Consumable.
  • UI Key
    Leave empty.
    The UI key defines which status value UI is used.

Horizontal Layout Group #

We’ll change the spacing to use the same as the root HUD.

  • Spacing
    Set to 10.

The finished HUD should look like this:

Create Prefab #

Create a prefab out of the HUD game object by dragging it on the project view. Rename the prefab to Player Battle HUD.

Remove the game object from the canvas.

UI Setup #

We still need to set up the status value UI, status effect UI and HUD in the editor.

UI Settings #

We’ll start with the status value/effect UI.

Open the Makinom editor and navigate to UI > UI Settings.

ORK Settings > HUD Settings > Default Status Value UI #

These settings define the default status value UI for all status values. Individual status values can replace them with their custom setup.

  • UI Prefab
    Select the Status Value UI prefab.
    This is prefab is used if an empty UI key is used or no prefab is found for a defined UI key.

ORK Settings > HUD Settings > Default Status Effect UI #

These settings define the default status effect UI for all status effects. Individual status effects can replace them with their custom setup.

  • UI Prefab
    Select the Status Effect UI prefab.
    This is prefab is used if an empty UI key is used or no prefab is found for a defined UI key.

UI Layout #

Next, we’ll set up the UI layout we’ll use to list our HUDs. The layout will list them horizontally in the lower right corner.

Navigate to UI > UI Layouts and change the Default layout.

UI Layout Settings #

  • Name
    Set to: Player Battle HUD
  • Layout Type
    Select List.

List Layout Settings #

We’ll invert the displayed content, i.e. the first will be at the bottom of the screen, adding them upwards.

This will fit how your player combatants are ordered on screen due to their battle spots.

  • Anchor
    Select Lower Right.
  • Padding
    Set to X=0, Y=0, Z=10, W=10.
    This’ll add a padding to the bottom and right side of the screen.
  • Spacing
    Set to 20.
    This is the spacing between UI elements displayed using this layout.
  • List Fill
    Select Vertical.
  • Invert
    Enable this setting.

HUDs General Settings #

Next, we set up the default schematics for animating opening and closing our HUDs.

Navigate to UI > HUDs > General Settings.

Default Schematic #

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

Player Battle HUD #

And lastly, we set up the actual HUD.

Navigate to UI > HUDs and select the Default HUD.

HUD Settings #

  • Name
    Set to: Player Battle
  • HUD Type
    Select Combatant.
    I.e. the HUD will be displayed for defined combatants, one HUD for each.
    The combatant will be set as the content of the HUD, which is used by the components on our prefabs to display content.
  • 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 #

  • Player
    Enable this setting.
  • Player Group Scope
    Select Battle.
    This will show the battle group members of the player group.
  • Multi-Box Layout
    Select UI Layout.
  • UI Layout
    Select Player Battle HUD.
  • Shared Layout
    Enable this setting.
    In case different HUDs use the same layout, this option allows them to share the same layout, mixing them together.

Display Conditions > Game State Condition #

We’ll use the game state Show Battle HUD we set up earlier (and which is set by our battle start/end schematics).

The HUD will only be displayed when the game state is active.

Click on Add Game State.

  • Condition Type
    Select Game State.
    We’ll directly check a game state instead of e.g. a template.
  • Game State
    Select Show Battle HUD.
  • Check State
    Select Active.

Unity UI #

  • UI Layer
    Select HUD.
    We set up the layer earlier.
  • HUD Prefab
    Select the Player Battle HUD prefab.

Save Changes #

And that’s it!

Save the changes using the Save Settings button at the bottom of the editor.

Testing #

Open the Forest (or Town) scene and hit play. Run around to start a random battle.

The HUD is displayed during battles – the status updates according to what happens, giving us some insight in the player’s state.

Everything works, great!

 

Next, we’ll add elemental attacks for the player.

Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Updated on February 22, 2023
Table of Contents
  • Status Value UI Prefab
    • Rect Transform
    • Layout Element
    • Name
    • Value
    • Value Bar
      • Rect Transform
      • ORK HUD Value Bar Content
      • HUD Value Bar (Sprite)
      • Empty Sprite
      • Value Sprite
    • Create Prefab
  • Status Effect UI
    • Rect Transform
    • Layout Element
    • Name
    • Duration Text
      • TextMeshPro - Text (UI)
    • Create Prefab
  • Battle HUD Prefab
    • Base HUD
      • Rect Transform
      • Horizontal Layout Group
      • Image
    • Status Effects
      • HUD Status Effect List
      • Horizontal Layout Group
      • Layout Element
    • Name
      • ORK HUD Status Text Content
      • TextMeshPro - Text (UI)
      • Layout Element
    • Status Values
      • HUD Status Value List
      • Horizontal Layout Group
    • Create Prefab
  • UI Setup
    • UI Settings
      • ORK Settings > HUD Settings > Default Status Value UI
      • ORK Settings > HUD Settings > Default Status Effect UI
    • UI Layout
      • UI Layout Settings
      • List Layout Settings
    • HUDs General Settings
      • Default Schematic
    • Player Battle HUD
      • HUD Settings
      • Combatant Settings
      • Display Conditions > Game State Condition
      • 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 (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!