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

30
  • 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

30
  • 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

24
  • 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

53
  • 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

20
  • 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

17
  • 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

10
  • 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

16
  • 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

13
  • 2.5D Setup
  • Body Part Weakpoint
  • 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
  • 3D RPG Playground
  • MENU 01 UI Boxes
View Categories

MENU 01 UI Boxes

In this tutorial we’ll set up UI boxes for our menu screens.

This tutorial is the start of the sub-series for setting up menu screens.

Menu screens are used to manage inventory, abilities, the player group and more. Learn more about menu screens in this documentation.

Before we’ll get to setting up the actual menu screens, we’ll need to set up some UI boxes we’ll use. We’ll set up the following UI boxes:

  • small content fitting in the top left
  • small content fitting in the top right
  • small content fitting in the bottom left.
  • large scrollable in the center
  • large scrollable in the center, with tabs
  • scrollable in the top half of the screen
  • scrollable in the bottom half of the screen

We’ll also set up a UI background that’ll be displayed with our menu screens – we’ll just display a semi-transparent black color.

Additionally, we’ll set up 3 new input keys for calling our menu and selecting next/previous tabs or combatants in our menu screens.

Prefabs Setup #

We’ll start with setting up the UI background and UI box prefabs.

UI Background #

As usual, we can easily set this up using the scene hierarchy context menu: Makinom > UI > Background (Sprite)

This’ll create a UI background a bit larger than the canvas, we just need to adjust the Image component.

Image #

  • Source Image
    Select the White_16x16 sprite.
  • Color
    Select a black color with about 4/5 filled alpha value (e.g. A=200 or 0.78, depending on the color picker).

The result should look like this:

Create a prefab out of the Background game object, e.g. name it Menu Background.

We’ll handle the background setup for our menu screens (i.e. using the prefab) in a later tutorial

Top Left Fit #

Duplicate your UI Box Blue Center Fit prefab, open it for editing and change the following settings (in this order).

Rect Transform #

Use the top left anchor presets.

  • Pivot
    Set to X=0, Y=1.
  • Pos X
    Set to 200.
  • Pos Y
    Set to -200.
  • Width
    Set to 400.
    Should already be the width.

The result should look like this:

Rename the new prefab, e.g. to UI Box Blue Top Left Fit.

Bottom Left Fit #

Duplicate your UI Box Blue Center Fit prefab, open it for editing and change the following settings (in this order).

Rect Transform #

Use the bottom left anchor presets.

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

The result should look like this:

Rename the new prefab, e.g. to UI Box Blue Bottom Left Fit.

Top Right Fit #

Duplicate your UI Box Blue Center Fit prefab, open it for editing and change the following settings (in this order).

Rect Transform #

Use the top right anchor presets.

  • Pivot
    Set to X=1, Y=1.
  • Pos X
    Set to -200.
  • Pos Y
    Set to -200.
  • Width
    Set to 400.

The result should look like this:

Rename the new prefab, e.g. to UI Box Blue Top Right Fit.

Center Scroll #

Duplicate your UI Box Blue Battle Menu prefab, open it for editing and change the following settings (in this order).

Rect Transform #

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 720.
  • Height
    Set to 680.

The result should look like this:

Rename the new prefab, e.g. to UI Box Blue Menu Center Scroll.

Tab Center Scroll #

Duplicate your UI Box Blue Menu Center Scroll prefab and open it for editing.

Use the scene hierarchy context menu on the root UI Box game object and add a scrollable tab area to the top: Makinom > UI Box > Tab > Add Tabs Top (Scroll Horizontal)

This’ll add child object where our tabs will be added to – they’re scrollable horizontally (without displaying a scrollbar). The area is added to the top of the UI box, moving the scroll rect down a bit. We’ll adjust the positioning a bit, making the tab area higher.

Tabs Rect Transform #

Select the UI Box > Tabs child object (should already be selected by creating it).

  • Height
    Set to 70.

Content Scroll Rect Transform #

Select the UI Box > Scroll View child object.

  • Top
    Set to 70.

The result should look like this:

Rename the new prefab, e.g. to UI Box Blue Menu Tab Center Scroll.

Top Scroll #

Duplicate your UI Box Blue Menu Center Scroll prefab, open it for editing and change the following settings (in this order).

Rect Transform #

Use the middle center anchor presets.

  • Pivot
    Set to X=0.5, Y=0.
  • Pos Y
    Set to 0.
  • Height
    Set to 340.

The result should look like this:

Rename the new prefab, e.g. to UI Box Blue Menu Top Scroll.

Bottom Scroll #

Duplicate your UI Box Blue Menu Center Scroll prefab, open it for editing and change the following settings (in this order).

Rect Transform #

Use the middle center anchor presets.

  • Pivot
    Set to X=0.5, Y=1.
  • Pos Y
    Set to 0.
  • Height
    Set to 340.

The result should look like this:

Rename the new prefab, e.g. to UI Box Blue Menu Bottom Scroll.

That’s it for the prefabs.

Input Keys #

Open the Makinom editor and navigate to Base/Control > Input Keys, we’ll add 2 new input keys.

Menu #

This input key will be used to open our main/overview menu screen.

  • Name
    Set to Menu.

Input ID Setting 0 #

  • Input Origin
    Select Key Code.
  • Positive Key
    Select F1.

Next #

This input key will be used to change to the next tab or combatant in our menu screens.

  • Name
    Set to Next.

Input ID Setting 0 #

  • Input Origin
    Select Key Code.
  • Positive Key
    Select E.

Previous #

This input key will be used to change to the previous tab or combatant in our menu screens.

  • Name
    Set to Previous.

Input ID Setting 0 #

  • Input Origin
    Select Key Code.
  • Positive Key
    Select Q.

