ふりかえり
前回はステージ制を導入し、バトルに目標を持たせました。
前回の投稿はこちら↓
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が減るたびにハラハラ感や緊張感が増し、バトルがさらに楽しくなります！
次回予告
次回は、スライム以外の新しいモンスターを追加していきます！
敵の種類が増えると、戦略やバリエーションも広がってきます！
お楽しみに！
コメント