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
  • 2D RPG Quickstart
  • 04 UI System Setup

04 UI System Setup

Table of Contents
  • Initial UI System Setup
    • Changing the UI System
      • Save Changes
    • TextMesh Pro Setup
      • Import Essential Resources
      • Default Font and Sprites
    • UI Enviroment Scene
      • Creating the scene
      • Using it for prefabs
  • Input Prefabs
    • Button
      • Image
      • Layout Element
      • TextMeshPro - Text (UI)
      • Create Prefab
    • Tab Button (Optional)
      • Image
      • Layout Element
      • Horizontal Layout Group
      • TextMeshPro - Text (UI)
      • Create Prefab
    • Toggle (Optional)
    • Text Input (Optional)
    • Int Slider (Optional)
    • Float Slider (Optional)
  • UI System Setup (continued)
    • UI System Prefabs
      • Default UI Prefabs
    • UI Layers
      • Background Layer
      • HUD Layer
    • Save Changes
  • UI Animation Schematics
    • Fade In Schematic
      • Change UI Color
    • Fade Out Schematic
      • Change UI Color

In this tutorial we’ll set up the UI system and some UI prefabs for our inputs (buttons, etc.).

Everyone hates setting up UI, it’s always kind of a drag. So, let’s make this as quick as possible.

The UI setup will be split into multiple tutorials to keep them short and focused on certain topics. We’ll start with the initial UI system setup in this tutorial, afterwards set up UI boxes and finally set up flying texts. At a later time we’ll also add a battle HUD to show information of our player.

For now we’ll set up:

  • UI system in the editor
  • TextMesh Pro in Unity
  • UI environment scene (for prefab editing)
  • some input prefabs
  • UI layers
  • UI animation schematics

For more details on the initial UI system setup, check out this tutorial.

Let’s get to it!

Initial UI System Setup #

This is usually one of the first things you do in a new project – changing the project’s UI system, setting up TextMesh pro and adding a scene for editing UI prefabs.

You can learn more about UI systems in this documentation.

Changing the UI System #

First, we change the project’s UI system. We’ll use the Unity UI module – this UI system uses game objects with UI components to display UI content, i.e. we’ll mainly use prefabs for this.

For now, we’ll just change the UI system of the project.

Open the editor and navigate to UI > UI System and change the following settings.

  • UI System Type
    Select Unity UI.
  • Default Screen Size
    Set up the screen size you want to use, or rather, you design your UI for.
    This is e.g. used when creating a canvas for setting up UI prefabs or in-game (when the UI layers don’t use their own custom canvas prefabs).
    The default is X=1920, Y=1080.

Changing the UI system will prompt a confirmation dialogue:

In some cases it can happen that showing this confirmation dialogue causes an error (mostly on Mac OS) – if that’s the case, disable the Show Confirmation Dialog option above the UI System Type setting. This’ll immediately change the UI system instead of showing the confirmation dialogue.

Save Changes #

That’s it for now in the editor.

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

Also, with the UI system set up, the screen fades of our scene changes will now work.

TextMesh Pro Setup #

Make sure TextMesh Pro (TMP for short) is imported in your project (e.g. via the Unity Package Manager). For more details on using TMP, check out this tutorial.

Import Essential Resources #

Import the TMP essential resources via the Unity menu: Window > TextMeshPro > Import TMP Essential Resources

Depending on your Unity/TMP version this might also be located somewhere else.

Default Font and Sprites #

The tutorial assets include a font and sprites to use, but we’ll need to let TMP know about it and set it up as our default font and sprites.

Select the TMP Settings asset, which should be located in Assets/TextMesh Pro/Resources/. You can change TMP’s settings in the inspector.

  • Defaul Font Asset
    Select the FFFFORWA SDF font asset.
    The default font will be used by newly created TMP components as their font.
  • Defaul Sprite Asset
    Select the icons sprite asset.

UI Enviroment Scene #

When editing UI prefabs, Unity will use a canvas that is most likely not matching the canvas used in your game. This can lead to your prefab’s position and size not matching the in-game’s position and size.

To solve this issue, set up a UI Environment scene with a correctly set up canvas matching your Default Screen Size.

Creating the scene #

After setting your Default Screen Size (or after changing it) in the Makinom editor, create a new scene using the Unity menu: File > New Scene

E.g. use the Empty scene to create a completely empty scene.

Use the scene hierarchy’s context menu to create a canvas with the correct setup: Makinom > UI > Canvas

This’ll create a Canvas with the same set up as it’d be in the running game (when not using a canvas prefab), i.e. it’ll use a Canvas Scaler to scale content to different resolutions and aspect ratios.

