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

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

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

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

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

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

スポンサーリンク

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の角度を常にカメラの向きにしたりHPバーの表示を変える

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

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

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

まずは敵のステータスを管理しているEnemyStatusを変更します。

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

HPStatusUIスクリプトはこの後作成しますが、SetHpメソッド内でHPを更新した時にHP表示用UIの変更をしています。

敵が死んだ時はHP表示用UIを非アクティブにするHpStatusUIスクリプトのSetDisableメソッドを呼び出します。

次にHPUIゲームオブジェクトにHP用のUIを操作するHPStatusUIスクリプトを設定します。

Startメソッドで敵の状態を管理するEnemyStatusやHP表示用のスライダーの取得と、現在のHPを0~1の間に調整する為、現在のHP / マックスHPをスライダーの値に設定します。

スタート時はGetHPメソッドでhpが取得出来ない事もあるので、GetMaxHPを使っています。

Updateメソッド内でHP用UIをカメラの方向に合わせます。

Camera.mainでMainCameraタグが設定されているカメラを取得出来ます。

transform.rotationでこのスクリプトが設定されているゲームオブジェクトの角度が取得出来るので、そこにカメラの角度を入れています。

SetDisableメソッドは敵が死んだ時に呼び出し、HP表示用UIを非表示にします。

UpdateHPValueはEnemyStatusスクリプトから呼び出し、HPを0~1の間に設定しています。

(float)を使って現在のHPをfloat型にキャストした後、float型にキャストしたMaxHPで割る事で小数点の値になります。

バレット9

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

スポンサーリンク

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

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