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: Defence Modifiers

Unity UI: Defence Modifiers

Table of Contents
  • Defence Modifier ID Prefab
    • ORK HUD Status Text Content
      • Name
      • ID
      • Text Styling
    • Create prefab
  • Defence Modifier Attribute Prefab
    • ORK HUD Status Text Content
      • Name
      • Value
      • Text Styling
    • Create prefab
  • Defence Modifier Prefab
    • Layout
      • Vertical Layout Group
      • Content Size Fitter
    • ORK HUD Status Text Content
      • Text Styling
    • HUD Defence Modifier Attribute List
    • Create prefab
  • HUD Prefab
    • Vertical Layout Group
    • HUD Defence Modifier ID List
    • HUD Defence Modifier List
    • Create prefab
  • HUD Setup
    • HUD Settings
      • Combatant Settings
      • Display Conditions
      • Unity UI
    • Save Settings
  • Test Setup
    • Menu Screen Settings > Settings
    • Combatant Menu Part
      • Entry Page 0 > Message Content
    • Save Settings
    • Testing

Create a HUD displaying defence modifiers using the Unity UI module.

In this tutorial we’ll create a Combatant type HUD to display defence modifiers of a combatant. We’ll set it up as a template HUD, allowing other parts of the UI to use it, e.g. menu screens or bestiary information.

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.

The Unity UI module will create our HUD using prefabs – we’ll have to set up 4 prefabs for this:

  • HUD
    The actual HUD, which lists the defence modifiers.
  • Defence Modifier
    The individual defence modifier, which lists the modifier’s attributes.
  • Defence Modifier Attribute
    The individual defence modifier attribute (to display the values).
  • Defence Modifier ID
    The combatant’s attribute of a defence modifier.

We’ll create the prefabs in reverse order, i.e. starting with the defence modifier ID and defence modifier attribute and ending with the actual HUD’s prefab. This is due to using the prefabs in their previous prefab, e.g. the attribute prefabs are used by the defence modifier prefabs to list the attributes.

This might sound more complicated than it actually is. Using the scene hierarchy context menu will create ready to use setups, which we just have to adjust to our needs and style.

You can learn more about defence modifiers in HUDs in this documentation.

Defence Modifier ID Prefab #

First, we’ll create the prefab for the defence modifier IDs. An ID is be the attribute of a combatant e.g. Human in a Race defence modifier.

We create a ready to use setup using the scene hierarchy’s context menu: ORK Framework > HUD > Defence Modifier > Defence Modifier ID – Name+ID (for prefabs)

This will create a Canvas to style our UI in – the canvas is set up as Makinom’s default canvas would be. The ready to use defence modifier ID game object is also set up for us and we can now style it to our liking.

The size and placement of the game object doesn’t matter. The prefab we’ll create out of it will be placed in the HUD using a Vertical Layout Group, which controls these parameters.

ORK HUD Status Text Content #

This component manages the text content that is displayed. There are 2 components added, one on the Name child object and one on the ID child object.

Name #

The Name child object handles the name of the defence modifier. The context menu already set it up for us, but let’s check the settings.

  • Status Type
    Select Defence Modifier ID.
  • Text
    Set to: <typename>

Unlike for displaying attributes, we want to display the name of the defence modifier itself.

ID #

The ID child object handles the name of the combatant’s attribute. Again, the set up is already correct for our needs.

  • Status Type
    Select Defence Modifier ID.
  • Text
    Set to: <name>

Text Styling #

The TextMeshPro – Text (UI) components on the Name > Text and ID > Text child objects are responsible for displaying the text.

This is where you can change the font, font size, font color, etc.

Create prefab #

Create a prefab out of the Defence Modifier ID game object (i.e. not the including Canvas).

You can remove the game object from the scene after creating the prefab.

Defence Modifier Attribute Prefab #

Next, we’ll create the prefab for the defence modifier attributes. An attribute would e.g. be Medium in a Size defence modifier.

Create a ready to use setup using the context menu: ORK Framework > HUD > Defence Modifier > Defence Modifier Attribute – Name+Value (for prefabs)

The size and placement of the game object doesn’t matter. The prefab we’ll create out of it will be placed in the HUD using a Vertical Layout Group, which controls these parameters.

ORK HUD Status Text Content #

This component manages the text content that is displayed. There are 2 components added, one on the Name child object and one on the Value child object.

Name #

The Name child object handles the name of the attribute. The context menu already set it up for us, but let’s check the settings.

  • Status Type
    Select Defence Modifier Attribute.
  • Text
    Set to: <name>

Value #

The Value child object handles the value of the attribute. Again, the set up is already correct for our needs.

  • Status Type
    Select Defence Modifier Attribute.
  • Text
    Set to: <value>

Text Styling #

The TextMeshPro – Text (UI) components on the Name > Text and Value > Text child objects are responsible for displaying the text.

This is where you can change the font, font size, font color, etc.

Create prefab #

Create a prefab out of the Defence Modifier Attribute game object (i.e. not the including Canvas).

You can remove the game object from the scene after creating the prefab.

Defence Modifier Prefab #

Next, we’ll set up the prefab for the defence modifiers.

Once again, create a ready to use setup using the context menu: ORK Framework > HUD > Defence Modifier > Defence Modifier – Name (for prefabs)

Beside the modifier’s name, we’ll also list the attributes of the modifier. The context menu only set up the name so far.

Layout #

We first need to add some layout components to have the listed attributes be added correctly. Also, since the defence modifier prefab is also listed by another game object, we need to ensure that it’s size fits the displayed content.

Vertical Layout Group #

