UnityでVampire　survivers 風のゲームを作ろう！第5回HPバーの表示

今回はScriptableObjectで設定した最大HPに対して現在のHPがどのくらい残っているのかを表示するためのUIを作っていきます。

PlayerHp

UIのSlliderをHPバーに見立てて実装していきます。
プレイヤーキャラの真下に表示して移動したときも着いていくようにしたいので、プレイヤーキャラの子要素に設定します。

ヒエラルキー上のPlayerにマウスオーバーした状態で右クリック、Create>UI>Slliderを作成します。
追加すると同時にCanvasが出てきます。
CanvasのRenderModeをWorld Spaceに変えます。
この変更によって主人公の動きに追従してくれるようになります。

Slliderを右クリック>Renameで”HPbar”に名前を変更します。
Handle Slide Areaという部分は不要なので右クリック>Deleteで削除してしまいます。

BackgroundのImageの中のcolorを黒に変更します。
これが減少している数値を表します。
Fill Areaの子要素のFillを開いてImageの中のcolorを緑色に設定しましょう。
これが現在のHPを表します。

HPbarのInspectorのRect Transformを変更していきます。
Pos X 20 PosY-160
Width 200 Height 30にします。

FillAreaのLegt Rightを0に設定します。

ScriptsフォルダにCreate>C#Scriptで”PlayerHP”を作成します。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;//UIを使用する際は宣言が必要

public class PlayerHP : MonoBehaviour
{
    [SerializeField] StatusData statusdata;
    public Slider hpSlider;
    float HP;
    // Start is called before the first frame update
    void Start()
    {
        if (hpBar != null)
        {
            hpBar.maxValue= statusdata.MAXHP;
            hpBar.value = statusdata.MAXHP;
        }
        HP = statusdata.MAXHP;
    }
}

PlayerHPのスクリプトをPlayerにアタッチしましょう。
AddComponentからPlayerHPを検索し、追加してください。
PlayerHPのStatusDataにはPlayerStatusを、hpSliderには”HPbar”をドラッグ＆ドロップでアサインしてください。

次はPlayerが向きを変えた時に、HPバーも反転するようにします。
ScriptsフォルダにHPbarControllerを作成します。

public class HPbarController : MonoBehaviour
{
    [SerializeField]
    private RectTransform canvasRectTfm;
    [SerializeField]
    private Transform targetTfm;
    private RectTransform myRectTfm;
    private Vector3 offset = new Vector3(0, -0.2f,0);
    Vector2 pos;
    public Vector2 worldAngle;
    Vector3 def;
    Vector3 _parent;
    Vector3 before;
    // Start is called before the first frame update
    void Start()
    {
        myRectTfm = GetComponent<RectTransform>();
        def = transform.localRotation.eulerAngles;
        
    }

    // Update is called once per frame
    void Update()
    {

        _parent = transform.parent.transform.localRotation.eulerAngles;
        if (before != _parent)
        {
            transform.localRotation = Quaternion.Euler(def - _parent);
        }
        before = transform.localRotation.eulerAngles;
    }
}

CanvasにHPbarControllerのスクリプトをドラッグ＆ドロップします。
Canvas　Rect　TfmにCanvas
Target TfmにPlayerをアサインします。

これでHPバーの実装ができました。
hpBar.value = statusdata.MAXHP;を
hpBar.value = 20;
のように別の数字書き換えた後、HPバーの緑の部分が減少しているか確認してみてください。

今回は、プレイヤーの攻撃が敵に当たった場合相手にダメージを与えてノックバックさせるという処理を実装します。