Unity DOTween HPバーの作成 - パープルハット

目的
使用する関数など
ソースコード
- HPバー管理用クラス(HPBar)
- HPBarを呼び出すためのクラス
準備
実行例

目的

ゲームにおけるHPバーは100から0に一気に変化するのではなく徐々に変化していきます。
この「徐々に変化させるアニメーション」はコルーチンを上手く利用すればアセットなしでも実現できますが、「DOTween」を利用すればより簡単なプログラムになります。
「DOTweenって何なの?」って方などはこちらのQiitaの記事様を参考に導入してみてください⇒Unity DOTween 入門 #dotween - Qiita
最終的にはこんな感じのHPバーを作成していきます。

作りたいもの

使用する関数など

DOTween.To

この関数により「変数を指定した時間にわたって徐々に変化させる」ということが可能になります。
これによりHPバーを徐々に変化させていきます。
詳しい使い方はこちら(宣伝)：Unity DOTween.To - パープルハット

SetEase

DOTweenにおける変化の仕方(二次関数的、直線など)を指定することができます。
今回は直線に変化させるので、Ease.Linearを引数に設定しました。

OnUpdate

DOTweenで変化させている間に毎フレームごとに呼び出す関数をラムダ式で定義します。

ソースコード

HPバー管理用クラス(HPBar)

using System.Collections;
using UnityEngine;
using DG.Tweening;
using UnityEngine.UI;

public class HPBar : MonoBehaviour
{
    //UI
    [SerializeField] Text text;
    [SerializeField] Slider slider;
    [SerializeField] Image sliderFill;

    //アニメーションの時間
    [SerializeField] float animTime;

    //HPの最大値
    [SerializeField] int maxHP;

    //HPは0～最大値の間
    int hp;
    int HP 
    {
        get => hp;
        set => hp = Mathf.Clamp(value, 0, maxHP);
    }

    void Start()
    {
        //HPを最大値にする
        HP = maxHP;

        //UIの更新
        UpdateUI(HP);
    }

    //UI(スライダーとテキスト)
    void UpdateUI(float animHP)
    {
        //UIを変更
        text.text = $"{(int)animHP}/{maxHP}";
        slider.value = animHP / maxHP;

        //残りHPに応じてスライダーの色を変更
        if (slider.value < 0.25f)
        {
            sliderFill.color = Color.red;
        }
        else if (slider.value < 0.5f)
        {
            sliderFill.color = Color.yellow;
        }
        else
        {
            sliderFill.color = Color.green;
        } 
    }

    public IEnumerator Attacked(int damage)
    {
        //ダメージを与える前のHPを取得
        float animHP = HP;

        //ダメージを与えた後のHPを計算
        HP -= damage;

        //HPを目的の値まで動かす
        yield return DOTween.To(() => animHP, (x) => animHP = x, HP, animTime)
            .SetEase(Ease.Linear)
            .OnUpdate(()=>UpdateUI(animHP));
    }
}

HPBarを呼び出すためのクラス

using UnityEngine;

public class Enemy : MonoBehaviour
{
    [SerializeField] HPBar playerHPBar;
    [SerializeField] int damage;

    void Update()
    {
        //キーボードの「K」を押したら開始
        if (Input.GetKeyDown(KeyCode.K))
        {
            StartCoroutine(playerHPBar.Attacked(damage));
        }
    }
}

準備

HPバー

HPバーはスライダーで表現します。
開いているシーン上で右クリック⇒「UI」⇒「Slider」によりスライダーを生成します。
スライダーを生成したら下の図のような構成になっていますが、次のように設定をします。

スライダーの構成

オブジェクト名	操作
Slider	valueを0.4ぐらいにしておく
Handle Slide Area	チェックボックスを外して非アクティブ化 or 削除
Background	「Image」の「Color」を好きな色にする(本記事ではグレー) Sliderのvalueを0.4ぐらいにして色が変更されているか確認
Fill Area	「Rect Transform」の「Left」と「Right」を0にする
Fill	「Rect Transform」の「Width」を0にする

設定をして適当に大きさを設定したら次のようになります。
設定後のスライダー

テキスト

HPバーだけでなく文字でも体力を表現します。
開いているシーン上で右クリック⇒「UI」⇒「Legacy」⇒「Text」によりテキストを生成します(Unityが古いバージョンだと違うかもしれない。また、TextMesh Proだと設定が面倒なのでそちらは利用していない)。
文字の大きさなどを適当に設定したら次の様になります。

テキストの追加