コインゲームの電飾表示的なものを作りたくて今日も悪戦苦闘
できたものは下記の通り
右側の5つあるボタンのようなものを、点灯⇒点滅⇒点灯という感じでアニメーションさせている
今日はこれをどうやって作ったかを書き残しておく
◆手順
①アニメーションの作成 Animation
②アニメーションの切り替えフローの作成 Animator
➂スクリプトでのアニメーションの切り替え
◆用意したもの
・UI Image
・消灯用のグレーのスプライト
・点灯用の色のついたスプライト
◆アニメーションの作成 Animation
UIのImageにAnimationを割り当てる
下記のメニューをクリックするとTimelineが表示されるので、真ん中のCreateボタンを押してアニメーションを作成
【消灯アニメーション】
Add PropertyからSpriteを選択すると、割り付けられているSpriteが自動で配置される
今回は表示が固定なので最初の位置のみにキーフレームを設定
【点灯アニメーション】
消灯と同じ要領で、グレーのSpriteが表示された状態で、プロジェクトのフォルダから色付きのSpriteをドラック&ドロップ
いらないグレーのSpriteのキーフレームは削除して、最初の位置にキーフレームを設定
【点滅アニメーション】
同じ要領で今度は色あり、色なし、色ありの順にキーフレームを配置
作成したアニメーションはプロジェクトウインドウの中に作成される
②アニメーションの切り替えフローの作成 Animator
アニメーションの切り替えフロー制御用のAnimatorを作成
作成すると、作成したオブジェクトのインスペクター上にAnimatorが追加され、Controllerの箇所に割り付けられているものが表示される
Animatorウインドウを開いて、①で作成したアニメーションをドラック&ドロップで配置
右クリックししてMake Transitionにて矢印をつないでいき、切り替えの流れを作成する
どのような条件で切り替えを行うかを設定する
・左上のParametersを押してプラスボタンを押して、切り替えの条件に使う変数を設定
・フローの矢印をクリックして、インスペクター上のConditionsに参照する変数と条件を設定する
下記の例の場合はこんな感じ
・変数 int型 名前はStatus
・切り替えの条件はStatusが2に等しくなった場合
➂スクリプトでのアニメーションの切り替え
やっていることは
・UI ImageのAnimatorを取得
・SetInteger関数を使用して、Status変数にint型の値を設定
今回の場合は、5個表示があり、上から順に点滅を開始し、常に一番下のみ点滅させたいので、消灯⇒点滅、その下のものを点滅させたらその上は点灯に切り替えているので、ややややこしくなっているが、やっていることは大したことはない
だいぶ適当な感じだが、覚書なので、あしからず
今日は以上
