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: Quest HUD

Unity UI: Quest HUD

Table of Contents
  • Quest Task Requirement Prefab
    • HUD Quest Task Requirement Text Content
      • Image Size (Optional)
      • Text Styling
    • Adding a value bar (Optional)
      • ORK HUD Value Bar Content
      • Layout Element
      • Rect Transform
      • Bar Image
    • Tooltips (Optional)
    • Create prefab
  • Quest Task Prefab
    • HUD Quest Task Requirement List
    • HUD Quest Task Text Content
      • Text Styling
    • Tooltips (Optional)
    • Create prefab
  • Quest Prefab
    • HUD Quest Task List
    • HUD Quest Text Content
      • Text Styling
    • Tooltips (Optional)
    • Create prefab
  • Quest HUD Prefab
    • HUD Quest List
    • Image (Optional)
    • Rect Transform
    • Create prefab
  • HUD Setup
    • HUD Settings
    • Quest Settings
    • Display Conditions
    • Unity UI
    • Schematics
    • Save Settings
  • Testing

Create a quest HUD using the Unity UI module.

In this tutorial we’ll create a Quest type HUD to display the player’s active quests.

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 quest HUD using prefabs – we’ll have to set up 4 prefabs for this:

  • Quest HUD
    The actual HUD, which lists the quests.
  • Quest
    The individual quest, which lists the quest’s tasks.
  • Quest Task
    The individual quest task, which lists the task’s requirements.
  • Quest Task Requirement
    The individual quest task requirement (e.g. kill X enemies, collect Y items, etc.)

We’ll create the prefabs in reverse order, i.e. starting with the quest task requirement and ending with the actual quest HUD’s prefab. This is due to using the prefabs in the previous prefab, e.g. the requirement prefabs are used by the task prefabs to list the requirements.

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 quest HUDs in this documentation.

 

You can download the completed HUD setup here:

Download HUD

This contains the 4 prefabs (quest HUD, quest, quest task and quest task requirement) as well as the used images and font. You still need to set up the HUD in the editor (using the quest HUD prefab).

Quest Task Requirement Prefab #

First, we’ll create the prefab for the quest task requirements. A requirement is something that’s needed to complete a quest task, e.g. killing X number of a defined enemy or collecting Y number of a defined item, etc.

