19歩目　HPバーを実装！　Unityで1日1ステップ！ノンフィールドRPG開発日記

1日1歩開発日記

ふりかえり

前回はステージ制を導入し、バトルに目標を持たせました。

HPバーの実装

これまでは数値でしかHPが表示されていなかったため、

プレイヤーもモンスターも視覚的にわかりやすいHPバーを実装していきます！

PlayerUIManagerの変更

  • スライダー（Slider）でHPバーを表示
  • 残りHPに応じてグラデーションで色が変化
  • 数値のHPも表示（例：72 / 100）
  • HPが変動したときはDOTweenでなめらかにアニメーション
using UnityEngine;
using UnityEngine.UI; // UIコンポーネントを使用するために追加
using TMPro;
using DG.Tweening;

public class PlayerUIManager : MonoBehaviour
{
    public PlayerManager playerManager;
    public EnemyManager enemyManager;
    public BattleManager battleManager;
    public TextMeshProUGUI nameText;
    public TextMeshProUGUI hpText;
    public TextMeshProUGUI levelText;
    public TextMeshProUGUI expText;
    public TextMeshProUGUI goldText;
    public Image playerImage; // プレイヤーの画像を表示するためのImageコンポーネント

    [Header("HP Bar UI")]
    public Slider playerHPBar; // プレイヤーのHPバー
    public Image playerHPBarFill; // HPバーのフィル部分
    public Gradient playerHPBarGradient; // HPバーのグラデーション
    public TextMeshProUGUI playerHPBarText; // HPバーのテキスト

    [Header("HP Bar Settings")]
    public float hpBarAnimationDuration = 0.3f; // HPバーのアニメーション時間

    void Update()
    {
        UpdateUI();
    }

    public void UpdateUI()
    {
        if (playerManager == null) return;

        nameText.text = playerManager.player.name;
        hpText.text = "HP: " + playerManager.player.currentHP + "/" + playerManager.player.maxHP;
        levelText.text = "Lv: " + playerManager.player.level;
        expText.text = "EXP: " + playerManager.player.exp;
        goldText.text = "G: " + playerManager.player.gold;
        
        // HPバーの更新
        UpdateHPBar();
    }

    // HPバーの更新
    private void UpdateHPBar()
    {
        if (playerManager == null || playerHPBar == null) return;

        float targetHP = (float)playerManager.player.currentHP / playerManager.player.maxHP;
        
        // HPバーをアニメーション付きで更新
        DOTween.To(() => playerHPBar.value, x => playerHPBar.value = x, targetHP, hpBarAnimationDuration)
            .SetEase(Ease.OutQuad);

        // グラデーションの適用
        if (playerHPBarFill != null && playerHPBarGradient != null)
        {
            playerHPBarFill.color = playerHPBarGradient.Evaluate(targetHP);
        }

        // HPバーのテキスト更新
        if (playerHPBarText != null)
        {
            playerHPBarText.text = $"{playerManager.player.currentHP}/{playerManager.player.maxHP}";
        }
    }

    public void OnAttackButtonClicked()
    {
        if (battleManager != null)
        {
            battleManager.PlayerAttack();
        }
        else
        {
            Debug.LogError("BattleManager is not assigned.");
        }
    }

    // HPバーの初期化
    public void InitializeHPBar()
    {
        if (playerHPBar != null)
        {
            playerHPBar.minValue = 0f;
            playerHPBar.maxValue = 1f;
            playerHPBar.value = 1f;
        }
    }

    // HPバーの色を設定
    public void SetHPBarColor(Color color)
    {
        if (playerHPBarFill != null)
        {
            playerHPBarFill.color = color;
        }
    }

    // HPバーのグラデーションを設定
    public void SetHPBarGradient(Gradient gradient)
    {
        playerHPBarGradient = gradient;
        UpdateHPBar();
    }
}

EnemyUIManagerの変更

  • プレイヤーと同様にスライダー＆グラデーション対応
  • ForceUpdateHPBar()で手動更新も可能（デバッグ用）
using UnityEngine;
using UnityEngine.UI; // UIコンポーネントを使用するために追加
using TMPro;
using DG.Tweening;

