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
  • 3D RPG Playground
  • BATTLE 07 Sequence Loot Dialogue

BATTLE 07 Sequence Loot Dialogue

Table of Contents
  • UI Box Prefab Setup
    • Prefab Setup
      • Rect Transform
      • Image
      • Content Size Fitter
      • TextMeshPro - Text
    • Create a prefab
  • HUD Prefab Setup
    • HUD
      • Rect Transform
      • Vertical Layout Group
      • Content Size Fitter
    • Icon
      • ORK HUD Status Text Content
      • Layout Element
    • Name
      • ORK HUD Status Text Content
      • TextMeshPro - Text
    • Quantity
      • ORK HUD Status Text Content
      • TextMeshPro - Text
      • Layout Element
      • Rect Transform
    • Create a prefab
  • UI Setup
    • UI Box
      • Base Settings
      • Unity UI
      • Schematics
    • HUD
      • HUD Settings
      • Unity UI
    • UI Layout
      • UI Layout Settings
      • Grid Layout Settings
  • Loot Dialogue
    • Loot Dialogue Settings
    • Notification 0
      • Loot Settings
      • Dialogue Settings
    • Notification 1
      • Loot Settings
    • Notification 2
      • Dialogue Settings
    • Notification 3
      • Dialogue Settings
  • Save Changes
  • Testing

In this tutorial we’ll change the battle end’s loot dialogue to a more advanced setup.

This tutorial continues the sub-series for setting up battles.

We previously set up a Simple loot dialogue at the start of our battle setup. Now, we’ll change this and use a more complex loot dialogue, the Sequence loot dialogue.

In short, the Sequence loot dialogue will display different battle gains one after another, e.g. first showing all items and currencies gained, followed by each gained equipment one at a time, followed by listing all combatant gains and level ups. This loot dialogue allows you to define which content is displayed when and if it’ll be displayed all together or one at a time.

We’ll use a Tooltip type HUD as a template to show content information of the loot – this allows us to more freely define how the content is displayed. This is naturally optional, as you can also just define the content in the loot dialogue itself. The same can be done for combatant gains and level up notifications.

We need to set up:

  • UI prefabs (UI box, HUD)
  • UI box and HUDs using the prefabs
  • UI layout for displaying multiple battle gains side by side
  • loot dialogue

Let’s get to it!

UI Box Prefab Setup #

We’ll start with setting up a new UI box – it’ll have a width of 400 and adjust it’s height to the displayed content. And let’s make it beige.

Prefab Setup #

Create a new content fitting UI box using the scene hierarchy context menu: Makinom > UI Box > UI Box Fit Size with Title

Rect Transform #

The positioning (center of the screen) and width (400) should already be correct, here are the settings to check:

Use the middle center anchor presets.

  • Pivot
    Set to X=0.5, Y=0.5.
  • Pos X
    Set to 0.
  • Pos Y
    Set to 0.
  • Width
    Set to 400.

Image #

Change the image to use the BoxBeige sprite on both the UI Box game object and the UI Box > Title Content child object.

  • Source Image
    Select BoxBeige.
  • Color
    Select a white color with full alpha (A=1 or 255, depending on the used color picker).

Content Size Fitter #

The content size fitter handles adjusting the size to the displayed content. It should already be set up to adjust the vertical size to fit the content.

  • Horizontal Fit
    Select Unconstrained.
  • Vertical Fit
    Select Preferred Size.

TextMeshPro – Text #

We’ll change the text color on the UI Box > Text and UI Box > Title Content > Text child objects.

  • Vertex Color
    Select a black color with full alpha (A=1 or 255, depending on the used color picker).

The completed UI box should look something like this:

Create a prefab #

Create a prefab out of the UI box, e.g. save it as UI Box Beige Center Fit.

Remove the UI box from the canvas before we continue with the next setup.

HUD Prefab Setup #

Next, we’ll set up the HUD prefab for displaying a looted item, currency, equipment, etc.

We’ll keep it simple, but you can go as complex as you want as HUDs allow to set up content in whatever way you want. We’ll show the icon, name and quantity of the looted item.

All loot is just a variant of shortcuts, e.g. an item shortcut, currency shortcut, etc., so we’ll make use of Shortcut HUD elements (e.g. see the shortcut HUD setup tutorial for other ways).

HUD #

Create a new HUD with a vertical layout using the scene hierarchy context menu: Makinom > HUD > HUD (Vertical Layout)

Rect Transform #

The positioning can be ignored, due to just using the HUD as a template and displaying it within other content (e.g. the UI box we just set up).

We’ll set the width to 300, the height will be adjusted to the displayed content.

  • Width
    Set to 300.

Vertical Layout Group #

