ORK Framework Logo - RPG Editor for Unity
  • Features
  • Showcase
  • Guide
    • Documentation
    • Tutorials
    • API
  • ORK 2
    • Tutorials
    • Plugins
    • API
  • Support
  • Forum
  • Get ORK

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: 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: Initial Setup

Unity UI: Initial Setup

Table of Contents
  • Change the UI System
  • TextMesh Pro Setup
  • UI Enviroment Scene
    • Creating the scene
    • Setting up the UI Environment scene
  • First UI Box
    • Create a prefab
    • Using the prefab
      • Unity UI
  • Default UI Prefabs
    • Creating the prefabs
      • Button Prefab
      • Tab Button Prefab
      • Bool Input Prefab
      • String Input Prefab
      • Int Input Prefab
      • Float Input Prefab
    • Setting up the default UI prefabs
      • Default UI Prefabs
  • Default Flying Text (optional)
    • Create a prefab
    • Using the prefab
      • Flying Text Settings

Set up the initial settings when using the Unity UI module.

In this tutorial we’ll go through the initial setup you should do when using the Unity UI module.

You can download an UI assets pack with some basic UI prefabs here:

Download UI Assets

This package contains:

  • 2 background sprites for boxes
  • 1 background sprite for buttons
  • 1 white sprite (e.g. for value bars)
  • 1 font with TextMesh Pro setup
  • 2 UI box prefabs
  • input prefabs (buttons, toggle, sliders, etc.)

Change the UI System #

First, you need to change the used UI system of your Makinom/ORK project.

Open the Makinom editor, 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 rare cases it can happen that showing this confirmation dialogue causes an error – 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 the changes using the Save Settings button at the bottom of the editor.

TextMesh Pro Setup #

If you haven’t done so, import the TMP Essential Assets into your Unity project.

You can impor them via the Unity menu: Window > TextMeshPro > Import TMP Essential Resources

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

Learn more about setting up TextMesh Pro in this UI tutorial.

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), create a new scene using the Unity menu: File > New 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 Prefab Scene.

Setting up the UI Environment scene #

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 Prefab 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.

First UI Box #

It’s time to set up a first UI box.

Create a prefab #

When using the Unity UI module, the look, placement and size of the UI box is set up as a prefab.

Create a ready-to-use UI box setup using the scene hierarchy’s context menu: Makinom > UI Box > UI Box (different variants available)

The UI box is ready to go, so just make a prefab out of it.

For more details, check this tutorial about setting up a UI box prefab.

Using the prefab #

Navigate to UI > UI Boxes in the editor, select the Default UI box and change the following setting.

Unity UI #

  • UI Box Prefab
    Select the UI box prefab you want to use.

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

Default UI Prefabs #

One last thing remains to be done – creating UI prefabs for inputs (e.g. buttons, sliders, toggles or text fields) and using them as the Default UI Prefabs.

The default UI prefabs are used as fallbacks, in case no other UI prefab is defined for an input (e.g. by a UI box or the content definition of a dialogue or menu). When inputs are displayed in a UI box, they’re created from prefabs to define how they look or interact – the content is coming from whatever is displaying the UI box.

Creating the prefabs #

All of the inputs can easily be created using the scene hierarchy’s context menu.

Button Prefab #

The button prefab is used for buttons, e.g. choices in a dialogue, items listed in an inventory menu, etc.

Create a button using the scene hierarchy’s context menu: Makinom > UI Box > Input (Button) > Choice Button

There are different variants available:

  • Empty Button
    An empty button, without any image or text.
  • Choice Button
    A button with icon and text.
  • Choice Info Button
    A button with icon, text and an additional content using the content ID info.
    The info content is displayed within the button, on it’s right side.
    E.g. use a button like this for displaying items or abilities, which can show their quantity or use cost in the info content.
  • Choice Title Button
    A button with icon, text and an additional content using the content ID title.
    The title content is displayed on the left side of the button.
    E.g. use a button like this for displaying equipment slots, the title
  • Choice Title Button fixed Width
    Same as the Choice Title Button, but set up with the Title having a fixed width.
    Use this variant to have multiple title buttons show the same title/button sizes.
    The size of the title is managed by the Layout Element component’s Preferred Width setting of the Title Content child object.

Create a prefab out of the button. It’s recommended to make a prefab for a choice button, choice info button and choice title button to have them all available as needed.

Tab Button Prefab #

The tab button prefab is used for tabs, e.g. when a menu screen displays types as tabs instead of in a separate UI box.

