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
  • Animating Target Selection
  • 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: 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

  • 2.5D Setup
  • 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
  • UI Setups
  • Unity UI: Battle Actions HUD

Unity UI: Battle Actions HUD

Table of Contents
  • HUD Prefab Setup
    • Creating the HUD
      • Rect Transform
      • Content Size Fitter
      • Image (Optional)
    • Add Action Content
      • ORK HUD Status Text Content
      • Icon
    • Create Prefab
  • HUD Setup
    • UI Layout
      • UI Layout Settings
      • List Layout Settings
      • Move Settings
    • Battle Action HUD
      • HUD Settings
      • Battle Actions Settings
      • Display Conditions > Action Checks
      • Display Conditions > Game State Conditions (Optional)
      • Unity UI
      • Schematics (Optional)
    • Save Changes
  • Testing
  • Tip! Detailed User/Target Information
  • Tip! Listing a Combatant's Actions

Create a battle actions HUD using the Unity UI module.

In this tutorial we’ll create a Battle Actions type HUD to display the battle actions that have been registered with the system. I.e. it’ll list all active, casting or scheduled actions that have been selected by combatants in battle, in the order they are used. A battle actions HUD is probably best suited for Classic mode turn based battles, but can be used in any battle system (and the field).

Similar to a Turn Order or Combatant type HUD, each battle action will be displayed by it’s own individual HUD. We’ll arrange them using a UI layout.

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 the HUDs for the individual battle actions using prefabs.

This tutorial is based on the 2D RPG Quickstart and 3D RPG Quickstart tutorial series, but you can use this for any kind of project.

You can download the completed HUD setup here:

Download HUD

This contains the action HUD prefab as well as the used images and font. You still need to set up the UI layout and HUD in the editor (using the action HUD prefab).

HUD Prefab Setup #

We’ll start with setting up the prefab that’ll be used to create each battle action’s HUD.

You can do this in any scene, but it’s best to do it in a separate scene (e.g. the UI Environment scene you set up in the initial UI setup) to not mess with your game’s scenes.

Creating the HUD #

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

This creates 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 #

We adjust the width of the HUD.

  • Width
    Set to 200.

Content Size Fitter #

We’ll add a Content Size Fitter to the HUD to make it adjust it’s size to the displayed content.

  • Vertical Fit
    Select Preferred Size.

Image (Optional) #

We’ll add an Image component to display a background image in the HUD.

  • Source Image
    Select the Sprite you want to use, e.g. the BoxBeige from the UI assets (see the initial setup tutorial).
  • Color
    Select a color you want to use (optional).
    E.g. for the BoxBeige sprite, a white color with full alpha.

Add Action Content #

Now that we’ve got our basic HUD, it’s time to add content to it.

We’ll make it simple by adding all information we want in a single text (and icon) – we’ll display the action’s icon, the name of the user, the name of the action and the name of the target(s).

We’ll add an ORK HUD Status Text Content to display text and icon. See this documentation for details.

Use the scene hierarchy’s context menu on the HUD game object to add the text and icon content: ORK Framework > HUD > Content > Status Text+Icon Content

This adds the content as a child object of the HUD, with icon and text being child objects the content object (in a horizontal layout).

We’ll only need to do two things now – set up our text and add a desired size to the icon.

ORK HUD Status Text Content #

We’ll start with the ORK HUD Status Text Content component added on the HUD > Status Content child object. This component defines the content that’ll be displayed.

  • Status Type
    Select Action Information.
    This content shows information of a battle action, the action has to be provided by the HUD or a content provider used by the component.
    We’ll use the HUD prefab in a Battle Actions HUD, so this is done automatically for us.
  • Use Content Icon
    Enable this setting.
    This should be the default setup – it’ll use the icon of the displayed content instead of any icon that’s defined in the component.

The text will add all the content we want, using text codes to alter the size and color of the individual parts.

  • Text (Default Content)
    Set the text to: <size=12px><color=#FFFFFFFF><username></color></size>
    <size=15px><b><color=#0000FFFF><name></color></b></size>
    <size=12px><color=#FF0000FF><targetnames></color></size>

The first line shows the name of the action’s user in white text with font size 12.

The 2nd line shows the name of the action in bold, blue text with font size 15.

The 3rd line shows the names of the targets in red text with font size 12. The <targetnames> text code is used to display the name of one or more targets – how this is done is defined in UI > Text Display Settings in the Combatant Texts > Combatant Name List settings and defaults to separating them by a comma.

Icon #

Next, we’ll set the icon to use a size of 50×50. Select the HUD > Status Content > Image child object.

Add a Layout Element component using the component menu.

  • Preferred Width
    Enable this setting and set the value to 50.
  • Preferred Height
    Enable this setting and set the value to 50.

The finished HUD will look like this.

Create Prefab #

You might be wondering about the placement of the HUD. We’ll use a UI Layout to handle this, but you can also use the actual HUD game object’s position if you want. In that case, place the HUD on the canvas where you want it to display.