We’ll adjust the layout of the HUD, having content centered.

  • Padding
    Set all to 0.
  • Child Alignment
    Select Middle Center.

Content Size Fitter #

Add a Content Size Fitter component and set it to adjust the vertical size.

  • Vertical Fit
    Select Preferred Size.

Icon #

Add an icon content to the HUD game object using the scene hierarchy context menu: ORK Framework > HUD > Content > Status Icon Content

Optionally change the newly created game object’s name to Icon.

ORK HUD Status Text Content #

We just need to make sure to use the correct status type and show the content’s icon.

  • Status Type
    Select Shortcut.
  • Use Content Icon
    Enable this setting.

Layout Element #

Add a Layout Element component, we’ll use it to set the size of the icon within the HUD’s layout.

  • Preferred Width
    Enable this setting.
    Set the width to 150.
  • Preferred Height
    Enable this setting.
    Set the width to 150.

Name #

Add a text content to the HUD game object using the scene hierarchy context menu: ORK Framework > HUD > Content > Status Text Content

Optionally change the newly created game object’s name to Name.

ORK HUD Status Text Content #

We’ll display the displayed shortcut’s name.

  • Status Type
    Select Shortcut.
  • Default Content (Text)
    Set to: <name>

TextMeshPro – Text #

Adjust the font, font size and color to your liking, I’ll use these settings:

  • Font Size
    Set to 40.
  • Vertex Color
    Select a yellow color.
  • Alignment
    Select Center.

Quantity #

Add another text content to the HUD game object using the scene hierarchy context menu: ORK Framework > HUD > Content > Status Text Content

Optionally change the newly created game object’s name to Quantity.

ORK HUD Status Text Content #

We’ll display the displayed shortcut’s quantity.

  • Status Type
    Select Shortcut.
  • Default Content (Text)
    Set to: <quantity>

TextMeshPro – Text #

Adjust the font, font size and color to your liking, I’ll use these settings:

  • Font Size
    Set to 30.
  • Vertex Color
    Select a red color.
  • Alignment
    Select Center and Middle.
  • Wrapping
    Select Disabled.
    This’ll make the text exceed the game object’s bounds in case it’s larger instead of getting wrapped into the next line.

Layout Element #

Add a Layout Element component, we’ll use it to keep the quantity out of the HUD’s layout.

  • Ignore Layout
    Enable this setting.

Rect Transform #

Now, with the quantity not being handled by the HUD’s layout component, we can adjust the positioning and size.

We’ll show it in the upper right corner of the HUD.

Use the top right anchor presets.

  • Pivot
    Set to X=1, Y=1.
  • Pos X
    Set to 0.
  • Pos Y
    Set to 0.
  • Width
    Set to 100.
  • Height
    Set to 100.

The finished HUD should look something like this:

Create a prefab #

Create a prefab out of the HUD, e.g. save it as HUD Template Loot.

Don’t forget to remove the Canvas from the scene in case you did this in one of the game scenes.

UI Setup #

With the UI prefabs set up, we’ll continue with setting up the UI in the editor.

UI Box #

Open the Makinom editor, navigate to UI > UI Boxes and add a new UI box.

Base Settings #

  • Name
    Set to: Beige Center Fit
  • UI Layer
    Select Layer 1.

Unity UI #

  • UI Box Prefab
    Select the UI Box Beige Center Fit prefab we just created.

Schematics #

Use custom schematics if you want – the previous default setup will otherwise have the UI box fade in and out.

HUD #

Navigate to UI > HUDs and add a new HUD.

HUD Settings #

  • Name
    Set to: Loot Template
  • HUD Type
    Select Tooltip.
    We’ll use the tooltip type, since we’ll display different kinds of content using this HUD.
  • Auto Display
    Disable this setting.
    We’ll use this HUD as a template and don’t display it on it’s own.

We can ignore the Tooltip Settings and Display Conditions due to this HUD being a template.

Unity UI #

  • UI Layer
    Select HUDs.
    This isn’t really needed, due to the HUD never being displayed on it’s own, so it’ll be displayed within other content (which is placed on it’s own UI layer).
  • HUD Prefab
    Select the HUD Template Loot prefab we just created.

UI Layout #

Navigate to UI > UI Layouts and add a new UI layout.

We’ll create a grid layout, displayed at the center of the screen and having 3 elements per row.

UI Layout Settings #

  • Name
    Set to: Center Grid 3
  • Layout Type
    Select Grid.

Grid Layout Settings #

  • Anchor
    Select Middle Center.
  • Spacing
    Set to X=20, Y=20.
  • Filling
    Select Horizontal.
    The grid will be filled horizontally, i.e. per row.
  • Fill Count
    Set to 3.
    This limits the row to 3 elements before starting a new row.

