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 Quickstart
  • 05 UI Boxes

05 UI Boxes

Table of Contents
  • UI Box Prefabs
    • Blue Center
      • Image
      • Rect Transform
      • Scrollbar (Optional)
      • Content Padding (Optional)
      • Create Prefab
    • Battle Menu
      • Rect Transform
    • Menu Small
      • Rect Transform
    • Menu Info
      • Rect Transform
    • Menu Big
      • Rect Transform
    • Dialogue
      • Rect Transform
      • Image
      • TextMeshPro - Text (UI)
    • Action Info
      • Image
      • Vertical Layout Group
      • Content Size Fitter
      • TextMeshPro - Text (UI)
      • Create Prefab
  • UI Boxes General Settings
    • Default Controls
      • Input Settings
    • Default Audio Settings
    • Default Inactive Colors
    • Default Schematics
  • UI Boxes
    • 0: Blue Center
      • Unity UI
    • 1: Battle Menu
    • 2: Menu Small
    • 3: Menu Info
    • 4: Menu Big
    • 5: Dialogue
    • 6: Action Info
    • Save Changes

In this tutorial we’ll continue the UI setup and create prefabs for UI boxes.

UI boxes are used by ORK to dispaly menus, dialogues and other notifications (but not for HUDs, except a Console HUD). They are, in short, a container to display content in.

We will set up all UI boxes we need for this tutorial series in one go – and since most of them will look the same, we mainly need to adjust positions and sizes.

Learn more about UI boxes in this Makinom documentation.

UI Box Prefabs #

Setting up a UI box is pretty simple, you can create ready-to-use setups using the scene hierarchy’s context menu: Makinom > UI Box > UI Box (different variants available)

For more information, check out this tutorial focusing on UI box prefab setup.

We’ll create our UI prefabs in the UI Environment Scene we set up – but remember to also remove the created game objects from the Canvas afterwards to not have it part of our prefab scene.

Blue Center #

Our first UI box will be displayed in the center of the screen and use a blue box image (as will most of our UI boxes).

Create a UI box with vertical scrolling and a title box using scene hierarchy’s context menu: Makinom > UI Box > UI Box Scroll Vertical with Title

This’ll create a UI box that looks like this:

And has a structure like this:

We’ll now adjust the UI box to our needs.

Image #

First, we change the background image of the UI Box game object and UI Box > Title Content child object.

This is done in the Image component attached to the game objects – the setup for both is the same.

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

Rect Transform #

Select the UI Box game object again – we’ll now adjust the size of the UI box in the Rect Transform component.

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

Scrollbar (Optional) #

The scrollbar is currently a bit too big, let’s size it down a little.

Select the UI Box > Scroll View > Scrollbar Vertical child object and adjust the Rect Transform component.

  • Pos X
    Set to -5.
  • Top
    Set to 5.
  • Width
    Set to 10.
  • Bottom
    Set to 5.

Content Padding (Optional) #

The content of the UI box and title box is currently a bit close to the edges of their box. Let’s adjust that.

Select the UI Box > Scroll View > Viewport > Content child object, we’ll change the Vertical Layout Group component.

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

And once more for the title box, select the UI Box > Title Content child object, this time we’ll change the Horizontal Layout Group component.

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

And with that, the UI box should now look like this:

Create Prefab #

Create a prefab out of the UI Box game object by dragging it into the project view, e.g. name it UI Box Blue Center.

Don’t forget to remove the UI Box from the Canvas game object when creating in your UI Environment Scene.

Tip!

Keep your project’s assets organized and put your UI box prefabs in a separate folder somewhere – e.g. I put my prefabs into Assets/Tutorial Assets/_Created/UI Box/.

Battle Menu #

For most of the remaining UI boxes (except the last two), we’ll only adjust the position and size.

Create a copy of the prefab you just created and rename the new prefab to UI Box Battle Menu. Open the new prefab for editing, e.g. by double clicking on it.

Rect Transform #

All we need to do is change the settings of the Rect Transform component on the root UI Box game object.

Change the settings in the following order.

Select the bottom left anchor preset.

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

Save the changes you’ve made to the prefab.

Menu Small #