That’s already everything we need to do. Create a prefab out of the HUD, e.g. save it as Action HUD.

In case you did the setup in one of your game scenes (and not the UI Envirnoment scene), don’t forget to remove the canvas from the scene.

HUD Setup #

With our prefab set up we can finish the setup in the Makinom editor.

We’ll set up the UI layout that’ll arrange the HUDs for multiple actions and the actual HUD.

UI Layout #

Open the Makinom editor and navigate to UI > UI Layouts, we’ll add a new layout.

UI Layout Settings #

  • Name
    Set to Battle Actions.
  • Layout Type
    Select List.

List Layout Settings #

  • Anchor
    Select Upper Left.
  • Padding
    Set to X=10, Y=10, Z=0, W=0.
  • Spacing
    Set to 10.
  • List Fill
    Select Horizontal.
  • Fill Anchor
    Select Upper Left.

Move Settings #

  • Use Move
    Enable this setting.
  • Time
    Set to 0.2.
  • Interpolation
    Select Quadratic > Quadratic In + Out.

Battle Action HUD #

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

HUD Settings #

  • Name
    Set to Battle Actions.
  • HUD Type
    Select Battle Actions.
  • Auto Display
    Enable this setting.

Battle Actions Settings #

  • Show Active Actions
    Enable this setting.
  • Show Casting Actions
    Enable this setting.
  • Show Scheduled Actions
    Enable this setting.
  • Player/Ally/Enemy
    Enable these settings.
    We’ll show the actions of all combatants involved in battle.
  • Multi-Box Layout
    Select UI Layout.
  • UI Layout
    Select Battle Actions (the UI layout we just created).
  • Shared Layout
    Enable this setting.
    It’s usually a good idea to used shared layouts – in case the UI layout is used for multiple things, all content will share the same instance, being arranged together.
    Otherwise this HUD will create it’s own instance of the layout, if other UI uses the same layout, it’ll use a different instance and not arrange together.

Display Conditions > Action Checks #

We’ll exclude counter attacks and death actions from being displayed.

Click on Add Action Check.

  • Action Type
    Select Counter Attack.
  • Is Valid
    Disable this setting.

Copy the previous action check and change the used action type.

  • Action Type
    Select Death.

Display Conditions > Game State Conditions (Optional) #

I’ll also limit the HUD to be only displayed in battle. Otherwise the HUD would be available at all times, e.g. also when using items or abilities in the field.

Click on Add Game State.

  • Condition Type
    Select Game State.
  • Game State 
    Select In Battle.
  • Check State
    Select Active.

Unity UI #

  • UI Layer
    Select HUD (or any other layer you want to use).
  • HUD Prefab
    Select the Action HUD prefab we just created.

Schematics (Optional) #

I’m also using the fade in and fade out schematics from the UI animations schematics to animate the HUD.

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

Save Changes #

And that’s it!

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

Testing #

Hit play and test your HUD in battle.

Actions are listed after they’ve been selected and are gone after they’re finished.

Great!

Tip! Detailed User/Target Information #

You can add more detailed information on the user and target(s) of an action by getting the user/target via a content provider or listing targets via a list component.

The HUD Action Combatant (Content Provider) component can be used to get the user or (single/first) target of a battle action (again, provided by another content provider like the HUD component at the HUD’s root). Other HUD components using the HUD Action Combatant as their content provider can show combatant information (e.g. status values) like a regular combatant HUD.

Use the HUD Action Target List component to list the targets of an action (not a content provider). This works similar to a status value or quest list, i.e. it’ll use a provided prefab to create content for the individual targets of the action.

Tip! Listing a Combatant’s Actions #

You can list the actions of a combatant (either the combatant being the user or a target of the actions), e.g. in a Combatant type HUD.

The HUD Combatant Action List component will list all found actions, creating them using a provided prefab.

UI
Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Updated on May 4, 2023
Table of Contents
  • HUD Prefab Setup
    • Creating the HUD
      • Rect Transform
      • Content Size Fitter
      • Image (Optional)
    • Add Action Content
      • ORK HUD Status Text Content
      • Icon
    • Create Prefab
  • HUD Setup
    • UI Layout
      • UI Layout Settings
      • List Layout Settings
      • Move Settings
    • Battle Action HUD
      • HUD Settings
      • Battle Actions Settings
      • Display Conditions > Action Checks
      • Display Conditions > Game State Conditions (Optional)
      • Unity UI
      • Schematics (Optional)
    • Save Changes
  • Testing
  • Tip! Detailed User/Target Information
  • Tip! Listing a Combatant's Actions
Sitemap
  • Features
  • Showcase
  • Guide
    • Documentation
    • Tutorials
    • API
  • ORK 2 Hub
    • Tutorials
    • Plugins
    • API
  • Support
  • Forum
  • Get ORK
  • Contact
  • Blog
  • Makinom
  • gamingislove.com
Categories
  • News (61)
  • ORK 2 (137)
    • Tutorial (137)
      • Game tutorial (50)
      • Gameplay (32)
      • How-to (55)
  • Release (133)
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!