敵の頭上にHPゲージを表示する - i-school

敵の頭上にHPゲージを表示するための設計を考える

　敵について、最後の設計項目なりました。

・敵のHPは敵の頭上に横ゲージ表示し、現在値がグラフィカルに伝えられるようにデザインする。
・ゲージは右端がHP最大、左端がHP最小とする。
・ゲージは敵と一緒に移動する。

　プレイヤーが攻撃して敵にダメージを与えた際に、そのままでは敵のHPがどの位残っているのかわかりません。
残っているHPがわからないと、ユーザーが敵を倒す際の優先順位を考えたりできませんので、敵の残りHPがわかるようにHPを表示するように設計を考えましょう。
ただし数字だけよりも、ゲージであった方が残りHPが伝わりやすくなりますので、敵の頭上にHPのゲージ（HpBar）を表示するように考えていきましょう。

　また表示したHpBarは敵と一緒に移動してもらいたいので、そのためにはどうすればよいか、考えます。
武器の時と同じで、敵の子オブジェクトとしてHpBarを追加してあげれば一緒に追従して動いてくれそうです。
またUIにはSliderという部品があり、こちらをBar表示としてそのまま使えます。こちらを使うように設計しましょう。

敵の子オブジェクトにCanvasとSliderを追加する

https://gyazo.com/c834c0a34912a4b08254ab5af29f55e3

　敵のゲームオブジェクトを選択し、子オブジェクトとしてCanvasを新しく作成して追加しましょう。
そのCanvasの子としてUI部品であるSliderを追加します。このSliderをHpBarとして利用します。
ヒエラルキー上は下記の画像のようになっていれば大丈夫です。

Sliderの設定を変更する

　Sliderの子要素であるHandle Slide Areaは、マウスドラッグで値を変更する時に使用するものです。
今回は使用しませんので、ヒエラルキーで選択して削除しておきます。

　Sliderの子要素のRectTransformを確認していき、Fll AreaとFillをResetし、すべての値を0にします。
こうすることにより、Sliderの一番端の位置からBarが動くようになります。
(以前入っていた数字はHandleを利用する際の数字ですので、ここで0にしても問題ありません。)

　　FillのImageコンポーネントのColorを変更することによって、HpBarの動くゲージの色を変更できます。
赤などのわかりやすい色に変更しておきましょう。

Fill Area

Fill

BackGround

Slider-1

Slider-2

Canvasの設定を変更し、ゲーム画面内に表示できるようにする

　通常Canvasはゲーム画面の手前に表示される設定になっていますが、そのままですと表示している位置と敵の位置とが調整できません。

　そこで、Canvasの設定を変更し、ゲーム画面内にCanvasを移動させられるようにします。
Canvasのインスペクターの中からCanvasコンポーネントを確認し、その中のRenderModeをWorldSpaceに変更しましょう。
そしてRectTransformの右上の歯車ボタンをクリックし、Resetをします。
これで敵の位置にCanvasが移動しました。あとはPosition.Yの位置とScale、Width、Heightの各値を調整し、上手く敵の頭上にHpBarが来るようにします。

　またCanvasのままですとわかりにくようであれば、名称をHpBarInfoのように、自分でわかりやすい名前に変更しておきましょう。

HPBarのUIを常にカメラの正面を向くようにする

　今のままだと、敵が横を向いた際に、HpBarも横方向を向いてしまうため見えなくなってしまいます。
UIは２Ｄとして設定していますのでカメラの正面を常に向いていてくれれば、この問題は解消できそうです。

　新しいスクリプトを作成し、名前をHpBarInfoにします。完成したら敵の子オブジェクトのCanvasにアタッチします。

<= ＋ボタンを押すと開きますので、自分なりの実装を行った上で確認をしてみましょう。

using UnityEngine;

public class HpBarInfo : MonoBehaviour
{
    void LateUpdate() {
        // HpBar用Canvasの向きを常にカメラの方向に向ける
　　　　LookHpBarToCamera();
    }
   
    private void LookHpBarToCamera(){
         transform.rotation = Camera.main.transform.rotation;
    }
}

敵のHPとHpバーをリンクさせるための設計を考える

　無事にHpBarを表示することができました。ですがこのままでは、前回の索敵範囲と同様に処理が独立しまっており、
敵のHPが減少してもHpBarが一緒に減少しません。HpBarと敵のHPとをリンクさせて、攻撃を受けてHPが減少したら、HpBarも動くようにしましょう。

　設計を考えてみます。敵のHPの情報をHpBarに送ることが出来れば、ちゃんと情報がリンクでき、HpBarが動くように出来そうですね。
やり方としては、EnemyControlerクラスにてHpBarの処理をするのか、あるいは先ほど作ったHpBarクラスで処理を行うようにするのか、
どちらの方法でも対応できると思います。

　ここではHpBarInfoクラスにてHpBarの処理を行う方法を実装していきます。
まずはHpBarInfpクラスを修正していきます。

<= ＋ボタンを押すと開きますので、自分なりの実装を行った上で確認をしてみましょう。

using UnityEngine;
using UnityEngine.UI;

public class HpBarInfo : MonoBehaviour
{
    public Slider sliderHp;

    void Start() {
        // HpBarのゲージ(value)を最大値にする
        sliderHp.value = 1.0f;
    }

    void LateUpdate() {
        // HpBar用Canvasの向きを常にカメラの方向に向ける
        LookHpBarToCamera();      
    }

    /// <summary>
    /// HpBar用Canvasの向きを常にカメラの方向に向ける
    /// </summary>
    private void LookHpBarToCamera() {
        transform.rotation = Camera.main.transform.rotation;
    }

    /// <summary>
    /// 敵のHPの現在値とHpbarのvalueを同期させる
    /// </summary>
    public void UpdatedHpBarValue(int hp, int maxHp) {
        sliderHp.value = (float)hp / (float)maxHp;
    }

    /// <summary>
    /// 敵が倒された時にHpBarを隠す
    /// </summary>
    public void HideHpBar() {
        gameObject.SetActive(false);
    }
}

　つづいてEnemyControlerクラスも修正します。こちらからHpBarInfoクラスに作成したメソッドを呼び出して、HpとHpbarとの同期を行います。
またHpが0になった場合にはHpBarを非表示にする処理も追加しておきます。

　下記のスクリプトはEnemyControlerクラスを抜粋したです。OnTriggerEnterメソッドの該当部分に追加します。

<= ＋ボタンを押すと開きますので、自分なりの実装を行った上で確認をしてみましょう。

        // HPからdamage分だけ減算
        hp -= damage;
        Debug.Log("残りHP : " + hp);

        // HpbarをHPの値と同期
        hpBarInfo.UpdatedHpBarValue(hp, maxHp);    // 追加

        // 残りHPの確認
        if (hp <= 0) {
            Debug.Log("破壊した");

            // HpBarを隠す
            hpBarInfo.HideHpBar();                 // 追加

            // オブジェクトの破壊時の処理
            DestroyObject();
        }

サンプル動画
https://gyazo.com/8776f4467c0a1db7e77ac7c42950b3c9

　それでは実際に動かしてみましょう。プレイヤーの攻撃を受けた際に、敵のHpBarが減少すれば処理は成功です。
敵が倒れたアニメ処理を追加する場合には、破壊されるまで時間がかかりますので、その前にHpBarを非表示にする処理を追加しましょう。