UnityでHPゲージを実装 | UIバーと体力管理

攻撃は当たっているのに、体力がどれだけ残っているか分からない——そんな状態では、戦闘の緊張感が生まれません。

HPゲージは、プレイヤーと敵の両方に使えるUIの基本です。
数値だけでなく画面上のバーで見せることで、ダメージのフィードバックが一気に分かりやすくなります。

この記事では、UnityのUI Sliderを使ったHPゲージ実装を、080の攻撃処理と接続する形で整理します。

HP管理の基本設計

体力は、次の2つの変数で管理します。

• maxHP … 最大体力（初期値・ゲージの上限）
• currentHP … 現在体力（ダメージで減る）

ゲージの表示割合は currentHP / maxHP です。
0〜1の範囲にClampし、マイナス表示や100%超えを防ぎます。

項目	役割	設定の要点
Healthコンポーネント	HP数値の保持とダメージ処理	TakeDamage、Heal、死亡判定を1か所にまとめる
HealthBarUI	Sliderの見た目を更新	Healthの変更イベントを受け取りSlider.valueを更新
Slider（UI）	画面上のバー表示	Min 0、Max 1。 Fill Areaの色で視認性を確保

Healthコンポーネントの実装

プレイヤーにも敵にも使える汎用スクリプトを作ります。

using System;
using UnityEngine;

public class Health : MonoBehaviour
{
  public int maxHP = 100;
  public int currentHP;
  public event Action<float> OnHealthChanged;

  void Start
  {
    currentHP = maxHP;
    OnHealthChanged?.Invoke((float)currentHP / maxHP);
  }

  public void TakeDamage(int amount)
  {
    currentHP = Mathf.Max(0, currentHP - amount);
    OnHealthChanged?.Invoke((float)currentHP / maxHP);
    if (currentHP <= 0) Die;
  }

  void Die
  {
  }
}

OnHealthChangedイベントでUIと数値を分離すると、080の攻撃からTakeDamageを呼ぶだけでゲージが連動します。

UI SliderでHPバーを表示

Canvas内にSliderを配置し、HealthBarUIスクリプトでHealthと接続します。

using UnityEngine;
using UnityEngine.UI;

public class HealthBarUI : MonoBehaviour
{
  public Health targetHealth;
  public Slider slider;

  void OnEnable
  {
    targetHealth.OnHealthChanged += UpdateBar;
    UpdateBar((float)targetHealth.currentHP / targetHealth.maxHP);
  }

  void OnDisable => targetHealth.OnHealthChanged -= UpdateBar;

  void UpdateBar(float ratio) => slider.value = ratio;
}

敵の頭上にHPバーを出す場合は、World Space Canvasを敵の子に置き、カメラの方を向く（Billboard）処理を足すと見やすくなります。
プレイヤー用はScreen Space Overlayの画面端に固定するのが定番です。

Imageでゲージを作る方法

Sliderの代わりに、UI ImageのfillAmountを使う方法もあります。
Image Typeを「Filled」にし、Fill MethodをHorizontalに設定。
ratioをimage.fillAmountに渡すだけでバーが縮みます。

080攻撃との接続

080で作った攻撃ヒットボックスは、敵のHealth.TakeDamageを呼び出すよう変更します。

void OnTriggerEnter2D(Collider2D other)
{
  var health = other.GetComponent<Health>;
  if (health != null) health.TakeDamage(damage);
}

これで「攻撃が当たる → HPが減る → ゲージが縮む」の流れが完成します。
敵のDie内でDestroy(gameObject)を呼べば、撃破演出も足せます。

プレイヤーと敵でUIを分ける

プレイヤーのHPバーは画面左上など固定位置に、敵のHPバーは頭上のWorld Space Canvasに置くのが一般的です。
同じHealthBarUIスクリプトを使い、targetHealthの参照先だけ変えれば両方に対応できます。

敵が複数いる場合、各敵の子に小さなSliderを持たせるか、ダメージを受けた敵だけ一時的にバーを表示する方式を選びます。
初心者は敵1体から始め、撃破の達成感を先に味わうのがおすすめです。

ダメージ時の演出を足す

ゲージが動くだけでも十分ですが、次の演出を足すと戦闘感が増します。

• ダメージ時にバーを一瞬赤くする（Image.colorの変更）
• 数値テキスト（TextMeshPro）で currentHP / maxHP を表示
• 無敵時間（i-frames）を設け、連続ダメージを防ぐ

無敵時間は、TakeDamageの先頭でフラグを確認し、ダメージ後0.5秒は受け付けない実装が多いです。
横スクロールアクションでは、敵に触れ続けると即死するのを防ぐ効果があります。

つまずきやすいポイント

HPゲージでよくある問題は次のとおりです。

• ゲージが動かない → HealthBarUIのtargetHealth参照が未設定
• 敵のバーが画面外 → World Space Canvasの位置・スケールを調整
• Sliderが逆に減る → Min/Maxが0と1になっているか確認

EventSystemがシーンにないとUIが反応しません。
Canvasを作ると自動追加されますが、手動でUIを並べた場合はHierarchyにEventSystemがあるか確認してください。

TextMeshProを導入しているプロジェクトでは、Legacy Textの代わりにTMP_TextでHP数値を表示すると、拡大しても文字がきれいに見えます。
Package ManagerからTextMeshProをインポートし、初回のフォント設定ウィザードを完了させてから使いましょう。

まとめ

UnityのHPゲージは、Healthコンポーネントで数値管理 → SliderまたはImageで表示 → 080攻撃のTakeDamageと接続、この流れで実装できます。
プレイヤーと敵で同じHealthクラスを使えば、コードの重複も防げます。

戦闘ループが動いたら、敵の配置やステージギミックを足していきましょう。
移動からUIまで一気通貫で学びたい方は、Unity入門の森の2Dアクション講座も、攻撃・HP・ステージ完成まで追える教材として参考になります。
今日はダメージを受けるとゲージが減るところまで進めてみてください。