HPバーの色を残量の増減で変化させる

HPが満タンの時はHPバーの色は緑色で、攻撃を受けてHPが徐々に減っていくとそれと連動してHPバーを赤色に変化させます。

UnityのColor

HPバーの色を変化させるにはHPバーに使用しているImageの色設定をプログラムで操作します。 操作するのは図1,2のところ。図1の赤く囲っている部分を押すと図2のようなウィンドウが開きます。

図1 unityのimageのcolor場所

図2 colorパレット

Imageの色はRGBで変更できるので最初は(R,G,B)=(0,255,0)[緑色]にして、徐々に黄色に変化させる場合はRの数値を0→255に変化させます。また黄色から赤色に変化させる場合は(R,G,B)=(255,255,0)→(255,0,0)に変化させます。イメージとしては図3のような感じです。

図3 色変化のイメージ

コードと解説

実装したいものは次の通りです。

1. HPが100%から50%までは緑色から黄色に色が変化する。
2. HPが50%から0%にかけて黄色から赤色に色が変化する。

実際に実装したのが次のコードです。(変数の宣言とかは省略しています)

MapValues関数

この関数はRGBの数値をどの値まで移動するか計算するのに使用しています。また色だけではなくHPバーの移動にも利用しています。

HandleHealth関数

実際にHPの増減の表現と色の変化を操作している関数。currentHealth(現在のHP値)が更新されるたびにこの関数が実行されて、HPバーの残量と色を変化させる。

実装結果

実装して動かすと次のような動きとなります。

参考

今回このプログラムを作成するに当たり、参考にしたのが次の動画です。MapValues関数の詳しい内容なども解説しています。全編英語ですが、図形を使って説明しているので図形を見れば話を聞かなくても内容がわかると思います。