Basic Animation with iTween

Have you ever done animation in your game? It’s probably stupid to ask a similar question, practically in every game there is some kind, but the animation and you had to deal with it. Let me remind you that this lesson is more than tiring, most often you have to come up with your own ideas in order to somehow make your life easier. But why do extra work, do it badly when it's already done, and done well !? Let's get to know a tool called iTween .

You can get it on the official website: http://itween.pixelplacement.com
iTween is a class that provides various methods. With their help, you can not only animate scene objects, but also change their color, size, position, direction.

Let's try to simulate a small testing ground for our tests.

First, we’ll connect the iTween-package from the Asset store : https://www.assetstore.unity3d.com In Unity we should see something like this:



Create a new scene with the following content: The



cube is the object that we will animate. Now go to iTween. We create a new script component such as C # at our object. Fill in the Start method:

void Start()
{
        iTween.RotateFrom(gameObject, iTween.Hash("y", 90.0f, "time", 2.0f, "easetype", iTween.EaseType.easeInExpo));
        iTween.MoveFrom(gameObject, iTween.Hash("y", 3.5f, "time", 2.0f, "easetype", iTween.EaseType.easeInExpo));
        iTween.ShakePosition(Camera.main.gameObject, iTween.Hash("y", 0.3f, "time", 0.8f, "delay", 2.0f));
        iTween.ColorTo(gameObject, iTween.Hash("r", 1.0f, "g", 0.5f, "b", 0.4f, "delay", 1.5f, "time", 0.3f));
        iTween.ScaleTo(gameObject, iTween.Hash("y", 1.75f, "delay", 2.8f, "time", 2.0f));
        iTween.RotateBy(gameObject, iTween.Hash("x", 0.5f, "delay", 4.4f));
        iTween.MoveTo(gameObject, iTween.Hash("y", 1.5f, "delay", 5.8f));
        iTween.MoveTo(gameObject, iTween.Hash("y", 0.5f, "delay", 7.0f, "easetype", iTween.EaseType.easeInExpo));
        iTween.ScaleTo(gameObject, iTween.Hash("y", 1.0f, "delay", 7.0f));
        iTween.ShakePosition(Camera.main.gameObject, iTween.Hash("y", 0.3f, "time", 0.8f, "delay", 8.0f));
        iTween.ColorTo(gameObject, iTween.Hash("r", 0.165f, "g", 0.498f, "b", 0.729f, "delay", 8.5f, "time", 0.5f));
        iTween.CameraFadeAdd();
        iTween.CameraFadeTo(iTween.Hash("amount", 1.0f, "time", 2.0f, "delay", 10.0f));
}

Run and look at the result. Pretty good, isn't it?



Let's parse the script line by line.

iTween.RotateFrom(gameObject, iTween.Hash("y", 90.0f, "time", 2.0f, "easetype", iTween.EaseType.easeInExpo));

The RotateFrom method is used to rotate an object. Unlike RotateTo and RotateBy , RotateFrom is used to initialize the rotation with the specified angle and rotate it to its original state. The method, like most others, has an overload. You can use a short or detailed version:

RotateFrom(GameObject target, Vector3 rotation, float time);
RotateFrom(GameObject target, Hashtable args);

We pass gameObject , the object that has the current script. In order not to write something like:

Hashtable args = new Hashtable();
args.Add(“y”, 90.0f);
args.Add(“time”, 2.0f);
args.Add(“easetype”, iTween.EaseType.easeInExpo);

We use iTween.Hash - an express version of Hashtable . In the arguments we specified y = 90.0f, this is the equivalent (if x and z are zero, of course)

Quaternion.Euler( new Vector3(0f, 90.0f, 0f) )

That turn from which our rotation begins.

time=2.0f

The time that should be spent on animation. There is also a similar argument called “ speed ”, in which case it is not time that is indicated, but the speed at which the animation will take place. The last argument we specified is easetype = iTween.EaseType.easeInExpo . easetype is a curve shape that is used for interpolation. Here are the curves in a graphical representation:



