iTweenはValueToさえ使えればOK!【Unityでのアニメーション】

この記事は CAMPHOR- Advent Calendar 2016 12日目の記事です。
こんにちは。@shiba6v です。今回はUnityでアニメーションを行うためのAssetであるiTweenの楽な使い方について紹介します。


手っ取り早くアニメーションを見たい方はこちらへどうぞ

iTweenを使うと、Animtorを作ったりコルーチンを書くよりも手軽にアニメーションを実装できます。早速AssetStoreからインポートしましょう。

iTweenのリファレンスはこちらですが、MoveTo, ColorTo, FadeTo, ScaleToなどたくさんのメソッドがあって、使いたいメソッドを探すのは正直しんどいです・・・

しかし、ValueToというメソッドを使えばそれらのメソッドを全て代用できます。今回はValueToを使って、見やすく簡単にアニメーションを書きます。

色をアニメーションで変えたい(ColorToの代用)

色をアニメーションで変えるためのメソッドであるColorToをあえて使わずにアニメーションを行ってみます。クリックするとボタンの色が変わるようにします。

Hashtableにアニメーションの情報を入れて、iTween.ValueToの第二引数に入れているのがポイントです。第一引数がgameObjectなのは、this.gameObjectに対してアニメーションをつけるよ、という意味です。OnClickButtonはpublicにしないと外から呼び出せないので、気をつけて下さい。

Unity標準のアニメーションよりも見やすいですね。Unityの操作がよくわかっている人は細かい部分を飛ばしてもらって大丈夫です。

 

Projectタブの中で右クリックから、ButtonAnimationというスクリプトを作成して、上のコードをコピペしましょう。

Hierarchyタブで右クリックをして押すためのボタンを作りましょう。

標準でボタンを押すと色が変わるので、今回は見やすくするためにその機能を切りましょう。ButtonのTransitionをNoneにすればOKです。

 

先ほど作ったButtonAnimationのスクリプトをドラッグ&ドロップでButton(ゲームオブジェクト)のInspectorにアタッチします。

Button(ゲームオブジェクト)のButton(コンポーネント)のOnClick()と書いてある部分の右下の+ボタンを押して、Button(ゲームオブジェクト)をObjectの部分にアタッチします。

ドロップダウンリストからOnClickButton()を選びましょう。

ボタンを押すとボタンが黒ずみます笑

 

透明度(アルファチャンネル)をアニメーションで変えたい(FadeToの代用)

先ほどと同様のことをこのスクリプトで行うとボタンが透明になります。
UnityのAnimationとは違ってスクリプトで全部書けるのは自由に書けて嬉しいですね。

簡単に透明度をアニメーションさせることができます。

複雑なアニメーションをやりたい

iTweenを使えば、Animationでやるのは気が進まないような複雑な仕組みのアニメーションを簡単に作れます。

OnClickButtonが呼ばれたら、スタート時にStartButtonAnimationを呼び、onupdateで_camphorのOnUpdateButtonで位置をアニメーションさせます。StartButtonAnimationでは、onupdateでImageとTextの透明度を上げて、完了時にオブジェクトをdisableしています。

非常に良い感じに仕上がっていますね!この雰囲気だとCAMPHOR-のゲームが始まりそうです。こういった複雑なアニメーションを入れてもAnimatorとスクリプトを行ったり来たりしなくていいのはとても嬉しいですね。しかもHashtableにアニメーションのパラメーターを全部書いているので読みやすく、パラメーターの調整がしやすいです。

Hahstableに入れられるkey

iTweenで使えるパラメーターを紹介します。Hashtableにこれらを入れると自由にアニメーションさせることができます。

from, to

OnUpdateの引数で変化させる値の始点と終点を決めます。
float, double, Vector3, Vector2, Color, Rect の型が入ります。

と書くと値を0から1に変化させます。

time

どれくらいの時間で変化させるかを決めます。
大きいほどゆっくり変化します。

と書くと2秒の間で変化させます。
float型とdouble型が使えます。

speed

timeの逆数です。
大きいほど素早く変化します。

delay

アニメーションが始まるまでの時間
3.0fと書くと、3秒後にアニメーションが始まります。

easetype

値の変化のさせ方を決めます。

こちらのページで、気に入ったeasetypeを見つけましょう。

looptype

ループのさせ方を決めます。loopは終わったら始めに戻り、pingpongは終わったら終わりから始めに戻ってループします。

onstart

アニメーション開始時に呼ばれるメソッドです。

onstarttarget

onstartで呼ばれるメソッドを持っているオブジェクトです。Imageなどのコンポーネントではなくて、.gameObjetをつけてそのGameObjectを指定するのがコツです。

onstartparams

onstartで呼ばれるメソッドに渡す引数です。

onupdate

アニメーション開始時に呼ばれるメソッドです。

onupdatetarget

onupdateで呼ばれるメソッドを持っているオブジェクトです。

onupdateparams

onupdateで呼ばれるメソッドに渡す引数ですが、onupdateで呼ばれるメソッドは第一引数にfromからtoの値が入り、第二引数に入れられるわけでもないので存在意義がよくわかりません・・・

oncomplete

アニメーション開始時に呼ばれるメソッドです。

oncompletetarget

oncompleteで呼ばれるメソッドを持っているオブジェクトです。

oncompleteparams

oncompleteで呼ばれるメソッドに渡す引数です。

 

iTweenでのアニメーションに困ったらValueToをぜひ使ってみてくださいね!

CAMPHOR- Advent Calendar 2016  明日の担当は andoshin11 です。お楽しみに!


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です