【Unity入門⑧】敵に触れたらダメージ！体力UIを作ってみよう

Unity入門

前回の記事で、敵を動かす処理を作りました。
今回はそこから一歩進んで、プレイヤーが敵に触れたら体力が減る仕組みを作ってみましょう👾

さらに、体力UI（HPバー）を画面に表示して、減っていく演出も追加します！

👇画像のように、左上に赤いHPバーを作成していきます

完成イメージ

  • 画面左上にHPバーが表示される
  • プレイヤーが敵に触れるとHPバーが減る
  • HPが0になったらプレイヤーが倒れる（次回以降で追加予定）

① 体力UI（HPバー）の準備

左上にHPバーの画像を配置していきます！

  1. UIキャンバスを作成
    • Hierarchy → 右クリック → UI > Canvas
    • Canvasの設定は以下の通り
      • Render Mode：Screen Space – Overlay（そのままでOK）
  2. HPバーを作成
    • Canvasを右クリック → UI > Image
    • 名前を HPBar_Back に変更（背景）
    • もう一つ UI > Image を作り、名前を HPBar_Fill に変更（赤いゲージ部分）
    • HPBar_Fill を HPBar_Back の子にして、少し小さめに配置
  3. 色をつける
    • HPBar_Back：灰色 (#888888)
    • HPBar_Fill：赤 (#FF4444)
  4. RectTransformを調整
    • サイズ：幅200、高さ30程度
    • 位置：Pos X：150、Pos Y：-50（親の画像だけでOK）
  5. HPBar_Fill （赤のバー）の設定
    • Image > Source Image を適当なスプライトに設定
    • Image > Image Type を Filled に変更
    • Fill Method を Horizontal、Fill Origin を Left に
    • これで fillAmount の値に応じて横方向にゲージが縮むようになります✨

② プレイヤーにHP処理を追加（Player.cs）

以下のように、Player.csに体力変数とダメージ処理を追加します👇

using UnityEngine;
using UnityEngine.UI; // ← UIを扱うために追加

public class Player : MonoBehaviour
{
    [SerializeField, Header("最大HP")]
    private int _maxHP = 5;

    private int _currentHP;
    [SerializeField, Header("HPバーのImage")]
    private Image _hpBarFill;

    private void Start()
    {
        _currentHP = _maxHP;
        _UpdateHPBar();
    }

    // 敵に触れたときの処理
    private void OnCollisionEnter2D(Collision2D collision)
    {
        if (collision.gameObject.CompareTag("Enemy"))
        {
            _TakeDamage(1);
        }
    }

    // ダメージ処理
    private void _TakeDamage(int damage)
    {
        _currentHP -= damage;
        _currentHP = Mathf.Clamp(_currentHP, 0, _maxHP);

        _UpdateHPBar();

        if (_currentHP <= 0)
        {
            Debug.Log("プレイヤーが倒れました");
            // 次回以降でリスポーンなどの処理を追加予定
        }
    }

    // HPバーの見た目を更新
    private void _UpdateHPBar()
    {
        if (_hpBarFill != null)
        {
            _hpBarFill.fillAmount = (float)_currentHP / _maxHP;
        }
    }
}

③ 各処理の解説（初心者向け）

  • _maxHP / _currentHP
    → プレイヤーの体力を管理する変数です。
  • OnCollisionEnter2D()
    → 敵（Tagが「Enemy」）に触れた瞬間に呼ばれます。
  • _TakeDamage()
    → 体力を減らし、0より小さくならないように調整します。
  • _UpdateHPBar()
    → 現在のHPに応じてUIの長さ（fillAmount）を更新します。
    0〜1の範囲（割合）でHPバーを調整できます。

④ 敵オブジェクトの設定

  1. Enemy オブジェクトに Tag: Enemy を新規作成をして設定します。
  2. Rigidbody2D と Collider2D をつけて、物理的に触れられる状態にします。

👉これで、プレイヤーと敵がぶつかると OnCollisionEnter2D が発動します。

⑤ プレイヤーのInspector設定

  • _hpBarFill の欄に、Canvas上の HPBar_Fill をドラッグして割り当てます。

⑥ 動作確認

  1. プレイヤーと敵を配置してプレイ
  2. 敵に触れるとHPバーがスッと減るのを確認
  3. 体力が0になると、コンソールに「プレイヤーが倒れました」と表示

👉敵に触れたら赤いバーが減っていくようになりました！

⑦ よくあるつまずき

症状原因対処
敵に触れてもHPが減らないEnemyのTagが設定されていないEnemyのTagを「Enemy」に変更
HPバーが減らないPlayerのInspectorでHPBar_Fillを割り当て忘れCanvas内のHPBar_Fillをドラッグ
HPバーが一瞬で消える_maxHPの値が小さすぎる_maxHPを5〜10程度に調整

⑧ まとめ

  • 敵にぶつかると体力が減る仕組みを追加
  • HPバーをUIとして表示して、減少を視覚化
  • 体力が0になると「倒れた状態」にできるよう準備

👉 次の記事では、体力が0になったときにゲームオーバー演出を出す処理を追加していきます！

コメント

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