Unityで敵キャラクターのHPを頭上に表示するUIを作成

今回は敵キャラクターのHPを頭上に表示し、キャラクターと一緒に移動するUIを作成します。

どの程度のHPが残っているかわかりやすいので、アクションゲームではちょくちょく見かける機能です。

敵にHP用のUIを設定すると、

↑のような感じで敵の頭上にHPバーを表示する事が出来ます。

HPバーは常にカメラの方を向いて表示されてますね。

スポンサーリンク

HP表示用UIの作成

HP表示用のUIを作成していきます。

まずは敵キャラの子要素にCanvasを作成し、名前をHPUIとします。

その子要素にUI→Sliderを選択し、名前をHPBarとします。

HPBarの子要素のHandle Slide Areaはマウスドラッグで値を変更する時に使用しますが、HP用のバー操作は行わないので削除します。

HP表示用UIの階層

階層は↑のようになります。

次にHPUIを選択し、キャンバスを敵の頭上に表示するようにします。

HP用キャンバスの設定

CanvasのRender ModeをWorld Spaceに変更し、普通のゲームオブジェクトと同じように移動できるようにします。

Rect TransformでScaleの値を調整し、WidthとHeightのサイズの調整をして敵の頭上に丁度良い大きさにします。

HPBarを選択します。

Directionでスライダーのメーターの方向を指定出来ます。

MaxValueを1、Whole Numbersにチェックを入れると数値が整数で変更されます。

HP用スライダーの設定

次にBackgroundを選択します。

Backgroundはスライダーの背景です。

HP表示用Backgroundの設定

Source ImageをNoneにして背景画像を四角形にします。

次にFill Areaを選択します。

HP表示用の値の枠の設定

Fill Areaはスライダーの値が設定される範囲の背景ですが、初期値だとBackgroundと合わないので↑のように調整します。

次はFillを選択します。

HP表示用のパラメータImageの設定

Fillはスライダーの値によって幅を変えるImage画像を設定しますが、Source ImageをNoneにしてBackgroundと合わせます。

また値の部分は赤くしたい為、Colorの色を変更します。

FillにWidthやleftなどRectTransformの値が入っていると、スライダーの値が最小値や最大値でもメーター表示が最後まで行かないので、0を設定しておきます。

メーターの領域を表示したくない場合はSliderの子要素のBackgroundのColorのAlphaを0に設定します。

敵のHPを頭上に表示した画像

上のようになりました。

赤色部分が値が満たされている部分です。

HP表示用UIの角度を常にカメラの向きにするスクリプトの作成

UIは2D表示で厚みを持っていない為、敵キャラクターが動くとUIも傾き敵キャラが横向きになった時には、カメラからみるUIは完全にペラペラで見えなくなります。

その為、UIは常にカメラの方を向くよう調整する必要があります。

HPUIゲームオブジェクトに新しくHPUIRotateScriptスクリプトを作成し取り付けます。

HUUIの角度にメインカメラの角度を設定しています。

敵のステータススクリプトEnemyStatusを修正する

敵のHP表示用のUIが出来たので敵がダメージを受けた時にUIのテキストを更新するようにします。

敵のステータス管理スクリプトであるEnemyStatusに追記します。

HPバーはSliderの値を変更して表示するので、敵のMaxHPと現在のHPから0~1の割合を計算してスライダーの値に設定する必要があります。

敵のmaxHpフィールドを作成し、現在のhpはスタート時にmaxHpを設定します。

インスペクタでHPUIゲームオブジェクトを設定し、そこから子要素のHPBarゲームオブジェクトのSliderコンポーネントを取得します。

敵がダメージを受けた時はEnemyStatusのSetHpメソッドが呼ばれるのでその時UpdateHPValueメソッドを呼び出してHPBarのスライダーの値を更新しています。

スライダーの値は0~1の範囲で設定するようにしたので、現在のHP / 最大HP を設定します。

HPが0以下になったらHideStatusUIメソッドを呼び出してHPUIゲームオブジェクトを非アクティブにしています。

バレット9

上のように完成しました。

スポンサーリンク

記事をシェアして頂ける方はこちら

フォローして頂くとやる気が出ます