Create a tab button using the scene hierarchy’s context menu: Makinom > UI Box > Tab > Tab Button

Create a prefab out of the tab button.

Bool Input Prefab #

The bool input prefab is used for bool value inputs, e.g. mute options in option menus or for custom options using a bool variable.

Create a bool input using the scene hierarchy’s context menu: Makinom > UI Box > Input (Value) > Toggle

Create a prefab out of the bool input.

String Input Prefab #

The string input prefab is used for text/string value inputs, e.g. for custom options using a string variable.

Create a string input using the scene hierarchy’s context menu: Makinom > UI Box > Input (Value) > Text Input

Create a prefab out of the string input.

Int Input Prefab #

The int input prefab is used for int value inputs, e.g. quantity selections, volume options (when used as int) or custom options using an int variable.

Create an int input using the scene hierarchy’s context menu: Makinom > UI Box > Input (Value) > Int Slider or Int Button

There are different variants available:

  • Int Slider
    An int slider input.
  • Int Slider with Value
    An int slider input with additional content using content ID value.
    E.g. use the value content to display the slider’s value (via content setup in the option menu or value input dialogue using it).
  • Int Button Horizontal
    An int input with 2 buttons to increase and decrease the value, arranged horizontally with an additional content between the buttons (content ID value).
  • Int Button Vertical
    An int input with 2 buttons to increase and decrease the value, arranged vertically with an additional content between the buttons (content ID value).
  • Int Button Horizontal+Vertical
    An int input with 4 buttons to increase and decrease the value, 2 arranged vertically, arranged horizontally with an additional content between the buttons (content ID value).

Create a prefab out of the int input.

Float Input Prefab #

The float input prefab is used for float value inputs, e.g. volume options (when used as float) or custom options using a float variable.

Create an int input using the scene hierarchy’s context menu: Makinom > UI Box > Input (Value) > Float Slider or Float Button

There are the same variants available as for the Int Input.

Create a prefab out of the float input.

Setting up the default UI prefabs #

Navigate to UI > UI System in the editor and change the following settings.

Default UI Prefabs #

  • Button Prefab
    Select the button prefab you created.
    For ORK, it’s recommended to use a Choice Info Button variant, as you often want to display additional content (e.g. item quantity, use costs, etc.).
    If no additional content is displayed, it’ll simply not be displayed in the button.
  • Tab Button Prefab
    Select the tab button prefab you created.
  • Bool Input Prefab
    Select the bool input prefab you created.
  • String Input Prefab
    Select the string input prefab you created.
  • Int Input Prefab
    Select the int input prefab you created.
  • Float Input Prefab
    Select the float input prefab you created.

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

Default Flying Text (optional) #

While not part of the main UI system, flying texts are also displayed by UI and need to be set up.

See this UI tutorial on flying texts for a more in-depth explanation.

You can also use schematics to animate flying texts, see this schematic tutorial for details.

Create a prefab #

Flying texts are created in the UI using prefabs.

Use the scene hierarchy’s context menu: Makinum > UI > Flying Text (Sprite + TextMeshPro)

This’ll create a ready-to-use flying text, make a prefab out of it.

Using the prefab #

Navigate to UI > UI Settings in the editor and change the following settings.

Flying Text Settings #

  • UI Prefab
    Select the flying text prefab you created.

UI
Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Updated on May 11, 2022
Table of Contents
  • Change the UI System
  • TextMesh Pro Setup
  • UI Enviroment Scene
    • Creating the scene
    • Setting up the UI Environment scene
  • First UI Box
    • Create a prefab
    • Using the prefab
      • Unity UI
  • Default UI Prefabs
    • Creating the prefabs
      • Button Prefab
      • Tab Button Prefab
      • Bool Input Prefab
      • String Input Prefab
      • Int Input Prefab
      • Float Input Prefab
    • Setting up the default UI prefabs
      • Default UI Prefabs
  • Default Flying Text (optional)
    • Create a prefab
    • Using the prefab
      • Flying Text Settings
Sitemap
  • Features
  • Showcase
  • Guide
    • Documentation
    • Tutorials
    • API
  • ORK 2 Hub
    • Tutorials
    • Plugins
    • API
  • Support
  • Forum
  • Get ORK
  • Contact
  • Blog
  • Makinom
  • gamingislove.com
Categories
  • News (59)
  • ORK 2 (137)
    • Tutorial (137)
      • Game tutorial (50)
      • Gameplay (32)
      • How-to (55)
  • Release (129)
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!