Unity：簡単アニメーション、iTween の使い方（人気の無料アセット）

はじめに

Unity の人気アセットの iTween を紹介させていただきます。なんとRatingが★５の 2657もあるという超人気のアセットになります。

本アセットの使い道としては、 オブジェクトなどスクリプトでアニメーションさせたい時にとっても便利なアセットになります。

Unityを知らない方は、ぜひ こちらの記事 をご参照ください。

サンプルシーンを確認

説明などの使い方はいったん横に置いて、まずは何ができるのかをサンプルシーンを確認していきたいと思います。

２つのオブジェクトがまず見えます。

上のオブジェクトは手前に回転した後に、奥に回転しています。
下のオブジェクトは右に移動した後に、左に移動しています。

回転させるスクリプト

それでは上の回転しているオブジェクトのスクリプトを確認してみましょう。

何やら仰々しい内容が書いてありますね、内容を簡単に説明します。

• iTween.RotateBy は回転をさせるための関数です。
• gameObject は回転させる対象のオブジェクトです。
• iTween.Hash はオプションみたいな物です。
  • ２つ１組でオプションを以下のように指定します。
    • “x” = 0.25
    • “easeType” = “easeInOutBack”
    • “loopType” = “pingPong”
    • “delay” = 0.4

using UnityEngine;
using System.Collections;

public class RotateSample : MonoBehaviour
{	
	void Start(){
		iTween.RotateBy(gameObject,
                        iTween.Hash("x"       , .25,
                                    "easeType", "easeInOutBack",
                                    "loopType", "pingPong",
                                    "delay"   , .4));
	}
}

オプションの説明

• “x” ： 回転の軸を指定
• 0.25 ： 回転角度を指定しています。（0～1の指定で、0.25は90度）
• “easeType” ： アニメーションの仕方
• “easeInOutBack” ： アニメーションの種類（ちょっとバックして助走をつけてから動いてゆっくりと止まります）
• “loopType” ： 繰り返しの仕方
• “pingPong” ： 繰り返しの種類（一度動いてから、逆再生をします）
• “delay” ： アニメーション開始までの待ち時間の指定
• 0.4 ： アニメーション開始までの待ち時間

移動しているスクリプト

次に移動しているオブジェクトのスクリプトを確認してみましょう。

• iTween.MoveBy は回転をさせるための関数です。
• gameObject は回転させる対象のオブジェクトです。
• iTween.Hash はオプションみたいな物です。
  • ２つ１組でオプションを以下のように指定します。
    • “x” = 2
    • “easeType” = “easeInOutExpo”
    • “loopType” = “pingPong”
    • “delay” = 0.1

using UnityEngine;
using System.Collections;

public class MoveSample : MonoBehaviour
{	
	void Start(){
		iTween.MoveBy(gameObject, 
                      iTween.Hash("x"       , 2, 
                                  "easeType", "easeInOutExpo", 
                                  "loopType", "pingPong", 
                                  "delay"   , .1));
	}
}

オプションの説明

• “x” ： 移動の軸を指定
• 2.0 ： 移動距離を指定しています。（Unityの座標２つ分）
• “easeType” ： アニメーションの仕方
• “easeInOutExpo” ： アニメーションの種類（はじめと終了が遅く、中間が早く動きます）
• “loopType” ： 繰り返しの仕方
• “pingPong” ： 繰り返しの種類（一度動いてから、逆再生をします）
• “delay” ： アニメーション開始までの待ち時間の指定
• 0.1 ： アニメーション開始までの待ち時間

iTween のオプション説明

x・y・z

moveHash.Add ("x", 1f);
moveHash.Add ("y", 1f);
moveHash.Add ("z", 1f);

それぞれ、どの方向に力を加えるかを決められます。
引数２はどれだけ力を加えるか指定してあげます。

position

moveHash.Add ("position", new Vector3(0f, 0f, 0f));

x・y・zと同じ用途で使えます。
ポジションを２つ以上動かすのであれば、こちらの方が綺麗かもしれませんね。

time

moveHash.Add ("time", 2f);

アニメーション完了までの時間を指定できます。
また、timeが追加されていない場合は１秒でアニメーションが完了します。

delay

moveHash.Add ("easetype","easeInOutBack");

アニメーションに緩急をつけることができます。
(例えば、値をちょっとずつ加速するようにしたり、一気に減速するようにしたり…等)
以下のサイトを参考にしてもらえればイメージがつかめると思います。
http://ozpa-h4.com/demo/easing/

oncompletetarget

moveHash.Add ("oncompletetarget", this.gameObject);

アニメーションが終わった後に呼ぶメソッドを受け取るオブジェクトを指定してあげます。

oncomplete

moveHash.Add ("oncomplete", "AnimationEnd");

アニメーションが終わった後に呼ぶメソッド名を指定してあげます。
これを使う場合はoncompletetargetを指定してあげないと呼ばれないので注意です。

loopType

moveHash.Add ("loopType", "loop");

ループの動きを指定します。。タイプは３つあります。

• none : ループしない(１度で終了)
• loop : ループさせる
• pingPong : 再生後に逆再生します。

iTween のメソッド説明

移動メソッド

• iTween.MoveTo
• iTween.MoveUpdate
• iTween.MoveFrom
• iTween.MoveBy
• iTween.MoveAdd

回転メソッド

• iTween.RotateTo
• iTween.RotateFrom
• iTween.RotateUpdate
• iTween.RotateBy
• iTween.RotateAdd

拡大縮小メソッド

• iTween.ScaleTo
• iTween.ScaleFrom
• iTween.ScaleUpdate
• iTween.ScaleBy
• iTween.ScaleAdd

揺らすメソッド

• iTween.ShakePosition
• iTween.ShakeRotation
• iTween.ShakeScale

揺れるようなメソッド

• iTween.PunchPosition
• iTween.PunchRotation
• iTween.PunchScale

まとめ

いかがでしたか、iTweenのいい所は緩急をつけたアニメーションの指定を簡単にできる所になります。

Unity 標準でも Vector3.Lerp などを使えば徐々に移動できますが、移動時間の指定、待ち時間、ちょっとバックしからの移動など色々な事が行えるので、Unity でのゲーム開発では結構必須なのかなと思います

参考資料

• 強火で進め：http://d.hatena.ne.jp/nakamura001/20121127/1354021902