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
  • Schematics
  • Open and Close UI Animations

Open and Close UI Animations

Table of Contents
  • Fade In
    • Change UI Color
  • Fade Out
    • Change UI Color
  • Move and Fade In
    • Change UI Color
    • Change UI Offset
    • Change UI Offset
  • Move and Fade Out
    • Change UI Color
    • Change UI Offset
  • Using the Schematics
    • UI Boxes
    • HUDs
      • Default Schematics

Create a simple schematics to animate opening or closing UI.

UI boxes and HUDs can use schematics to animate them. In this tutorial, we’ll set up simple schematics to fade in/out (transparency) and move in/out UIs. The UI (UI box or HUD) is available as local selected data via the selected key ui.

You can download the finished schematics (and more) here:

Download Schematics

The package contains schematics for:

  • fade in
  • fade out
  • move in from right
  • move in from left
  • move in from above
  • move in from below
  • move out to right
  • move out to left
  • move out to above
  • move out to below

All move in/out schematics also fade in/out.

Fade In #

Open the Makinom editor and 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.

Fade Out #

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.

Move and Fade In #

In addition to fading in, we’ll also move in from the left side.

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

Change UI Offset #

Add Node > UI > Change UI Offset

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

We’ll set the offset to place the UI left of it’s original position.

  • Vector 3 Type (Offset)
    Select Value > Value.
  • Value (Offset)
    Set to X=-50, Y=0, Z=0.
  • Fade
    Disable this setting.
  • Data Key
    Set to ui.
  • Data Origin
    Select Local.

Change UI Offset #

Add Node > UI > Change UI Offset

Now we’ll fade back to the original position.

Copy the previous Change UI Offset node and change the following settings.

  • Value (Offset)
    Set to X=0, Y=0, Z=0.
  • Fade
    Enable this setting.
  • Wait
    Enable this setting.
  • Time
    Select Value > Value.
    Set the value to 0.2.
  • Interpolation
    Select Quadratic > Quadratic Out.

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

Move and Fade Out #

In addition to fading out, we’ll also move out from the right side.

Change UI Color #

Add Node > UI > Change UI Color

  • Fade
    Select Fade.
  • Wait
    Disable 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.

Change UI Offset #

Add Node > UI > Change UI Offset

We’ll move the offset to the right side

  • Vector 3 Type (Offset)
    Select Value > Value.
  • Value (Offset)
    Set to X=50, Y=0, Z=0.
  • Fade
    Enable this setting.
  • Wait
    Enable this setting.
  • Time
    Select Value > Value.
    Set the value to 0.2.
  • Interpolation
    Select Quadratic > Quadratic In.
  • 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 UIMoveFadeOut.

Using the Schematics #

To use the schematics, you need to set them up in the UI boxes or HUDs.

UI Boxes #

For UI boxes, you can set up UI schematics for all UI boxes in UI > UI Boxes > General Settings in the Default Schematics settings.

Each individual UI box can optionally override the default schematics to use different schematics (or none) in the Schematics settings.

  • Before Open Schematic
    Select the move/fade in schematic you want to use.
  • Wait
    Enable this setting.
    This’ll wait for the schematic to finish before considering the UI box open (e.g. allowing controls).

You can also use the After Open Schematic – these settings are for using the schematic either before or after the UI box’s Open State Change setup. When not using the open state changes, it doesn’t really matter which one you use.

The same can be considered for the closing schematic, either use Before Close Schematic or After Close Schematic, i.e. either before or after the UI box’s Close State Change setup.

  • Before Close Schematic
    Select the move/fade out schematic you want to use.
  • Wait
    Enable this setting.
    This’ll wait for the schematic to finish before considering the HUD closed (e.g. finish closing a menu screen or continuing a schematic after a dialogue closed).

HUDs #

For HUDs, you can set up UI schematics for all HUDs in UI > HUDs > General Settings in the Default Schematics settings.

Each individual HUD can optionally override the default schematics to use different schematics (or none) in the Schematics settings.

Default Schematics #

  • Before Open Schematic
    Select the move/fade in schematic you want to use.
  • Wait
    Enable this setting.
    This’ll wait for the schematic to finish before considering the HUD open.

You can also use the After Open Schematic – these settings are for using the schematic either before or after the HUD’s Open State Change setup. When not using the open state changes, it doesn’t really matter which one you use.

The same can be considered for the closing schematic, either use Before Close Schematic or After Close Schematic, i.e. either before or after the HUD’s Close State Change setup.

  • Before Close Schematic
    Select the move/fade out schematic you want to use.
  • Wait
    Enable this setting.
    This’ll wait for the schematic to finish before considering the HUD closed.

UI
Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Updated on December 11, 2021
Table of Contents
  • Fade In
    • Change UI Color
  • Fade Out
    • Change UI Color
  • Move and Fade In
    • Change UI Color
    • Change UI Offset
    • Change UI Offset
  • Move and Fade Out
    • Change UI Color
    • Change UI Offset
  • Using the Schematics
    • UI Boxes
    • HUDs
      • Default Schematics
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!