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

記事内に広告が含まれています。

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

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

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

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

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

今回の機能は以前から作成している機能に処理を追加していますので、この機能は何?と思ったら以下の記事で流れを確認してみてください。

Unityを使った3Dゲームの作り方(かめくめ)の歩き方
Unityを使った3Dゲームの作り方(かめくめ)で、はじめてUnityの学習をする時の当ブログの記事を読む順番を書きました。機能を積み上げていく形になるので便利かも?
スポンサーリンク

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

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

タイトルとURLをコピーしました