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

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

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

まずは敵キャラの子要素にCanvasを作成し、CanvasのRender ModeをWorld Spaceに変更します。
そうすることで普通のゲームオブジェクトと同じように移動する事が出来ます。

敵HP1


上のようにScale値を調整して敵キャラクタの頭上に小さく表示されるよう調整します。
PosやWidth、Heightの操作は行わない方がいいです。
OperationCanvasスクリプトは後で作成します。

敵HP2

Canvasの子要素にUIのPanelを作成しAnchorsをstretch stretchにし色のAlphaを0にします。

Panelの子要素にUIのSliderを追加します。
Sliderのハンドル部分(ドラッグできるやつ)は使わないのでHandle Slide Areaは削除します。

敵HP3

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

MaxValueを100、Whole Numbersにチェックを入れると数値が整数で変更されます。
HPはパーセンテージで表示するよう作るのでMaxValueは100にしています。

Fill Areaの子要素のFillのColorを赤色に設定します。
ゲージの領域を表示したくない場合はSliderの子要素のBackgroundのColorのAlphaを0に設定します。

敵HP4

上のようになりました。
赤色部分が値が満たされている部分です。

スポンサーリンク

HP表示用UIの角度を常にカメラの向きにする

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

その為、UIは常にカメラの方を向くよう調整する必要があります。
これを調整するスクリプトOperationCanvasを作成しましょう。

public変数でカメラの指定を出来るようにしUIを向けるカメラを指定します。
Camera.mainでMainCameraタグが設定されているカメラを取得出来ます。

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

敵が死んだ時のUIに関する処理を追加

また敵キャラが死んだと判定された場合は即座にHPのメーターを消したいので、このスクリプトが設定されているCanvasをSetActiveでfalseにし見えなくします。

敵キャラクター操作スクリプトMoveEnemy内で死んだと判定された時に実行する関数Deadを修正します。

OperationCanvasを取得しDisable関数を呼び出して、HPのスライダーを非アクティブにします。

次にSliderに敵キャラクターのHPを設定するスクリプトSetHpを作ります。

UI.Sliderを取得します。

hpSlider.valueに値を設定するとスライドバーが変化します。
hpSlider.maxValueを指定することでスライドが最大値になります。

Update関数では敵キャラクターのステータスを取得し、HPのパーセンテージを計算し、スライドバーの値に入れています。

バレット9

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