Unityで簡単な体力ゲージの作成

体力ゲージの作成について、ざっくりとメモです

まず、「体力ゲージの色は赤」「体力が減る時は単純に赤いゲージが一瞬で下がる」「回復した時に回復量の分が緑色に光り、その部分までゆっくりと赤ゲージが昇っていく演出」という仕様で考えます。


体力ゲージを完全に満たした赤ゲージの画像と、緑に満たした回復ゲージの画像を用意し、体力ゲージと同じ座標に赤ゲージが上、緑が下に重なるようにしたImageを2つ配置します。

InspectorでImageのImage TypeをFilledにし、FillMethodをVerticalにします。これでFill Amountの値を増減する事で体力ゲージの増減を表現できるようになりました。

スクリプト側で、以下のように実装します。
体力が減った時：
赤ゲージと緑ゲージのFill Amountを同時に同じ分だけ減らす

体力が増えた時：
増える前の体力を別に保存しておき、現在の体力値を回復させます。
緑ゲージのFill Amountを 回復後の体力値/満タンの体力値 にします。
コルーチンで数秒かけて赤ゲージのFill Amountを (現在の体力値 – 回復前の体力値)/アニメーションフレーム数 のペースで上昇させます。これで回復量に関係なく一定の時間で回復エフェクトが完了します。
同時に回復SEを鳴らします。必要ならキラキラしたエフェクトも追加します。

こんな感じで実装しました。
格闘ゲームなどでよくある「ダメージ量が先に示されて体力ゲージが後から減っていくパターン」もこれと同じ要領で実装出来ると思います。