UI Setup #

Now we’ll handle the rest of the UI setup.

UI Boxes General Settings #

Navigate to UI > UI Boxes > General Settings, we’ll now set up tab controls and audio.

Default Controls > Tab Settings #

  • Loop
    Enable this setting.
  • Next Tab Key
    Select Next.
  • Previous Tab Key
    Select Previous.

Default Audio Settings #

  • Tab Change
    Select switch37.

Now, we’ll add multiple new UI boxes, so navigate to UI > UI Boxes.

UI Box Top Left Fit #

Add a new UI box.

Base Settings #

  • Name
    Set to Blue Top Left Fit.
  • UI Layer
    Select Layer 1.

Unity UI #

  • UI Box Prefab
    Select UI Box Blue Top Left Fit.

Override Default Settings > Schematics #

I’m also using the move from left and move to left schematics from the UI animations schematics to animate this UI box.

  • Own Schematics
    Enable this setting.
  • Before Open Schematic
    Select the UIMoveFromLeftFadeIn schematic.
  • Wait
    Enable this setting.
  • Before Close Schematic
    Select the UIMoveToLeftFadeOut schematic.
  • Wait
    Enable this setting.

UI Box Bottom Left Fit #

Copy the Blue Top Left Fit box and change the following settings.

Base Settings #

  • Name
    Set to Blue Bottom Left Fit.

Unity UI #

  • UI Box Prefab
    Select UI Box Blue Bottom Left Fit.

UI Box Top Right Fit #

Copy the Blue Top Left Fit box and change the following settings.

Base Settings #

  • Name
    Set to Blue Top Right Fit.

Unity UI #

  • UI Box Prefab
    Select UI Box Blue Top Right Fit.

Override Default Settings > Schematics #

I’m changing to the move from right and move to right schematics from the UI animations schematics to animate this UI box.

  • Before Open Schematic
    Select the UIMoveFromRightFadeIn schematic.
  • Before Close Schematic
    Select the UIMoveToRightFadeOut schematic.

UI Box Menu Center Scroll #

Copy the Blue Top Right Fit box and change the following settings.

Base Settings #

  • Name
    Set to Blue Menu Center Scroll.

Unity UI #

  • UI Box Prefab
    Select UI Box Blue Menu Center Scroll.

Override Default Settings > Schematics #

I’ll use the default schematics

  • Own Schematics
    Disable this setting.

UI Box Menu Tab Center Scroll #

Copy the Blue Menu Center Scroll box and change the following settings.

Base Settings #

  • Name
    Set to Blue Menu Tab Center Scroll.

Unity UI #

  • UI Box Prefab
    Select UI Box Blue Menu Tab Center Scroll.

UI Box Menu Top Scroll #

Copy the Blue Top Right Fit box and change the following settings.

Base Settings #

  • Name
    Set to Blue Menu Top Scroll.

Unity UI #

  • UI Box Prefab
    Select UI Box Blue Menu Top Scroll.

Override Default Settings > Schematics #

I’m changing to the move from above and move to above schematics from the UI animations schematics to animate this UI box.

  • Before Open Schematic
    Select the UIMoveFromAboveFadeIn schematic.
  • Before Close Schematic
    Select the UIMoveToAboveFadeOut schematic.

UI Box Menu Bottom Scroll #

Copy the Blue Menu Top Scroll box and change the following settings.

Base Settings #

  • Name
    Set to Blue Menu Bottom Scroll.

Unity UI #

  • UI Box Prefab
    Select UI Box Blue Menu Bottom Scroll.

Override Default Settings > Schematics #

I’m changing to the move from below and move to below schematics from the UI animations schematics to animate this UI box.

  • Before Open Schematic
    Select the UIMoveFromBelowFadeIn schematic.
  • Before Close Schematic
    Select the UIMoveToBelowFadeOut schematic.

Save Changes #

And that’s it!

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

Next, we’ll set up template HUDs we’ll use for displaying combatant information in our menu screens.

Share This Article :
  • Facebook
  • X
  • LinkedIn
  • Pinterest
Table of Contents
  • Prefabs Setup
    • UI Background
      • Image
    • Top Left Fit
      • Rect Transform
    • Bottom Left Fit
      • Rect Transform
    • Top Right Fit
      • Rect Transform
    • Center Scroll
      • Rect Transform
    • Tab Center Scroll
      • Tabs Rect Transform
      • Content Scroll Rect Transform
    • Top Scroll
      • Rect Transform
    • Bottom Scroll
      • Rect Transform
  • Input Keys
    • Menu
      • Input ID Setting 0
    • Next
      • Input ID Setting 0
    • Previous
      • Input ID Setting 0
  • UI Setup
    • UI Boxes General Settings
      • Default Controls > Tab Settings
      • Default Audio Settings
    • UI Box Top Left Fit
      • Base Settings
      • Unity UI
      • Override Default Settings > Schematics
    • UI Box Bottom Left Fit
      • Base Settings
      • Unity UI
    • UI Box Top Right Fit
      • Base Settings
      • Unity UI
      • Override Default Settings > Schematics
    • UI Box Menu Center Scroll
      • Base Settings
      • Unity UI
      • Override Default Settings > Schematics
    • UI Box Menu Tab Center Scroll
      • Base Settings
      • Unity UI
    • UI Box Menu Top Scroll
      • Base Settings
      • Unity UI
      • Override Default Settings > Schematics
    • UI Box Menu Bottom Scroll
      • Base Settings
      • Unity UI
      • Override Default Settings > Schematics
  • 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 (69)
  • ORK 2 (137)
    • Tutorial (137)
      • Game tutorial (50)
      • Gameplay (32)
      • How-to (55)
  • Release (149)
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!