That’s it with the UI setup – next we’ll finally be able to set up the actual loot dialogue.

Loot Dialogue #

Navigate to Battles > Battle End.

We’ve already set up the Loot Dialogue 0 previously, we’ll now change it to use a different loot dialogue type.

  • Loot Dialogue Type
    Select Sequence.

The Battle Outcome settings define for which outcome of a battle the loot dialogue will be used. The default setup uses them for all, we’ll keep it that way.

Loot Dialogue Settings #

  • Block Focus
    Enable this setting.
  • Show Outcome Notification
    Disable this setting.
    You can optionally show a UI box with some content alongside the displayed loot and battle gains, we’ll not use it this time.
  • Show Notification
    Disable this setting.
    We’ll not show usual notifications when adding an item to the inventory for the looted items.

Next, we’ll add the notifications in the order they’re displayed.

Notification 0 #

Click on Add Notification to add the first battle gains notification.

We’ll start with showing currency and items, maximum 6 at a time.

  • Information Type
    Select Loot.
    We’ll start with displaying loot.
  • Display Type
    Select Defined.
  • Display Count
    Set to 6.
  • UI Layout
    Select Center Grid 3.

Loot Settings #

We can define which loot will be displayed by this notification.

  • Add Currency/Items/AI Behaviours/AI Rulesets/Crafting Recipes/Combatants
    Enable these settings.
  • Add Equipment
    Disable this setting.

Dialogue Settings #

These settings define how the loot is displayed – we’ll use the UI box and HUD template we set up.

  • UI Box
    Select Beige Center Fit.
  • Count to Quantity
    Enable this setting.
    We’ll count up the quantity of the loot over time.
  • Interpolation
    Select Linear.
  • Time
    Set to 1.
  • Add HUD (Loot Content)
    Enable this setting.
  • HUD
    Select Loot Template.

Notification 1 #

Copy Notification 0, we’ll just adjust it to display equipment one at a time instead of the other content.

  • Display Type
    Select One.

Loot Settings #

  • Add Currency/Items/AI Behaviours/AI Rulesets/Crafting Recipes/Combatants
    Disable these settings.
  • Add Equipment
    Enable this setting.

Notification 2 #

Click on Add Notification to add another notification.

We’ll now display the combatant gains, 3 at a time.

  • Information Type
    Select Combatant.
  • Display Type
    Select Defined.
  • Display Count
    Set to 3.
  • UI Layout
    Select Center Grid 3.

Dialogue Settings #

  • UI Box
    Select Beige Center Fit.
  • Show Title
    Enable this setting.
  • Text (Title Content)
    Set to: <name>

We’ll adjust the Total Gains Content a bit.

  • Text (Total Gains Content)
    Set to: <experience>
    <normal>

We can keep the rest of the settings as they are.

Notification 3 #

Copy Notification 2, we’ll finally show the level ups.

  • Information Type
    Select Level Up.

Dialogue Settings #

  • UI Box
    Select Beige Center Fit.
  • Show Title
    Enable this setting.
  • Text (Title Content)
    Set to: <name>

The actual level up content is defined below the loot dialogue settings in the Level Up Texts – we can keep them as they are, though. You can check them out and adjust them to your liking if you want.

Save Changes #

And that’s it for our loot dialogue setup!

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

Testing #

Hit play, fight someting and enjoy your shiny new battle gains!

In case you want to test some different loot, you can add Additional Loot to individual Battle components in your scene!

Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Updated on October 19, 2022
Table of Contents
  • UI Box Prefab Setup
    • Prefab Setup
      • Rect Transform
      • Image
      • Content Size Fitter
      • TextMeshPro - Text
    • Create a prefab
  • HUD Prefab Setup
    • HUD
      • Rect Transform
      • Vertical Layout Group
      • Content Size Fitter
    • Icon
      • ORK HUD Status Text Content
      • Layout Element
    • Name
      • ORK HUD Status Text Content
      • TextMeshPro - Text
    • Quantity
      • ORK HUD Status Text Content
      • TextMeshPro - Text
      • Layout Element
      • Rect Transform
    • Create a prefab
  • UI Setup
    • UI Box
      • Base Settings
      • Unity UI
      • Schematics
    • HUD
      • HUD Settings
      • Unity UI
    • UI Layout
      • UI Layout Settings
      • Grid Layout Settings
  • Loot Dialogue
    • Loot Dialogue Settings
    • Notification 0
      • Loot Settings
      • Dialogue Settings
    • Notification 1
      • Loot Settings
    • Notification 2
      • Dialogue Settings
    • Notification 3
      • Dialogue Settings
  • 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!