テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

【Unity】uGUIでスプライトアニメーションするには

uGUIでスプライトアニメーションを行う方法についてです。
難しい事は全くないのですが、気づかないと分からないかもしれないので、一応ここに書いておきます。

下のGIFはキャラクターアニメーションをuGUIで行って居るので影付けたりアウトライン付けたり、キャラの位置を画面端とか置いたり、そういったことが簡単に出来ます

f:id:tsubaki_t1:20160128005841g:plain

uGUIでスプライトアニメーション

uGUIでスプライトアニメーションを行う場合、SpriteRendererのアニメーションと同じような感じでスプライトをアニメーションに登録すればOKです。
ただしuGUIのImageとSpriteRendererでは若干手順が異なります。

f:id:tsubaki_t1:20160128002313j:plain

uGUIのスプライトアニメーションを作るには、まずはAnimationClipを作成します。Animationウィンドウを(メニューバー>WIndow>Animation、もしくはCtrl+6)で開き、Createボタンもしくは[Create New Clip...]でアニメーションを作ります。

f:id:tsubaki_t1:20160128003008j:plain

あとは登録したいスプライトを選択して、Animationウィンドウへドラッグ&ドロップします。複数選択すれば普通のアニメーションのように逐次登録、個別にドラッグ&ドロップすればドロップしたフレームにアニメーションが登録されます。

f:id:tsubaki_t1:20160128003443j:plain

アニメーションの制御

アニメーションの制御ですが、Animator(mecanim)で制御します。*1 とはいえ、2DやUIの制御にFSM制御を利用するのは概ねナンセンスなので、出来るだけそういった物を使わない形で制御します。

まずはAnimationControllerを作り、アニメーションの制御構造を作ります。今回は制御など殆ど不要なので、こんな感じです。

AnimationControllerの中にアニメーション作るのは、UnityのAnimatorControllerにAnimationClipを内蔵する -を使います。

f:id:tsubaki_t1:20160128235058j:plain

基本的にアニメーションはIdleしていて、必要になったらPositive/Negativeへのステートへ強制的に移動、終わったらEntryからIdleに戻る感じです。

f:id:tsubaki_t1:20160128234603j:plain

制御するコードはこんな感じです。ステート移動は毎回文字列作ってると無駄な事この上ないので、staticでアクセス用のハッシュ値作っちゃいます。
またアニメーションはAnimator.Playで直接ステートを切り替えてます。遷移図作の面倒だし。

gist.github.com

Animationのイベントとボタンを紐づけて、ボタンを押したときにアニメーションするように設定します。
わざわざスクリプト経由で呼ばなくともAnimator.Play("State")で直でボタンからアニメーション遷移出来ますが、デバッグ時に面倒そうなので、スクリプトかまします。こっちの方が場合によっては処理待ちとか出来ますし。

f:id:tsubaki_t1:20160128235505j:plain

最後にAnimationOverrideControllerを作成して、先ほど作ったアニメーションを登録、それをAnimatorに登録します。
こうしておけば他のキャラクターのパターンが必要になった時に差し替えやすくて便利です。1キャラ1パターンならAnimationControllerに直でアニメーション登録しちゃってもOKだと思います。

f:id:tsubaki_t1:20160128235859j:plain

関連

tsubakit1.hateblo.jp

tsubakit1.hateblo.jp

 
 

*1:Animation使えたら誰もが幸せになるのですが…