くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

UnityでiTweenを使って簡単アニメーション

[PR] ★目指せ!絶対RGB感!★ シンプルな色当てゲーム「色博士(いろはかせ)」をリリースしました!

久々に新作をリリースしました!!(色博士(いろはかせ) - Google Play)
かわいい博士が主役のシンプルな色当てゲーム!全465色でボリュームたっぷり♪デザイナーだけでなく、色遊びが好きな方はぜひ!

色博士を作っているときに、前から使いたかったiTweenを使ってみたので、その時の備忘録。

iTweenのインストー

iTweenはAsset Storeからインストールできる。

iTween for Unity by Bob Berkebile (pixelplacement)にも詳しく書いてあるので、参照しながら~

iTweenを使ってみる

使い方はとても簡単で、基本は以下のような感じ。

iTween.<用意されているアニメーション>(<対象のオブジェクト,
    iTween.Hash(
      <パラメタのKey>, <パラメタのValue>
    );
);

<用意されているアニメーション>はたくさんあって、以下の様なのある。

  • iTween.MoveTo … 指定の場所まで移動
  • iTween.ScaleTo … 指定のスケールに変更
  • iTween.RotateTo … 指定の角度まで回転

<パラメタのKey><パラメタのValue>は、アニメーションによって変わるので、要ドキュメント参照

実際に使ったものをいくつか。

例:MoveTo(指定の場所まで移動)

iTween.MoveTo(gameObject, 
    iTween.Hash(
        "x", 100,       // Xが100まで移動
        "time", 1,      // アニメーションの時間は1秒
        "islocal", true // localPositionで計算
    )
);

uGUIとかだと"islocal", trueでないと、変な感じになる。

例:終了時になにかする

public class AnimSample: MonoBehaviour {
    public void StartAnim() {
        RectTransform rt = gameObject.GetComponent<RectTransform>();
        iTween.MoveTo(gameObject, 
            iTween.Hash(
                "x", 100, "time", 1, "islocal", true,
                "oncomplete", "FinishAnim",            // アニメーション終了時に実行するメソッド名
                "oncompletetarget", gameObject,        // oncompleteで呼び出すメソッドを持つオブジェクト
                "oncompleteparams", rt                 // oncompleteで呼び出すメソッドに渡す引数のオブジェクト
            )
        );
    }

    void FinishAnim(RectTransform rt) {
         // アニメーション終了時の処理
    }
}

例:ScaleTo(指定のスケールに変更)

iTween.ScaleTo(gameObject, 
    iTween.Hash(
        "x", 5  ,       // スケールのXを5に変更
        "y", 5  ,       // スケールのYを3に変更
        "time", 1,      // アニメーションの時間は1秒
    )
);

例:拡大しながら移動する

同じオブジェクトに対して、複数のアニメーションをつけたいときはXxxxAdd()系を使ってつなげる。
XxxxAdd()以外は、アニメーションの終了してから、次のアニメーションが開始するけど、
XxxxAdd()の場合は、その終了を待たず、次のアニメーショを開始する。

iTween.ScaleAdd(gameObject,
    iTween.Hash("x", 5, "y", 5, "time", s)
);
iTween.MoveTo(gameObject,
    iTween.Hash("x", 100, "y", 100, "time", 1, "islocal", true)
);

例:複数のアニメーションをつなげる

複数のアニメーションをまとめて実行したい場合は、コルーチンをつかう。

public void StartAnim {
    StartCoroutine(MultiAnimations());
}

IEnumerator MultiAnimations() {
    iTween.MoveTo(gameObject, iTween.Hash("x", 10, "time", 1, "islocal", true));
    yield return new WaitForSeconds(2);

    iTween.ScaleTo(gameObject, iTween.Hash("x", 2, "time", 1));
    yield return new WaitForSeconds(2);

    iTween.MoveTo(gameObject, iTween.Hash("x", -200, "time", 1, "islocal", true));
    yield return new WaitForSeconds(2);

    iTween.ScaleTo(gameObject, iTween.Hash("x", 1, "time", 1));
}

ここまで複雑になると、Animationを使うほうがよいかもしれないですが。。。

例:アニメーションのスピードを変える

アニメーションの変化のさせ方は、easetypeで変更できる。(はじめはたくさん変化して、最後はあまり変化しないとか)   たくさんのパターンがあるので、デモのサイトを見るのがいい感じ。

iTween.MoveTo(gameObject,
    iTween.Hash("x", 100, "y", 100, "time", 1, "islocal", true,
        "easetype", "easeInCubic"
    )
);

以上!!

参考人したサイト様

[PR] ★目指せ!絶対RGB感!★ シンプルな色当てゲーム「色博士(いろはかせ)」をリリースしました!

久々に新作をリリースしました!!(色博士(いろはかせ) - Google Play)

f:id:wannabe-jellyfish:20170521203213p:plain

かわいい博士が主役のシンプルな色当てゲーム!
全465色でボリュームたっぷり♪デザイナーだけでなく、色遊びが好きな方はぜひ!