Create a copy of the UI Box Blue Center prefab and rename the new prefab to UI Box Menu Small. Open the new prefab for editing.

Rect Transform #

Again, we change the settings of the Rect Transform component on the root UI Box game object.

We only change the position, the size (400×400) and anchor preset (middle center) stay as they are.

  • Pos X
    Set to -600.
  • Pos Y
    Set to 200.

Save the changes you’ve made to the prefab.

Menu Info #

Create a copy of the UI Box Blue Center prefab and rename the new prefab to UI Box Menu Info. Open the new prefab for editing.

Rect Transform #

Like before, we’ll only change the position.

  • Pos X
    Set to 600.
  • Pos Y
    Set to -200.

Save the changes you’ve made to the prefab.

Menu Big #

Create a copy of the UI Box Blue Center prefab and rename the new prefab to UI Box Menu Big. Open the new prefab for editing.

Rect Transform #

This time we only change the size to make it bigger, while keeping it in the center of the screen.

  • Width
    Set to 800.
  • Height
    Set to 800.

Save the changes you’ve made to the prefab.

Dialogue #

The dialogue will be a bit different, as we’ll also change the used background image (beige box) and change the font color.

We still base it on our first UI box, create a copy of the UI Box Blue Center prefab and rename the new prefab to UI Box Dialogue. Open the new prefab for editing.

Rect Transform #

We’ll start with changing the position and size of the Rect Transform component on the root UI Box game object.

Change the settings in the following order.

Select the bottom center anchor preset.

  • Pivot
    Set to X=0.5, Y=0.
  • Pos X
    Set to 0.
  • Pos Y
    Set to 100.
  • Width
    Set to 600.
  • Height
    Set to 200.

Image #

As with our first UI box, we change the Image component on the root UI Box game object and UI Box > Title Content child object.

The setup for both is the same.

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

TextMeshPro – Text (UI) #

And we’ll change the font color of the content and title.

This is done on the TextMeshPro – Text (UI) components on the UI Box > Scroll View > Viewport > Content > Text child object (for the main content) and the UI Box > Title Content > Text child object (for the title content).

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

Save the changes you’ve made to the prefab.

Action Info #

For our final UI box, we’ll create a new one from scratch. This time, the UI box should adjust to the content it displays – we don’t use scrolling or a title.

Close the prefab editing and create a UI box using scene hierarchy’s context menu (in the UI Environment Scene): Makinom > UI Box > UI Box Fit Size

We’ll use this UI box to display the name of the action a combatant will use during battle. It’s position will be based on the combatant’s on-screen position, and the size adjust to the displayed content.

Image #

The UI box will also be beige, change the Image component on the root UI Box game object.

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

Vertical Layout Group #

We’ll adjust the padding.

  • Padding
    Set to Left=20, Right=20, Top=20, Bottom=15.

Content Size Fitter #

This component handles adjusting the size to the displayed content. We’ll adjust both horizontal and vertical.

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

TextMeshPro – Text (UI) #

As before, we change the text color to a black color. This is done on the TextMeshPro – Text (UI) components on the UI Box > Text child object.

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

Create Prefab #

Create a prefab out of the UI Box game object by dragging it into the project view, e.g. name it UI Box Action Info.

Don’t forget to remove the UI Box from the Canvas game object when creating in your UI Environment Scene.

UI Boxes General Settings #

With our UI box prefabs finished, we can now set up our UI boxes in the editor.

First, we’ll set up some general settings for all UI boxes, e.g. UI audio clips and how input is handled. Individual UI boxes can also override these settings, if needed (but we don’t need it for this tutorial series).

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

Default Controls #

These settings handle which input keys are used to control the UI (e.g. accepting or canceling, selecting a button, etc.). We can already keep most of the settings, but will set our input selections to loop, e.g. going down from the last selected input returns to the first input.

Input Settings #

  • Loop
    Enable this setting.

Default Audio Settings #

You can find all used audio clips in Assets/Tutorial Assets/NinjaAdventure/Sounds/Menu/.

  • Cursor Move
    Select the switch37 audio clip.
  • Accept
    Select the switch38 audio clip.
  • Cancel
    Select the switch34 audio clip.
  • Fail
    Select the interface6 audio clip.
  • Fail Volume
    Set to 0.4.
    The audio clip is a bit loud, so we’ll reduce the volume it’ll be played with.

