謎の歩行生物(仮)【PART32】~ボタンのUIをアニメーションさせる~

LINEで送る
Pocket

001

前回のまとめでも書きましたが、今後の予定としてまず「死亡(リトライ)の演出」に着手しようと思います。ただ、そのための準備をいくつか行ったので今回はその話。

細々としたことを色々やりましたが、特にボタンのUIをアニメーションさせるための設定について書こうと思います。

目次

ボタンの画像を変更する

まず今までずっとデフォルトのボタンの画像を使っていたので、その画像を差し替えます。

インスペクタービューでボタンのコンポーネントを見ると「Image(Script)」というのがあります。これの「Source Image」を変更することでボタンの画像を変えることができます。

003

ひとまずこんな画像を用意して画像を変えました。

004

ちなみにこの画像はパワーポイントの図形を組み合わせて3分位で作った超簡単なものです。今後またしっかり作り直そうと思っています。

 

アニメーションするよう設定する

画像を変えたら、今度はボタンを押した時や、プレイヤーが死んでボタンの入力を効かなくした時にアニメーションするよう設定していきます。

002

画像の時と同じようにボタンのコンポーネントにある「Button(Script)」からまず①「Transition」を「Animation」に変えます。

その後②「Auto Generate Animation」のボタンを押すとAnimatorControllerを作成します。プロジェクトファイルの好きな場所に作成してください。

005

プロジェクトビューを見てみると、このように作られました。

006

アニメータービューを見てみると、このような感じになっています。

007

それぞれのステータスの意味は以下の通りです。

Normal…何もしていない状態

Highlighted…カーソルがボタンの上にある時。スマホの場合はあんまり関係ないかも。

Pressed…ボタンを押している状態

Disable…ボタンが使用できない状態(Interactableのチェックが外れている状態)

 

※アニメータービューがない時はWindowからビューを表示させます。

008

 

あとはアニメーションビューから、各状態ごとにアニメーションを設定します。

①ビューの左上から状態を選択できます。

011

②「Add Property」ボタンを押してアニメーションさせたい項目を追加します。

012

③こんな感じで項目ごとに設定を変えることができます。

009

上の例ならボタンを押した時にスケールをちょっと小さくして、色を暗くした感じになります。

010

ビューの下にある「Curves」でアニメーションをカーブさせることもできます。アニメーションのタイミングを増やしたい時は右クリックでメニューを出して「Add Key」でタイミングのキーを増やすこともできます。

013

スクショでは伝わりづらいですが、右のボタンが押されている状態だとこんな感じになっています。

 

準備完了

ひとまずボタンをアニメーションさせる準備ができました。死亡演出時には「Disable」でボタンが使用できなくなった時のアニメーションが必要だったので、そのための準備でした。

あとアニメーションとは関係ないところで、ステージの床の配置を変えたり、カメラの動きや位置を修正したり、エフェクトやSEの判定を修正したりと細々とした部分も手を加えています。

次回は死亡演出の作業に入っていこうと思います。

 

スポンサーリンク

スポンサーリンク

LINEで送る
Pocket