Creating Makinom/ORK UI via the context menu will make sure it’s placed on a canvas that fits the UI setup of your project, using the same canvas setup as you just created.

Save the scene somewhere in your project, e.g. as UI Environment Scene.

Using it for prefabs #

Use the Unity menu to open the project settings: Edit > Project Settings…

Select the Editor tab and change the following setting.

  • UI Environment
    Select the UI Environment Scene you just saved.

Close the project settings.

Now, when editing a UI prefab, e.g. a UI box or an input prefab, they’ll use this scene and it’s canvas, making sure that their placement and size remains correct.

Input Prefabs #

With our initial UI system setup finished, we can now get to setting up prefabs for our inputs – i.e. buttons, toggles, sliders, text fields, etc.

While we only use buttons in this tutorial series, you should always set up all different input variants to have them available when needed. Learn more about this in the initial UI setup tutorial.

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.

We can create ready-to-use input setups using the scene hierarchy’s context menu: Makinom > UI Box > Input (Button) has different variants for creating buttons, Makinom > UI Box > Input (Value) has variants for creating value inputs

Button #

Button prefabs are used to create buttons/choices in menus or choice dialogues.

Inputs can display multiple content, we’ll use this for the button to display the regular content (e.g. name and icon of an item) and an information content (e.g. quantity of the item) separately. This is done via additional content, which is identified by it’s content ID – which is used in other places to set the content that’s displayed (e.g. in a battle menu).

Create a new button with info content using the context menu: Makinom > UI Box > Input (Button) > Choice Info Button

This creates a button with the additional content for our information added – it uses the content ID info. This is all already set up for us, so we don’t have to worry about it.

Image #

Let’s change the look of the button, this is done in the Image component of the root Choice Info Button game object.

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

Layout Element #

The button comes with a Layout Element component to set a minimum height for the button. We’ll increase that.

  • Min Height
    Set to 50.

TextMeshPro – Text (UI) #

And we’ll change the font color of the content and info texts to white.

This is done on the TextMeshPro – Text (UI) components on the Choice Info Button > Main Content > Text child object (for the main content) and the Choice Info Button > Info Content > Text child object (for the info content).

  • Vertex Color
    Select a white color with full alpha (e.g. A=1 or A=255, depending on your color picker).
  • Alignment (Optional)
    Select the Midline alignment.

Create Prefab #

Create a prefab out of the Choice Info Button game object by dragging it into the project view.

Remove the game object from the canvas.

Tab Button (Optional) #

While we don’t use this (or the other input prefabs) for this tutorial series, I’d recommend setting them up anyway.

The tab button prefab can e.g. be used by inventory menus to display different item types as tabs.

Create a new tab button using the context menu: Makinom > UI Box > Tab > Tab Button

Like with the regular button, we’ll change the sprite, layout and font color.

Image #

  • Source Image
    Select the ButtonSimple sprite.

Layout Element #

  • Min Height
    Set to 50.

Horizontal Layout Group #

We’ll increase the padding.

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

TextMeshPro – Text (UI) #

This time the component is found on the Tab Button > Text child object.

  • Vertex Color
    Select a white color with full alpha (e.g. A=1 or A=255, depending on your color picker).
  • Alignment (Optional)
    Select the Midline alignment.

Create Prefab #

Create a prefab out of the Tab Button game object by dragging it into the project view.

Remove the game object from the canvas.

Toggle (Optional) #

Create a new toggle using the context menu: Makinom > UI Box > Input (Value) > Toggle

We don’t need to make any changes – so just create a prefab out of the Toggle game object by dragging it into the project view.

Remove the game object from the canvas.

Text Input (Optional) #

Create a new text input using the context menu: Makinom > UI Box > Input (Value) > Text Input

We don’t need to make any changes – so just create a prefab out of the Text Input game object by dragging it into the project view.

Remove the game object from the canvas.

Int Slider (Optional) #

Create a new toggle using the context menu: Makinom > UI Box > Input (Value) > Int Slider with Value

Similar to the info button, this slider input will show the value using an additional content. However, this time, it uses the content ID value.

We don’t need to make any changes – so just create a prefab out of the Int Slider game object by dragging it into the project view.

Remove the game object from the canvas.

Float Slider (Optional) #

Create a new toggle using the context menu: Makinom > UI Box > Input (Value) > Float Slider with Value

We don’t need to make any changes – so just create a prefab out of the Int Slider game object by dragging it into the project view.

Remove the game object from the canvas.

UI System Setup (continued) #

Back to the editor – we’ll now use the input prefabs we created as the default UI prefabs and set up UI layers.

UI System Prefabs #

Open the editor and navigate to UI > UI System.

