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