nora fullstack engineer

NFE ado3s blog

【Unity】iTween触ってみた

前に書いたSNS認証周りの時のプロジェクトにiTweenが入ってたので、触ってみたー

iTweenとは

iTweenPixel Placementってとこが作ってるアセット。
アニメーションがとても楽に実装できまっせーっていう代物!
大体のさせたいアニメーションのメソッドがあるので、実装するのがとても楽!!
設定値をこっちで適宜変更してあげるだけなので、使い方わかったらとても簡単で感動しマウス。

今回の概要

まー今回2Dなんですが、画面遷移時にアニメーションで画面遷移させたいってことで、使いました。
コンテンツも少なかったので1SceneでベースのCanvasを置いて、
その子要素に複数Canvasを作って子要素の各Canvasをアニメーションで入れ替えるって感じ。

ex:)
MainView(Canvas) -> DetailView(Canvas)でiTween.MoveToする感じ

Unityにいれよう

UnityAssetStoreからiTweenをインポートしませう。
ザ・これだけ!!wwめっちゃ楽!
基本的にnamespaceないし、staticなんで、どこでもiTween.○○で使えちゃうよー。

動きの種類

移動、回転、拡縮、色、音とかもうホントにいろいろある。
とにかく、いっぱいある。。ホントにそんなにあっても使わんがな!ってくらい。
ちょっとめんどいので、こちらを参照してくださいー。
ちなみにEaseTypeの参考はここがめっちゃわかりやすくてステキでしたー。

ザ・実装

実装といってもただ設定値を設定するだけなので、実装ってほどでもないけど、
今回自分が実装した雰囲気を書いてみようかしら。
あくまでこんな感じって程度だけど。
一番上の今回の概要を見てから見てね。

とりあえず、今回はiTweenのアニメーションは1種類しか使ってないので、
メソッドを後で改修とかやりやすくするためViewUtilみたいなファイルにメソッドを書いた。
んで、画面側Scriptからそのメソッドを呼び出すって感じ。

// ViewUtil.cs

public class ViewUtil
{
    // 画面遷移
    public static void ChangeView(
        GameObject gObj, Transform parent, string prefabPath, string method)
    {
        var position = new Vector3(-2000f, 0);
        var view = GameObject.Instantiate(
            Resources.Load(prefabPath)
            , position
            , Quaternion.identity) as GameObject;

        view.transform.SetParent(parent, false);

        iTween.MoveTo(view, iTween.Hash(
            "x", 0,
            "y", 0,
            "easeType", "easeOutExpo",
            "delay", .1,
            "oncomplete", method,
            "oncompletetarget", gObj));
    }

    // 画面遷移後
    public static void ChangeViewComplete(GameObject gObj)
    {
        GameObject.Destroy(gObj);
    }
}

とりあえず上記の感じでメソッドを作っておく。

一応説明すると遷移先Canvasをx=-2000fでInstantiateして、
iTween.MoveToでx=0まで移動させるってことでござる。
(今回横画面でござる)

Scene上に複数Canvasを出しておきたくないので、
遷移先CanvasをInstantiateして、iTweenで移動させる。
んで、遷移先Canvasが移動完了後(アニメーション終了後)に、
遷移前CanvasをDestroyする。
↓Hierarchy上での感じ

1.Base
   MainView
↓
2.Base
   DetailView
   MainView
↓
3.Base
   DetailView

んで、呼び出し元が、

// MainView.cs

public class MainView : MonoBehaviour
{

    void Start ()
    {
        var btn = transform.FindChild("DetailButton").GetComponent<Button>();
        btn.onClick.AddListener(ChangeView);
    }

    // 画面遷移
    private void ChangeView()
    {
        ViewUtil.ChangeView(
            gameObject
            , transform.root
            , "Prefabs/DetailView"
            , "MoveComplete");
    }

    // 画面遷移完了後
    private void MoveComplete()
    {
        ViewUtil.ChangeViewComplete(gameObject);
    }

}

呼び出し元はこんな感じでござる。
これでいろんなとこで画面遷移するときはこれ書けばおkなので、楽ですね!
ViewUtilみたいな感じでメソッド書いておけば後々幸せになります。

ハマったとこ

今回はハマるとこがホントになくてとても簡単に実装できましたー!!
とにかく簡単で、楽させてもらいました!楽な割に実装したら喜んでもらえたので、
こいつは今後もちょいちょいお付き合いさせてもらおうかと思っておりマウスww

いやー、iTweenとても楽で良いですねー。便利ですね!!

また何か思いつき次第、書きマウス
ちゅーちゅー