パハットノート

※当サイトではGoogleアドセンス広告を利用しています

Unity DOTween HPバーの作成



目的

  • ゲームにおけるHPバーは100から0に一気に変化するのではなく徐々に変化していきます。
  • この「徐々に変化させるアニメーション」はコルーチンを上手く利用すればアセットなしでも実現できますが、「Dotween」を利用すればより簡単なプログラムになります。
  • 最終的にはこんな感じのHPバーを作成していきます。

作りたいもの




使用するDotweenの関数

DOTween.To

  • この関数により「変数を指定した時間にわたって徐々に変化させる」ということが可能になります。
  • これによりHPバーを徐々に変化させていきます。
  • 詳しい使い方はこちらの記事を参考にしてください。

Unity DOTween.To - パハットノート


SetEase

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



OnUpdate

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




スクリプト

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));
    }
}



また、関数Attackedを呼び出すためのスクリプトも用意します。

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だと設定が面倒なのでそちらは利用していない)。
  • 文字の大きさなどを適当に設定したら次の様になります。

テキストの追加

先ほどのスライダーを合わせると「Canvas」内がこのようになります。
テキスト追加後の構成


スクリプトのアタッチと設定

任意のゲームオブジェクトに先ほどの2つのスクリプトをアタッチして次のように設定をします。
スクリプトの設定




実行例

実行すると次のようになります。
実行結果