Default UI Prefabs #

  • Button Prefab
    Select the Choice Info Button prefab.
  • Tab Button Prefab
    Select the Tab Button prefab.
  • Bool Input Prefab
    Select the Toggle prefab.
  • String Input Prefab
    Select the Text Input prefab.
  • Int Input Prefab
    Select the Int Slider prefab.
  • Float Input Prefab
    Select the Float Slider prefab.

UI Layers #

UI layers are used to order your UI content (e.g. UI boxes and HUDs), a higher layer (in the list) will display it’s content above a lower layer. You can learn more about them in this Makinom documentation.

A new project comes with 3 layers set up:

  • Flying Texts
  • Layer 1
  • Screen Fader

The Flying Texts layer is set up to display flying texts (e.g. for damage numbers, etc., we’ll set them up later). The Screen Fader layer is set up to, well, fade the screen (e.g. fading to black on scene changes).

Navigate to UI > UI Layers, we’ll add 2 new layers, one to display menu backgrounds and one to display HUDs.

Background Layer #

Move the new layer between Flying Texts and Layer 1 (i.e. it should have the ID/index 1).

  • Name
    Set to Background.

HUD Layer #

Move the new layer between Layer 1 and Screen Fader (i.e. it should have the ID/index 3).

  • Name
    Set to HUD.

Save Changes #

And that’s it for the settings.

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

UI Animation Schematics #

We’ll create a two very simple schematics to fade in and fade out UI boxes and HUDs.

When animating UI using schematics, you have access to the UI (UI box, HUD or flying text) using local selected data via the selected key ui. Selected data, in short, allows you to store any content into data lists and access them in different nodes in schematics. E.g. this can be a list of game objects, an ability of a combatant or a combatant (or multiple combatants). You can learn more about selected data in this Makinom documentation.

You can also check out more detailed tutorials with different setups and downloadable schematics for open/close animations and moving flying texts.

Fade In Schematic #

Navigate to Schematics.

Change UI Color #

Add Node > UI > Change UI Color

This node is used to set or fade the color of UI elements (e.g. flying texts, UI boxes or HUDs).

We’ll do a short fade in (alpha value).

  • Fade
    Select Fade.
  • Wait
    Enable this setting.
  • Time
    Select Value > Value.
    Set the value to 0.2.
  • Interpolation
    Select Linear.
  • Fade Alpha
    Enable this setting.
  • Fade Red/Gree/Blue
    Disable these settings.
  • Start Color
    Select a color with no alpha value (A=0).
  • End Color
    Select a color with full alpha value (A=255 or 1, depending on your color picker).
  • Data Key
    Set to ui.
  • Data Origin
    Select Local.

And that’s it for the schematic. Click on Save Schematic to save it, e.g. as UIFadeIn.

Remember to keep your schematics organized, e.g. I’m storing it in a sub-folder: Assets/Schematics/UI/

Fade Out Schematic #

The same as for fade in, just with reversed colors.

Change UI Color #

Add Node > UI > Change UI Color

  • Fade
    Select Fade.
  • Wait
    Enable this setting.
  • Time
    Select Value > Value.
    Set the value to 0.2.
  • Interpolation
    Select Linear.
  • Fade Alpha
    Enable this setting.
  • Fade Red/Gree/Blue
    Disable these settings.
  • Start Color
    Select a color with full alpha value (A=255 or 1, depending on your color picker).
  • End Color
    Select a color with no alpha value (A=0).
  • Data Key
    Set to ui.
  • Data Origin
    Select Local.

And that’s it for the schematic. Click on Save Schematic to save it, e.g. as UIFadeOut.

 

Next, we’ll set up the UI boxes.

Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Updated on February 22, 2023
Table of Contents
  • Initial UI System Setup
    • Changing the UI System
      • Save Changes
    • TextMesh Pro Setup
      • Import Essential Resources
      • Default Font and Sprites
    • UI Enviroment Scene
      • Creating the scene
      • Using it for prefabs
  • Input Prefabs
    • Button
      • Image
      • Layout Element
      • TextMeshPro - Text (UI)
      • Create Prefab
    • Tab Button (Optional)
      • Image
      • Layout Element
      • Horizontal Layout Group
      • TextMeshPro - Text (UI)
      • Create Prefab
    • Toggle (Optional)
    • Text Input (Optional)
    • Int Slider (Optional)
    • Float Slider (Optional)
  • UI System Setup (continued)
    • UI System Prefabs
      • Default UI Prefabs
    • UI Layers
      • Background Layer
      • HUD Layer
    • Save Changes
  • UI Animation Schematics
    • Fade In Schematic
      • Change UI Color
    • Fade Out Schematic
      • Change UI Color
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!