「Unity」iTweenを使って簡単アニメーション!

Unity

Unityは最初からアニメーションを作る機能が備わっていますが、しかし設定項目が多く奥深いので初心者にとって少しハードルが高いかもしれないです。
アニメーションを作りたいですがどうしたらいいか分からない。簡単なアニメーションならなんとなく作れるが、ちょっと複雑なアニメーションを作るのに時間が掛かったり、思い通りにできないなど、アニメーションをマスターするのに膨大な時間を費やす必要があります。
そんな悩みを解決するために今回はiTweenというフリーアセットをご紹介したいと思います。

iTweenとは

iTweenはC#スクリプトだけで対象のGameObjectを思うままアニメーションさせることのできる無料Assetです!
オブジェクトの移動、スピン、振動、スケール、色、透明度などなど、あらゆる属性を変化させてアニメーションできます。そのためのプロパティ及びメソッドが豊富に用意されています。
iTweenの公式ドキュメントでは、それらのメソッドの詳細が載っていますので是非御覧ください。
AssetStoreでゲットして早速試してみましょう!

iTweenの使い方(一部抜粋)

GameObjectを移動させてみる

void Start()
{
    // 対象のGameObjectのYポジション
    float yPos = transform.position.y;

    // 各種プロパティの設定
    Hashtable hash = new Hashtable();
    hash.Add("y", yPos + 1.5f);// 上方向へ1.5f移動する
    hash.Add("time", 0.5f);// 0.5秒をかけて移動する
    hash.Add("oncomplete", "OnComplete");// 移動完了した時のコールバック
    iTween.MoveTo(gameObject, hash);
}

void OnComplete()
{
    // アニメーションが終わった時の処理
}

GameObjectをシェイクさせてみる

void Start()
{
    // 各種プロパティの設定
    Hashtable hash = new Hashtable();
    hash.Add("x", 0.1f);// x軸(横)を0.1の力で振動させる
    hash.Add("y", 0.3f);// y軸(縦)を0.3の力で振動させる
    hash.Add("time", 0.5f);// 0.5秒をかけて
    hash.Add("oncomplete", "OnComplete");// 完了した時のコールバック
    iTween.ShakePosition(gameObject, hash);
}

void OnComplete()
{
    // アニメーションが終わった時の処理
}

GameObjectを回転させてみる

iTween.RotateTo(
    gameObject
    , iTween.Hash(
        "time", 0.5f,
        "rotation", new Vector3(0f, 0f, 1800f),// z軸を5回転させる(1回転は360°)
        "oncomplete", "OnComplete"
        , "easeType", iTween.EaseType.easeInQuad
    )
);

GameObjectのスケールを変化させる(サイズ調整)

iTween.ScaleTo(
    gameObject
    , iTween.Hash(
        "time", 0.5f,
        "x", 5f,
        "y", 3f
        , "easeType", iTween.EaseType.easeInQuad
    )
);

iTweenの使い方(ValueTo)

ValueToはすこし特殊な使い方で、これまでの移動を司るメソッドMoveToや回転を司るRotateToなどと違い、ある値(from)からある値(to)へ変化させるために利用します。

下の例ですと、0.5秒をかけて0から100へカウントアップしていく動きをしていて、カウントアップするたびにOnUpdateValueが呼び出されます。OnUpdateValueではupdateValueTextにvalueを代入して画面上に表示するようにしています。

[SerializeField] Text updateValueText;

void Start(){
    iTween.ValueTo(
        gameObject,
        iTween.Hash(
            "from", 0,
            "to", 100,
            "time", 0.5f,
            "onupdate", "OnUpdateValue"
            , "easeType", iTween.EaseType.easeInQuad
        )
    );
}

private void OnUpdateValue(int value)
{
    updateValueText.text = value.ToString();
}

このように任意の数値を設定して、アニメーションさせることができます。上記の例の以外にも、例えばGameObjectを移動させることだってValueToで代用できます。起点の座標をfromに、移動先の座標をtoに設定すれば可能です。色を変化させる場合は0から255まで数値で調整すれば実現可能ですし、スケールの縮小、拡大。回転数などなど、ValueToを使いこなせば便利かもしれないですね。

主なプロパティ

timeアニメーションを動作させる時間(秒)
delayアニメーションを動作させるまでの遅延時間(秒)
loopTypeアニメーションをループさせるか
“none”, “loop”, “pingPong”
easeTypeアニメーションに抑揚をつける
onstartアニメーションが始まる前に呼ばれるメソッド
onstarttargetonstartメソッドが定義のあったgameObject
onstartparamsonstartメソッドに渡すパラメーター(引数)
onupdateアニメーションの動作中に呼ばれるメソッド
onupdatetargetonupdateメソッドが定義のあったgameObject
onupdateparamsonupdateメソッドに渡すパラメーター(引数)
oncompleteアニメーションが完了した後に呼ばれるメソッド
oncompletetargetoncompleteメソッドが定義のあったgameObject
oncompleteparamsoncompleteメソッドに渡すパラメーター(引数)

iTweenのEaseTypeについて

EaseTypeはアニメーションに抑揚をつけるためにあります。ほとんどのアニメーションは一定ではないので抑揚をつけることでより滑らかでリアルな演出ができます。

Hashtable hash = new Hashtable();
hash.Add ("easeType", "easeInOutBack");

どんなEaseTypeがあるのかはこちらをご覧にいただけると分かりやすいでしょう。ここで実際に各EaseTypeがどのようなアニメーションになるかは確認できるので、これだ!と思ったモノを使えばいいでしょう。

実際にiTweenのサンプルを見てみよう

まとめ

iTweenの概要と使い方(一部)をご紹介させていただきました。C#スクリプトだけでアニメーションができることは一番の魅力でしょう。
ご紹介した内容をもう一度おさらいしましょう

  • オブジェクトの移動はMove系のメソッド
  • オブジェクトの回転はRotate系のメソッド
  • オブジェクトの振動はShake系のメソッド
  • オブジェクトの拡大・縮小はScale系のメソッド
  • ValueToはある値からある値へ変化させるためのメソッド
  • EaseTypeはアニメーションに抑揚をつけるため
  • iTweenの詳細は公式ドキュメントを覗こう

コメント

タイトルとURLをコピーしました