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用のバー操作は行わないので削除します。

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

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

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

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

HPBarを選択します。

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

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

次にBackgroundを選択します。

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

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

次にFill Areaを選択します。

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

次はFillを選択します。

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

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

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

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

上のようになりました。

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

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

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

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

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


using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class HPUIRotateScript : MonoBehaviour
{
    void LateUpdate() {
        //　カメラと同じ向きに設定
        transform.rotation = Camera.main.transform.rotation;
    }
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

public class HPUIRotateScript : MonoBehaviour

{

void LateUpdate() {

//　カメラと同じ向きに設定

transform.rotation = Camera.main.transform.rotation;

}

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

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

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

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

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


using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class EnemyStatus : MonoBehaviour {

    //　敵のMaxHP
    [SerializeField]
    private int maxHp = 100;
    //　敵のHP
    [SerializeField]
    private int hp;
    //　敵の攻撃力
    [SerializeField]
    private int attackPower = 1;
    private Enemy enemy;
    //　HP表示用UI
    [SerializeField]
    private GameObject HPUI;
    //　HP表示用スライダー
    private Slider hpSlider;


    void Start() {
        enemy = GetComponent<Enemy>();
        hp = maxHp;
        hpSlider = HPUI.transform.Find("HPBar").GetComponent<Slider>();
        hpSlider.value = 1f;
    }

    public void SetHp(int hp) {
        this.hp = hp;

        //　HP表示用UIのアップデート
        UpdateHPValue();

        if (hp <= 0) {
            //　HP表示用UIを非表示にする
            HideStatusUI();
        }
    }

    public int GetHp() {
        return hp;
    }

    public int GetMaxHp() {
        return maxHp;
    }

    //　死んだらHPUIを非表示にする
    public void HideStatusUI() {
        HPUI.SetActive(false);
    }

    public void UpdateHPValue() {
        hpSlider.value = (float)GetHp() / (float)GetMaxHp();
    }

}

using UnityEngine;

using System.Collections;

using UnityEngine.UI;

public class EnemyStatus : MonoBehaviour {

//　敵のMaxHP

[SerializeField]

private int maxHp = 100;

//　敵のHP

[SerializeField]

private int hp;

//　敵の攻撃力

[SerializeField]

private int attackPower = 1;

private Enemy enemy;

//　HP表示用UI

[SerializeField]

private GameObject HPUI;

//　HP表示用スライダー

private Slider hpSlider;

void Start() {

enemy = GetComponent<Enemy>();

hp = maxHp;

hpSlider = HPUI.transform.Find("HPBar").GetComponent<Slider>();

hpSlider.value = 1f;

}

public void SetHp(int hp) {

this.hp = hp;

//　HP表示用UIのアップデート

UpdateHPValue();

if (hp <= 0) {

//　HP表示用UIを非表示にする

HideStatusUI();

}

public int GetHp() {

return hp;

}

public int GetMaxHp() {

return maxHp;

}

//　死んだらHPUIを非表示にする

public void HideStatusUI() {

HPUI.SetActive(false);

}

public void UpdateHPValue() {

hpSlider.value = (float)GetHp() / (float)GetMaxHp();

}

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

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

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

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

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

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