We create a ready to use setup using the scene hierarchy’s context menu: ORK Framework > HUD > Quest > Quest Task Requirement (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 quest task requirement 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.

HUD Quest Task Requirement Text Content #

This component manages the text content and which types of requirements are displayed. We’ll set it up to display for all types and show the requirement’s name, count and max count.

  • Show Finished Tasks
    Enable this setting.
  • Show Items
    Enable this setting.
  • Show Enemy Kills
    Enable this setting.
  • Show Counts
    Enable this setting.
  • Text
    Set to: <name> <count>/<countmax>

Image Size (Optional) #

In case you’re using large icons, you might want to adjust the size when displayed in the quest HUD.

For this, add a Layout Element component to the Image child object using the component menu.

  • Preferred Width
    Enable this setting.
    Set the value to the width you want, e.g. 30.
  • Preferred Height
    Enable this setting.
    Set the value to the height you want, e.g. 30.

Text Styling #

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

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

I’m using font size 16.

Adding a value bar (Optional) #

We’ll can also add a value bar to display the requirement’s count.

Right-click on the Quest Task Requirement game object: ORK Framework > HUD > Content > Value Bar (Sprite)

This adds a value bar as a child object of the Quest Task Requirement game object.

ORK HUD Value Bar Content #

This component manages the value the value bar displays.

  • Value Type
    Select Quest Task Requirement.

Layout Element #

The requirement game object uses a Horizontal Layout Group component to arrange the content’s icon and text horizontally. This gets in the way of our value bar, so we’ll add a Layout Element component to the Value Bar game object to make it ignore the layout.

  • Ignore Layout
    Enable this setting

Rect Transform #

Now we can adjust the size and position of the game object via it’s Rect Transform.

How you place it is up to you – I’ll use the bottom stretch anchor presets and adjust the bar to display below the text as a small, thin line.

Also, move the Value Bar game object upwards in the hierarchy to be the first child object of the Quest Task Requirement game object. This way the value bar doesn’t obstruct the text.

Bar Image #

The value bar uses a sprite and fills it according to the requirement’s count (and max count).

You can download a simple, white sprite below in case you don’t have any sprite at hand. Using a white color allows us to color the sprite however we want using the Image component’s Color setting.

Download White Sprite

We need to set the sprite the value bar will use. Change the Image components on the Empty Sprite and Value Sprite game objects (child objects of Value Bar).

  • Source Image
    Select the sprite you want to use.
    E.g. the White_16x16 sprite you can download above.

Set the Value Sprite to use a Filled image type.

  • Image Type
    Select Filled.
    This will let the value bar display only part of the image depending on the filled state of the value bar.
  • Fill Method
    Select Horizontal.
  • Fill Origin
    Select Left.

Also, change the color of the value sprite (or empty sprite) to your liking.

Tooltips (Optional) #

You can optionally display a Tooltip type HUD with the quest task requirement’s content (if you’ve set up a Tooltip HUD).

To add tooltips to a part of your HUD, simply add a HUD Tooltip component to it. In this case, add the component to the root Quest Task Requirement game object.

Create prefab #

My end result looks like this.

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

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

Quest Task Prefab #

Next, we’ll set up the prefab for the quest tasks.

Once again, create a ready to use setup using the scene hierarchy’s context menu: ORK Framework > HUD > Quest > Quest Task with Requirement List (for prefabs)

This sets up a game object similar to the previous one for the requirements, though the structure is different this time.

The Quest Task game object uses a Vertical Layout Group to arrange it’s content in a vertical list. The Name game object displays the quest task’s content.

HUD Quest Task Requirement List #

This component is attached to the Quest Task game object and adds the requirements of the task (using the prefab). The vertical layout arranges the requirements below the name.

We’ll use the prefab we just created (for the requirements) and enable all types of requirements.

  • Prefab
    Select the prefab you created for the quest task requirements.
  • Add Finished Tasks
    Enable this setting.
  • Add Items
    Enable this setting.
  • Add Enemy Kills
    Enable this setting.
  • Add Counts
    Enable this setting.

HUD Quest Task Text Content #

This component is added on the Name child object and manages the text content of the quest task. We’ll just display the name of the task, the default setup should already use the <name> text code.

  • Show Active
    Enable this setting.
  • Text
    Set to: <name>

Text Styling #

Like before, the TextMeshPro – Text (UI) component on the Name > Text child object is responsible for displaying the text.

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

I’m using font size 18.

Tooltips (Optional) #

Add a HUD Tooltip component to the Quest Task game object in case you want to display a Tooltip type HUD for the quest task’s content.

Create prefab #

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

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

Quest Prefab #

Now we’ll set up the prefab for the quests.

Create a ready to use setup using the scene hierarchy’s context menu: ORK Framework > HUD > Quest > Quest with Task List (for prefabs)

This sets up a game object just like the previous one for the tasks – same structure but using different components.

Again, the Quest game object uses a Vertical Layout Group to arrange it’s content in a vertical list. The Name game object displays the quest’s content.

HUD Quest Task List #

This component is attached to the Quest game object and adds the tasks of the quest (using the prefab). The vertical layout arranges the tasks below the name.

We’ll use the prefab we just created (for the tasks) and enable the active tasks.

  • Prefab
    Select the prefab you created for the quest tasks.
  • Add Inactive
    Disable this setting.
  • Add Active
    Enable this setting.
  • Add Finished
    Disable this setting.
  • Add Failed
    Disable this setting.

HUD Quest Text Content #

This component on the Name child object manages the text content of the quest. We’ll just display the name of the quest, the default setup should already use the <name> text code.

  • Show Active
    Enable this setting.
  • Text
    Set to: <name>

Text Styling #

Like before, the TextMeshPro – Text (UI) component on the Name > Text child object is responsible for displaying the text.

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

I’m using font size 20.

Tooltips (Optional) #

Add a HUD Tooltip component to the Quest game object in case you want to display a Tooltip type HUD for the quest task’s content.

Create prefab #

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

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

Quest HUD Prefab #

The last prefab is for the actual quest HUD.

Naturally, we’ll create a ready to use setup using the scene hierarchy’s context menu: ORK Framework > HUD > Quest > Quest List HUD (Vertical Layout, fit size)

As the text suggests, this will create a HUD with a Vertical Layout Group and a Content Size Fitter to adjust the game object’s size to the displayed content. This is the only way to make sure the HUD will envelope the whole content, since you don’t know how many quests, quest tasks and requirements will be displayed.

HUD Quest List #

This component is attached to the Quest List HUD game object and adds the quests (using the prefab). The vertical layout arranges the quests.

We’ll use the prefab we just created (for the quests) and enable the active quests.

  • Prefab
    Select the prefab you created for the quests.
  • All Quest Types
    Enable this setting.
  • Add Inactive
    Disable this setting.
  • Add Active
    Enable this setting.
  • Add Finished
    Disable this setting.
  • Add Failed
    Disable this setting.

Image (Optional) #

Add an Image component to display a background image in the HUD.

  • Source Image
    Select the Sprite you want to use.
    E.g. the BoxBlue sprite from the initial UI setup.
  • Color
    Select a color you want to use (optional).
    I’ll stick with a white color with full alpha.

Rect Transform #

The default width of the setup is a bit small, so we’ll adjust the width.

  • Width
    Set to 400.

You can also place the HUD on the canvas where you want it to show up. I’d recommend to use anchor presets according to the placement. E.g. if you place the HUD at the top left corner, use a top left anchor preset.

And that’s my final result.

Create prefab #

Create a prefab out of the Quest List 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 Quests.
  • HUD Type
    Select Quest.
  • 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.

Quest Settings #

  • UI Layout
    Select None.
    This will not use a layout, using the prefab’s position instead.

Display Conditions #

You can use these settings to only show the HUD based on conditions. E.g. only in the field (out of battles) or when there are quests or certain quest types.

  • Has Quests
    Enable this setting.
  • Has Active
    Enable this setting.

Unity UI #

  • UI Layer
    Select HUDs (or any other UI layer you want the HUD to display on).
    UI layers are used to organize your UI, learn more in the Makinom documentation.
  • HUD Prefab
    Select the HUD prefab you just created.

Schematics #

You can optionally use schematics to animate opening and closing the HUD, e.g. fading it in/out. You can also set up default schematics for all HUDs.

See this tutorial for details.

Save Settings #

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! Naturally, you need an active quest for this to work.

If you’re not satisfied with the look, open up the prefabs for the HUD, quest, quest task or quest task requirement and adjust them to your liking.

E.g. looking at my HUD, I’ll probably have to adjust a few things.

There – I’ve changed the following things:

  • Quest Prefab
    Changed the quest name’s font color
  • Quest Task Prefab
    Increased Left padding to 15 in the Vertical Layout Group component.
  • Quest Task Requirement Prefab
    Increased Left padding to 25 in the Horizontal Layout Group component.
    If you’ve added a value bar, you also need to adjust it’s position accordingly.

And that’s it!

UI
Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Updated on February 12, 2022
Table of Contents
  • Quest Task Requirement Prefab
    • HUD Quest Task Requirement Text Content
      • Image Size (Optional)
      • Text Styling
    • Adding a value bar (Optional)
      • ORK HUD Value Bar Content
      • Layout Element
      • Rect Transform
      • Bar Image
    • Tooltips (Optional)
    • Create prefab
  • Quest Task Prefab
    • HUD Quest Task Requirement List
    • HUD Quest Task Text Content
      • Text Styling
    • Tooltips (Optional)
    • Create prefab
  • Quest Prefab
    • HUD Quest Task List
    • HUD Quest Text Content
      • Text Styling
    • Tooltips (Optional)
    • Create prefab
  • Quest HUD Prefab
    • HUD Quest List
    • Image (Optional)
    • Rect Transform
    • Create prefab
  • HUD Setup
    • HUD Settings
    • Quest Settings
    • Display Conditions
    • Unity UI
    • Schematics
    • 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!