We don’t need the rest of the audio settings for our tutorial, but you can set them up if you want.

  • Value Input Change
    Select the switch37 audio clip.
  • Change
    Select the switch37 audio clip.
  • Tab Change
    Select the switch37 audio clip.
  • Page Change
    Select the switch37 audio clip.

Default Inactive Colors #

Inactive colors are used to tint unfocused UI boxes, e.g. making them darker or semi-transparent. Only one UI box has the active focus and can be controlled at a time, these settings help making clear which one is controlled to the player.

  • Set Color
    Enable this setting.

I’ll stick to the default Color (a gray color with full alpha value), but you can change it to your liking.

Default Schematics #

We’ll use the schematics we’ve set up to fade in and fade out our UI boxes.

  • Before Open Schematic
    Select the UIFadeIn schematic.
  • Wait
    Enable this setting.
    This’ll wait for the schematic to finish before considering the UI box open (e.g. allowing controls).
  • Before Close Schematic
    Select the UIFadeOut schematic.
  • Wait
    Enable this setting.
    This’ll wait for the schematic to finish before considering the UI box closed (e.g. finish closing a menu screen or continuing a schematic after a dialogue closed).

UI Boxes #

Finally, we’ll set up UI boxes and use our prefabs.

Navigate to UI > UI Boxes and select the Default UI box. We’ll change it and also add the rest of the UI boxes we’ve set up.

0: Blue Center #

  • Name
    Set to: Blue Center
  • UI Layer
    Select Layer 1.

Unity UI #

Since we’re using the Unity UI module, we’ll use the prefab we created.

  • UI Box Prefab
    Select the UI Box Blue Center prefab.

1: Battle Menu #

The rest of the UI boxes are just copies with changed name and prefab.

Copy the Blue Center UI Box and change the following settings.

  • Name
    Set to: Battle Menu
  • UI Box Prefab
    Select the UI Box Battle Menu prefab.

2: Menu Small #

Copy the Battle Menu UI Box and change the following settings.

  • Name
    Set to: Menu Small
  • UI Box Prefab
    Select the UI Box Menu Small prefab.

3: Menu Info #

Copy the Menu Small UI Box and change the following settings.

  • Name
    Set to: Menu Info
  • UI Box Prefab
    Select the UI Box Menu Info prefab.

4: Menu Big #

Copy the Menu Info UI Box and change the following settings.

  • Name
    Set to: Menu Big
  • UI Box Prefab
    Select the UI Box Menu Big prefab.

5: Dialogue #

Copy the Menu Big UI Box and change the following settings.

  • Name
    Set to: Dialogue
  • UI Box Prefab
    Select the UI Box Dialogue prefab.

6: Action Info #

Copy the Dialogue UI Box and change the following settings.

  • Name
    Set to: Action Info
  • UI Box Prefab
    Select the UI Box Action Info prefab.

Save Changes #

And that’s it for now.

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

 

Next, we’ll set up flying texts (e.g. used for damage numbers).

Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Updated on March 9, 2023
Table of Contents
  • UI Box Prefabs
    • Blue Center
      • Image
      • Rect Transform
      • Scrollbar (Optional)
      • Content Padding (Optional)
      • Create Prefab
    • Battle Menu
      • Rect Transform
    • Menu Small
      • Rect Transform
    • Menu Info
      • Rect Transform
    • Menu Big
      • Rect Transform
    • Dialogue
      • Rect Transform
      • Image
      • TextMeshPro - Text (UI)
    • Action Info
      • Image
      • Vertical Layout Group
      • Content Size Fitter
      • TextMeshPro - Text (UI)
      • Create Prefab
  • UI Boxes General Settings
    • Default Controls
      • Input Settings
    • Default Audio Settings
    • Default Inactive Colors
    • Default Schematics
  • UI Boxes
    • 0: Blue Center
      • Unity UI
    • 1: Battle Menu
    • 2: Menu Small
    • 3: Menu Info
    • 4: Menu Big
    • 5: Dialogue
    • 6: Action Info
    • Save Changes
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!