In this tutorial we’ll create simple schematics to animate opening and closing UI.

UI boxes and HUDs can use schematics to animate opening and closing them. We’ll set up simple schematics to fade in/out (transparency) and move in/out UIs. The UI is available as local selected data via the selected key ui.

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

Download Schematics (for Unity)

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.

For animating flying texts, see the flying text animation schematics tutorial.

Fade In #

Open the schematic editor, a new, blank schematic should already be opened.

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

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

Fade Out #

We can continue work on the current schematic and save it as a new file.

That way we only need to adjust the colors.

Change UI Color #

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

Move In From Left #

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

Create a new schematic.

Change UI Color #

Add Node > UI > Change UI Color

As you might have noticed above, you some of the default values of the node are already what we need, so we’ll only need to change a few settings.

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.

Change UI Offset #

Add Node > UI > Change UI Offset

Now we’ll fade back to the original position. Add a new node.

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

Other Move In Variants #

We’ll quickly set up moving in from right, above and below.

As before, we can continue working on the schematic and save it as a new file.

We only need to change the 1st Change UI Offset node’s value, i.e. where the movement will start from.

Move In From Right #

Click on Save Schematic As to save it, e.g. as UIMoveInFromRight.

Move In From Above #

Click on Save Schematic As to save it, e.g. as UIMoveInFromAbove.

Move In From Below #

Click on Save Schematic As to save it, e.g. as UIMoveInFromBelow.

Move Out To Left #

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

Create a new schematic.

Change UI Color #

Add Node > UI > Change UI Color

Change UI Offset #

Add Node > UI > Change UI Offset

We’ll move the offset to the left side

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

Other Move Out Variants #

We’ll quickly set up moving out to right, above and below.

As before, we can continue working on the schematic and save it as a new file.

We only need to change the Change UI Offset node’s value, i.e. where the movement will end.

Move Out To Right #

Click on Save Schematic As to save it, e.g. as UIMoveOutToRight.

Move Out To Above #

Click on Save Schematic As to save it, e.g. as UIMoveOutToAbove.

Move Out To Below #

Click on Save Schematic As to save it, e.g. as UIMoveOutToBelow.

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

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 #