@agatestudio

Unity Tween Engine

Edi

Knight

Agate Studio

@agatestudio@agatestudio@agatestudio

Index

• Definition

• Why?

• When to use

• More

• Tween Engines in Unity

• Samples & Demos

@agatestudio@agatestudio@agatestudio

Definition

@agatestudio@agatestudio@agatestudio

Definition

• A tween is basically an interpolation between two values that runs for a given amount of time.

• Tween Engine does a lot more than that, and handles the life-cycles and the update mechanisms of the interpolations for you. Moreover, it enables the interpolation of attributes of some objects.

@agatestudio@agatestudio@agatestudio

Why use tweening (engine)?

• Dynamic.

• You can modify your transitions, timing, values, easings, and other attributes with only lines of code, rather than telling your artist/animator to animate/fixate the object. This will faster the production time, too.

• Some tweening engine have motion path, too!

@agatestudio@agatestudio@agatestudio

When to use tweening (engine)?

• Simple animations, like movement,

• Rotation,

X

@agatestudio@agatestudio@agatestudio

When to use tweening (engine)?

• Color/alpha transformation,

• Scaling,

@agatestudio@agatestudio@agatestudio

When to use tweening (engine)?

• Or all of them combined!

@agatestudio@agatestudio@agatestudio

More on tweening (engine)

• Time : Time needed to complete a tween animation

• Delay : Time needed to start a tween animation

• Easing : Some equation to control the rate of tweening

@agatestudio@agatestudio@agatestudio

More on tweening (engine)

Example : Without easing

@agatestudio@agatestudio@agatestudio

More on tweening (engine)

Example : With easing (double the return value when time > 3s)

@agatestudio@agatestudio@agatestudio

More on tweening (engine)

@agatestudio@agatestudio@agatestudio

Unity Tween Engines

• iTween

• HOTween

• LeanTween

• etc

@agatestudio@agatestudio@agatestudio

iTween

• Free

• Complete documentation and samples

• Easy to use

• Tween GameObject 2D-ly and 3D-ly, GUI, even sound!

@agatestudio@agatestudio@agatestudio

iTween

• Movement

@agatestudio@agatestudio@agatestudio

iTween

• Rotation

• Color

@agatestudio@agatestudio@agatestudio

iTween

More on “Samples & Demos” later

@agatestudio@agatestudio@agatestudio

HOTween & LeanTween

• More or Less like iTween

• Some says that iTween is heavier in mobile (ios/android)

• HOTween & LeanTween has optimizer/optimized version for mobile

@agatestudio@agatestudio@agatestudio

Samples and Demos

• iTween http://itween.pixelplacement.com/examples.php

• More on Unity3d

Thank you!