Add a Vertical Layout Group to the Defence Modifier game object. This’ll arrange the name and added attributes in a vertical list.

  • Control Child Size
    Enable both Width and Height.
  • Use Child Scale
    Disable both Width and Height.
  • Child Force Expand
    Enable only Width.

I’ll leave Padding and Spacing to your own setup.

Content Size Fitter #

Add a Content Size Fitter to the Defence Modifier game object to make it adjust it’s size to the displayed content.

  • Vertical Fit
    Select Preferred Size.

ORK HUD Status Text Content #

The Name child object handles the name of the defence modifier. It’s setup is already correct.

  • Status Type
    Select Defence Modifier.
  • Text
    Set to: <name>

Text Styling #

The TextMeshPro – Text (UI) components on the Name > Text child object is responsible for displaying the text.

Adjust the font size, style and font color to differentiate it from the prevoius prefab’s text. The modifier’s name will serve as a header for the listed attributes.

I’m using font size 25, bold and an orange color.

HUD Defence Modifier Attribute List #

This component will list the modifier’s attributes using the prefab we created.

Use the scene hierarchy context menu to create it by right-clicking on the Defence Modifier game object: ORK Framework > HUD > Defence Modifier > Defence Modifier Attribute List (Vertical Layout)

  • Prefab
    Select the defence modifier attribute prefab we created.

Create prefab #

Create a prefab out of the Defence Modifier game object (i.e. not the including Canvas).

You can remove the game object from the scene after creating the prefab.

HUD Prefab #

We’ll use the HUD only as a template to display the defence modifiers.

First, create a new HUD with a vertical layout using the context menu: Makinom > HUD > HUD (Vertical Layout)

Vertical Layout Group #

Change the settings of the Vertical Layout Group component.

  • Control Child Size
    Enable both Width and Height.
  • Use Child Scale
    Disable both Width and Height.
  • Child Force Expand
    Enable only Width.

I’ll leave Padding and Spacing to your own setup.

HUD Defence Modifier ID List #

This component will list the combatant’s defence modifier attributes using the prefab we created.

Use the context menu to create it by right-clicking on the HUD game object: ORK Framework > HUD > Defence Modifier > Defence Modifier ID List (Vertical Layout)

  • Prefab
    Select the defence modifier ID prefab we created.
  • All Modifiers
    Enable this setting.

HUD Defence Modifier List #

This component will list the defence modifiers using the prefab we created.

Use the context menu to create it by right-clicking on the HUD game object: ORK Framework > HUD > Defence Modifier > Defence Modifier List (Vertical Layout)

  • Prefab
    Select the defence modifier prefab we created.
  • List Modifiers
    Select All.

Create prefab #

The position or size of the HUD doesn’t matter, because it’ll only be used as a template and displayed by other UI content.

Create a prefab out of the HUD game object (i.e. not the including Canvas).

You can now remove the canvas (and HUD) from the scene.

HUD Setup #

As a last step, we’ll set up the HUD in the Makinom editor.

Open the Makinom editor, navigate to UI > HUDs, add a new HUD and change the following settings.

HUD Settings #

  • Name
    Set to Defence Modifier Template.
  • HUD Type
    Select Combatant.
  • Auto Display
    Disable this setting.
    We only use this as a template for menu screens or bestiary dialogues.

Combatant Settings #

These settings can be ignored, since the HUD is used as a template.

Display Conditions #

These settings can be ignored, since the HUD is used as a template.

Unity UI #

  • UI Layer
    This setting can be ignored.
    The HUD will be used as part of a UI box and thus be part of the UI layer of the box.
  • HUD Prefab
    Select the HUD prefab you just created.

Save Settings #

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

Test Setup #

To test the HUD, you need to set up some other UI content, e.g. a menu screen.

I’ll only do a quick overview for a combatant status menu screen. Navigate to UI > Menu Screens and add a new menu screen.

Menu Screen Settings > Settings #

  • Use Call Key
    Enable this setting.
  • Call Input Key
    Select an input key to call the menu screen.

Combatant Menu Part #

Use the Add Menu Part button at the bottom of the settings to add a Combatant menu part.

  • UI Box
    Select the UI box that should display the content.
  • Combatant Scope
    Select Current.
    This’ll only display the menu’s user (usually the player).

Entry Page 0 > Message Content #

  • Add HUD
    Enable this setting.
  • HUD
    Select the HUD you set up for the template.

Save Settings #

That’s it – 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 (via the menu screen)! Naturally, you need a combatant in your player group for this to work.

If you’re not satisfied with the look, open up the prefabs and adjust them to your liking.

UI
Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Updated on February 14, 2022
Table of Contents
  • Defence Modifier ID Prefab
    • ORK HUD Status Text Content
      • Name
      • ID
      • Text Styling
    • Create prefab
  • Defence Modifier Attribute Prefab
    • ORK HUD Status Text Content
      • Name
      • Value
      • Text Styling
    • Create prefab
  • Defence Modifier Prefab
    • Layout
      • Vertical Layout Group
      • Content Size Fitter
    • ORK HUD Status Text Content
      • Text Styling
    • HUD Defence Modifier Attribute List
    • Create prefab
  • HUD Prefab
    • Vertical Layout Group
    • HUD Defence Modifier ID List
    • HUD Defence Modifier List
    • Create prefab
  • HUD Setup
    • HUD Settings
      • Combatant Settings
      • Display Conditions
      • Unity UI
    • Save Settings
  • Test Setup
    • Menu Screen Settings > Settings
    • Combatant Menu Part
      • Entry Page 0 > Message Content
    • Save Settings
    • 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!