Unity研究所<Unityによるゲーム開発、映像開発>

Unity初心者40代後半中年中間管理職おやじが綴るゲームで小遣い稼ぎできるようになるまでのブログ

Unity 小ネタ アニメーションの切り替え 点灯、点滅

コインゲームの電飾表示的なものを作りたくて今日も悪戦苦闘

 

できたものは下記の通り

右側の5つあるボタンのようなものを、点灯⇒点滅⇒点灯という感じでアニメーションさせている

今日はこれをどうやって作ったかを書き残しておく

 

f:id:Harukichi:20210418225344g:plain

 

◆手順

①アニメーションの作成 Animation

②アニメーションの切り替えフローの作成 Animator

スクリプトでのアニメーションの切り替え

 

◆用意したもの

・UI Image

・消灯用のグレーのスプライト

・点灯用の色のついたスプライト

 

◆アニメーションの作成 Animation

UIのImageにAnimationを割り当てる

下記のメニューをクリックするとTimelineが表示されるので、真ん中のCreateボタンを押してアニメーションを作成

 

f:id:Harukichi:20210418230607p:plain

 

【消灯アニメーション】

Add PropertyからSpriteを選択すると、割り付けられているSpriteが自動で配置される

今回は表示が固定なので最初の位置のみにキーフレームを設定

f:id:Harukichi:20210418230003p:plain

 

【点灯アニメーション】

消灯と同じ要領で、グレーのSpriteが表示された状態で、プロジェクトのフォルダから色付きのSpriteをドラック&ドロップ

いらないグレーのSpriteのキーフレームは削除して、最初の位置にキーフレームを設定

f:id:Harukichi:20210418231209p:plain

 

【点滅アニメーション】

同じ要領で今度は色あり、色なし、色ありの順にキーフレームを配置

f:id:Harukichi:20210418231323p:plain

 

作成したアニメーションはプロジェクトウインドウの中に作成される

f:id:Harukichi:20210418232047p:plain

 

②アニメーションの切り替えフローの作成 Animator

アニメーションの切り替えフロー制御用のAnimatorを作成

 

f:id:Harukichi:20210418231454p:plain

 

作成すると、作成したオブジェクトのインスペクター上にAnimatorが追加され、Controllerの箇所に割り付けられているものが表示される

f:id:Harukichi:20210418232225p:plain

 

Animatorウインドウを開いて、①で作成したアニメーションをドラック&ドロップで配置

右クリックししてMake Transitionにて矢印をつないでいき、切り替えの流れを作成する

f:id:Harukichi:20210418232527p:plain

 

どのような条件で切り替えを行うかを設定する

・左上のParametersを押してプラスボタンを押して、切り替えの条件に使う変数を設定

・フローの矢印をクリックして、インスペクター上のConditionsに参照する変数と条件を設定する

 

下記の例の場合はこんな感じ

・変数 int型 名前はStatus

・切り替えの条件はStatusが2に等しくなった場合

f:id:Harukichi:20210418232905p:plain


スクリプトでのアニメーションの切り替え

やっていることは

・UI ImageのAnimatorを取得

・SetInteger関数を使用して、Status変数にint型の値を設定

 

f:id:Harukichi:20210418233442p:plain

 

今回の場合は、5個表示があり、上から順に点滅を開始し、常に一番下のみ点滅させたいので、消灯⇒点滅、その下のものを点滅させたらその上は点灯に切り替えているので、ややややこしくなっているが、やっていることは大したことはない

 

 

だいぶ適当な感じだが、覚書なので、あしからず

 

今日は以上