iTweenのFrom系メソッドを使ったアニメーション - 原カバンは鞄のお店ではありません。

イベント盛り

　インディゲーム界隈ではGW前後に色々とイベントがあったようで、先週は京都でBitsummitが開催されていました。私も出展しなくとも顔を出して最新のゲーム事情を偵察し、あわよくば開発者の方々とお話をしてデベロッパーとしての輪を広げたい、などと思っていたのですが、なにせ今月は自動車税という重税をしのがないといけなかったので参加を断念しました。

　まぁ、元来からの人見知りで初対面の人に声を掛けることはもちろん、自分の携帯にでさえ「OK! Goggle.」なんて言えない小心者なので、たとえ顔を出したとしてもブースの脇に立っている開発者の方を遠巻きに眺めながら、展示しているゲームを一度も触ることなく、そそくさと会場を後にすることになったと思います。

　あ、でもゲーム開発者としては一度はそういうイベントに参加してみたいな、という願望はあります。財源と勇気さえあれば。自動車税高すぎだし。

閑話休題

　さて、UnityでTweenアニメーションを実装する方法は色々あるんですが、私の場合、前回の記事でも取り上げたようにUI系の動作にはiTweenを使用しています。

　これはDotweenにはないFrom系のメソッドが便利なためで、動作をHashで指定しなくてはいけない面倒を背負ってもFrom系は便利なものに感じています。

　例えば、CutieCircuitのタイトル画面

f:id:Karvan:20180515233916g:plain

これも文字のスライドインにiTweenのMoveFromを使っています。

なぜ便利なのか

　このMoveFromがどういうメソッドなのか、というと

オブジェクトを指定した座標から現在の座標へ移動する

というもの、現在位置から一旦移動して戻ってくる動作になるので、Unity上で調整した位置から動かさなくても済む、というのが最大の利点になります。
ちなみにiTweenの移動系メソッドとしては他にMoveTo(現在位置から指定位置へ)、MoveBy(現在位置からの相対位置を指定して移動)があります。

　説明だけではあまりピンとこないかもしれませんが実際にゲームを作りこんでいくと、この動作仕様は大変ありがたい。

　通常、ボタンやラベルなどのUIは一度表示されるとその位置から動くことは余りありませんが、表示させる際にちょっとしたアニメーションをつけたい場合、このMoveFromを使うと作りこんだゲーム画面(UIの位置)を変更せずにアニメーションが作れちゃう。

　例えば、この文字表示とか、

f:id:Karvan:20180515234422j:plain

Unity上ではテキストオブジェクトをマスクの範囲に設定しておいて

f:id:Karvan:20180515234726j:plain

以下のようにコードを設定すると、文字がスライドインして表示される動作になります。

        // "Hint"文言のスライドイン
        Hashtable moveToParam = new Hashtable();
        moveToParam.Add("y", 55.0f);
        moveToParam.Add("islocal", true);
        moveToParam.Add("time", 0.5f);
        moveToParam.Add("easeType", iTween.EaseType.easeInBounce);
        iTween.MoveFrom(SignMessageTitleObj, moveToParam);

        // ヒントのスライドイン
        Hashtable moveToParam2 = new Hashtable();
        moveToParam2.Add("y", 108.0f);
        moveToParam2.Add("islocal", true);
        moveToParam2.Add("time", 0.5f);
        moveToParam2.Add("delay", 0.1f);
        moveToParam2.Add("easeType", iTween.EaseType.easeInBounce);
        moveToParam2.Add("oncomplete", "OutTweenComp");
        moveToParam2.Add("oncompletetarget", gameObject);
        iTween.MoveFrom(SignMessageWordObj, moveToParam2);

f:id:Karvan:20180508234317g:plain

これをMoveToなどで実装しようとすると、UIの位置を移動元の位置へ移動させておく必要があるので、後で画面のデザイン変更とかする際に、UIの位置を一旦全部元に戻してデザイン変更→再度、移動元の位置へ移動させる、とか結構不便。

UIにはFrom系

　別に固執しているわけではありませんが、ボタンやラベルとかのUIについては最終的な状態(位置や大きさ)が決まっているのでアニメーションにはFrom系のメソッドを使ったほうが実装しやすいと思います。
　
　今回はMoveFromを取り上げましたがiTweenには他にScaleFromやFadeFromなどのメソッドがあります。ScaleFromは使ったアニメはこんな感じ

f:id:Karvan:20180516000150g:plain