Transitions – GameObject and UI


This page covers information specific to GameObject and UI transitions. GameObject and UI transitions allow you to quickly and easily add effects and transitions to these type of gameobjects to create a more professional looking game. The different transitions are listed below.

Please also see the general transition overview for an introduction to many of the shared features and functionality that all transitions share.

The different GameObject and UI transitions are listed below and can be combined or chained to produce additional effects.

Fade

Fade allows fading of UI elements and will work with Canvas Groups, Images and Text. In addition to the standard component properties it also defines:

Fade

Target
The optional GameObject that should be the target of this transition. If not specified then the current GameObject will be used. Fade will look for and work upon the first Canvas Group, Image or Text component detected on this target.

Start Transparency
The transition in start transparency.

End Transparency
The transition out ending transparency.

The component will use the original transparency as the end value for the transition in and it’s current transparency as the start value when transitioning out

Scripting

Usage of Fade is as discussed in the general transition overview. Additional TransitionStep extension methods Fade, FadeToOriginal and FadeFromOriginal are provided for chaining of screen fades.

E.g,

Move

Move allows moving of GameObjects and UI elements using various coordinate systems and either a fixed or delta distance. In addition to the standard component properties it also defines:

Target
The optional GameObject that should be the target of this transition. If not specified then the current GameObject will be used.

Move Mode
Whether to use the local, global or the anchored position (UI / RectTransform only) for the position.

Start Position Type
Specifies whether Start Position is a fixed position or a delta from the original position.

Start Position
The transition in start position either as a Fixed Position or Delta.

End Position Type
Specifies whether End Position is a fixed position or a delta from the original position.

End Position
The transition out ending position either as a Fixed Position or Delta.

The component will use the original position as the end value for the transition in and it’s current position as the start value when transitioning out.

Scripting

Usage of Move is as discussed in the general transition overview. Additional TransitionStep extension methods Move, MoveToOriginal and MoveFromOriginal are provided for chaining of screen fades.

e.g.

Move Target

Move Target allows moving of GameObjects and UI elements to and from a given secondary target gameobject. In addition to the standard component properties it also defines:

Target
The optional GameObject that should be the target of this transition. If not specified then the current GameObject will be used.

Start Target
The transition in start target.

End Target
The transition out ending target.

Move X, Y, Z
Let you lock movement to a specific axis so you can use a single target for multiple transitions.

The component will use the original position as the end value for the transition in and it’s current position as the start value when transitioning out

Scripting

Usage of MoveTarget is as discussed in the general transition overview. Additional TransitionStep extension methods MoveTarget, MoveTargetToOriginal and MoveTargetFromOriginal are provided for chaining of move target transitions.

Rotate

Rotate allows for rotating of all GameObjects and UI elements using either local or global positioning. In addition to the standard component properties it also defines:

Target
The optional GameObject that should be the target of this transition. If not specified then the current GameObject will be used.

Rotation Mode
Whether to use local or global positioning for the rotation.

Start Rotation
The transition in start rotation.

End Rotation
The transition out ending rotation.

The component will use the original rotation as the end value for the transition in and it’s current rotation as the start value when transitioning out

Scripting

Usage of Rotate is as discussed in the general transition overview. Additional TransitionStep extension methods Rotate, RotateToOriginal and RotateFromOriginal are provided for chaining of screen fades.

Scale

Scale allows for scaling of all GameObjects and UI elements. In addition to the standard component properties it also defines:

Target
The optional GameObject that should be the target of this transition. If not specified then the current GameObject will be used.

Start Scale
The transition in start scale.

End Scale
The transition out ending scale.

The component will use the original scale as the end value for the transition in and it’s current scale as the start value when transitioning out

Scripting

Usage of Scale is as discussed in the general transition overview. Additional TransitionStep extension methods Scale, ScaleToOriginal and ScaleFromOriginal are provided for chaining of scale transitions.

E.g,

Trigger Animation

Trigger Animation provides a way of integrating the standard Unity animation system into your transitions. By referencing an existing animation, you can have it play and synchronise with the rest of the transition framework. In addition to the standard component properties it also defines:

Target
The optional GameObject that should be the target of this transition. If not specified then the current GameObject will be used. Whatever is used as the target must contain an Animator component that contains an animation with TransitionIn and TransitionOut triggers as shown below.

Speed (In Config / Out Config)
The speed with which the animation should play.

The below shows an example of an animator controller that implements the correct triggers and states as required by the Trigger Animation component. This is located at\FlipWebApps\BeautifulTransitions\Animations\Transitions\Transition

AnimationController

To setup your own animations, you can create an Animation Override Controller, select the above Transition Controller and then select the animations that should represent the different transitions. This should then be added to an Animator on the target gameobject.

Scripting

Usage of Trigger Animation is as discussed in the general transition overview. An additional TransitionStep extension method TriggerAnimation is provided for chaining of animations.

Demos

GameObject and UI Transitions Demo – A simple demonstration of gameobject and UI component based transitions.
Scripting Demo – A simple demonstration of calling and linking transitions through scripting.
Transition Events Demo – A simple demonstration of component lifecycle events.

Additional Help

Please view the included demo’s under the \FlipWebApps\BeautifulTransitions\_Demo folder for examples and source code for implementing common scenarios.

If you need help or support then please visit our support forum, or let us know if you have any suggestions, feature requests or comments.