Try experimenting if you don’t understand how it works.

iTween.MoveFrom(gameObject, iTween.Hash("y", 3.5f, "time", 2.0f, "easetype", iTween.EaseType.easeInExpo)); 

MoveFrom is similar to the previous one, everything should be clear, just moving is used instead of rotation.

iTween.ShakePosition(Camera.main.gameObject, iTween.Hash("y", 0.3f, "time", 0.8f, "delay", 2.0f));

ShakePosition in this case is used to implement the “shaking" of the camera. This method makes the object move in decreasing amplitude, does not use interpolation, the object will appear at random points, within the allotted frames. There is a new argument called “ delay ”, this is an important animation option, it is used to indicate the time in seconds that must elapse before the animation starts.

iTween.ColorTo(gameObject, iTween.Hash("r", 1.0f, "g", 0.5f, "b", 0.4f, "delay", 1.5f, "time", 0.3f));

ColorTo smoothly changes the color of an object over time.

iTween.ScaleTo(gameObject, iTween.Hash("y", 1.75f, "delay", 2.8f, "time", 2.0f));

ScaleTo , as seen from the method name, resizes the object.

iTween.RotateBy(gameObject, iTween.Hash("x", 0.5f, "delay", 4.4f));

RotateBy resembles RotateFrom , it is necessary in those cases when you need to rotate the object more than 360 degrees (although, in this case, you could do with the RotateTo method ). Suppose we specified z = 2.0f , this will mean that the object should rotate twice around the Z axis in a certain time interval.

iTween.MoveTo(gameObject, iTween.Hash("y", 1.5f, "delay", 5.8f));
iTween.MoveTo(gameObject, iTween.Hash("y", 0.5f, "delay", 7.0f, "easetype", iTween.EaseType.easeInExpo));

MoveTo is probably the main method of the entire iTween class . It moves the object to the specified coordinates in the allotted time. Interpolation is based on the same easetype that you already know.

The following new methods:

iTween.CameraFadeAdd();
iTween.CameraFadeTo(iTween.Hash("amount", 1.0f, "time", 2.0f, "delay", 10.0f));

CameraFadeAdd creates a new object that is used to simulate dimming. Depth changes from the current value to the one specified in the arguments. The following overloads exist:

CameraFadeAdd()
CameraFadeAdd(Texture2D texture)
CameraFadeAdd(Texture2D texture, int depth)

If Texture2D is not specified , black color will be used.

From what I have not described, there are still important points. For example, in the arguments you can specify the method that will be called when an event occurs. Let's say:

public class iTweenController : MonoBehaviour
{
    int clbkN = 0;
    GUIStyle style;
    void Awake()
    {
        style = new GUIStyle();
        style.fontSize = 60;
    }
    void Start()
    {
        iTween.MoveTo(gameObject, iTween.Hash("position", new Vector3(5.0f, 1.0f, 0.0f), "oncomplete", "myClbk",
            "loopType", iTween.LoopType.loop, "speed", 2.0f));
    }
    void myClbk()
    {
        clbkN++;
    }
    void OnGUI()
    {
        GUI.Label(new Rect(10, 10, 0, 0), "Callback # "+clbkN, style);
    }
}

The result will be this:



I note that the new arguments to the MoveTo method were used :

position = new Vector3(5.0f, 1.0f, 0.0f)

This is a short entry relevant to “x”, 5.0f, “y”, 1.0f, “z”, 0.0f

oncomplete = "myClbk"

Upon completion of the animation (or iteration of the animation loop), the method with the specified name is called.

loopType = iTween.LoopType.loop

Type of animation. In this case, a normal cycle is specified, the animation will play endlessly, at the beginning of each animation, the object will be moved to its initial position.

On this, perhaps, I will finish. Thank you all for your attention.