public class EnemyUIManager : MonoBehaviour
{
    public EnemyManager enemyManager;
    public TextMeshProUGUI nameText;
    public TextMeshProUGUI hpText;
    public TextMeshProUGUI levelText;
    public Image enemyImage; // 敵の画像を表示するためのImageコンポーネント

    [Header("HP Bar UI")]
    public Slider enemyHPBar; // 敵のHPバー
    public Image enemyHPBarFill; // HPバーのフィル部分
    public Gradient enemyHPBarGradient; // HPバーのグラデーション
    public TextMeshProUGUI enemyHPBarText; // HPバーのテキスト

    [Header("HP Bar Settings")]
    public float hpBarAnimationDuration = 0.3f; // HPバーのアニメーション時間

    void Update()
    {
        UpdateUI();
    }

    void UpdateUI()
    {
        if (enemyManager == null) return;

        nameText.text = enemyManager.enemy.name;
        hpText.text = "HP: " + enemyManager.enemy.currentHP + "/" + enemyManager.enemy.maxHP;
        levelText.text = "Lv: " + enemyManager.enemy.level;

        // HPバーの更新
        UpdateHPBar();
    }

    // HPバーの更新
    private void UpdateHPBar()
    {
        if (enemyManager == null || enemyHPBar == null) return;

        float targetHP = (float)enemyManager.enemy.currentHP / enemyManager.enemy.maxHP;
        
        // HPバーをアニメーション付きで更新
        DOTween.To(() => enemyHPBar.value, x => enemyHPBar.value = x, targetHP, hpBarAnimationDuration)
            .SetEase(Ease.OutQuad);

        // グラデーションの適用
        if (enemyHPBarFill != null && enemyHPBarGradient != null)
        {
            enemyHPBarFill.color = enemyHPBarGradient.Evaluate(targetHP);
        }

        // HPバーのテキスト更新
        if (enemyHPBarText != null)
        {
            enemyHPBarText.text = $"{enemyManager.enemy.currentHP}/{enemyManager.enemy.maxHP}";
        }
    }

    // HPバーの初期化
    public void InitializeHPBar()
    {
        if (enemyHPBar != null)
        {
            enemyHPBar.minValue = 0f;
            enemyHPBar.maxValue = 1f;
            enemyHPBar.value = 1f;
        }
    }

    // HPバーの色を設定
    public void SetHPBarColor(Color color)
    {
        if (enemyHPBarFill != null)
        {
            enemyHPBarFill.color = color;
        }
    }

    // HPバーのグラデーションを設定
    public void SetHPBarGradient(Gradient gradient)
    {
        enemyHPBarGradient = gradient;
        UpdateHPBar();
    }

    // 強制的にHPバーを更新（デバッグ用）
    public void ForceUpdateHPBar()
    {
        UpdateHPBar();
    }
}

PlayerManagerとEnemyManagerの変更

  • TakeDamage()などのHPが変化する関数の中で playerUIManager.UpdateUI(); や enemyUIManager.UpdateUI(); を呼び出して、HPバーを即座に反映
// HPバーを強制更新
        if (playerUIManager != null)
        {
            playerUIManager.UpdateUI();
        }

Unityでの設定

1. UIの用意 　Canvas内にSlider、Text、Imageを配置（プレイヤー＆敵それぞれ）

2. スクリプトとの接続 　PlayerUIManager と EnemyUIManager の Inspector にそれぞれ対応するUIパーツをアタッチ

3. グラデーション設定 　Sliderの Fill に適用するGradientを設定し、 　HP残量によって色が変化するように調整（例：緑→黄→赤）

動作確認！

ゲームを開始して戦闘してみると…

  • スライムを攻撃すると、HPバーがアニメーションしながら減少
  • 残りHPが少なくなるとバーの色が赤に変化
  • 数値とバーが連動して、戦況が一目でわかる

というように、バトルが直感的で分かりやすくなりました！

まとめ

今回は、プレイヤーとモンスターのHPバーを実装しました！

バーの色が変わることで、

HPが減るたびにハラハラ感や緊張感が増し、バトルがさらに楽しくなります！

次回予告

次回は、スライム以外の新しいモンスターを追加していきます！

敵の種類が増えると、戦略やバリエーションも広がってきます！

お楽しみに！

コメント

タイトルとURLをコピーしました