こんにちは！夜の街2Dアクションゲームを制作中の怪獣です🦖

Unityでゲーム制作をしていると、
「体力UIを表示させるようにしたい」
「HPを数値だけで管理すると、プレイヤーにとって分かりづらい…」
て思うことってありますよね。

そんなときは、減っていくHPバー（体力ゲージ） を表示すると一気にゲームらしくなります！

この記事では、
UnityのImageコンポーネントの「Fill」機能を使ってHPバーを作る簡単な方法 を解説します！

※当記事は、HPゲージUIを作る方法を中心で解説しています。
⬇️ダメージ処理を受ける＋HPゲージUI込みで流れで作りたい方はこちらの記事を見るとスムーズです

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

前回の記事では、敵を作る方法を解説しました👾今回はそこから一歩進んで、プレイヤーが敵に触れたら体力が減る仕組みを作ってみましょう👾さらに、体力UI（HPバー）を画面に表示して、減っていく演出も追加します！⬇️画像のように、左上に赤いHPバー...

naiterukaiju.com

2025.10.12

⬇️こちらは、ダメージ処理を判定させる方法に特化した記事です

【Unity2D】敵に触れたらダメージを受ける仕組みの作り方｜（コード全文・解説付き）

Unity2Dでアクションゲームを作っていると、敵に触れたらHPを減らしたいダメージ処理を入れたいと思うことがありますよね。この記事では、敵に触れたらプレイヤーがダメージを受ける仕組みの作り方を、初心者向けにわかりやすく解説します！今回は ...

naiterukaiju.com

2026.03.29

この記事でできること

• 画面にHPバーを表示できる
• ダメージを受けるとHPバーが減る
• Image.fillAmount を使ったUI制御が理解できる

① HPバーUIを作る

① Canvasを作成

まずはUIの土台となるCanvasを作ります。

Canvas（キャンバス）とは、一言でいうと
Unityで「UIを表示するための土台（画面）」です。

テキスト、ボタン、パネルなどの UI要素は、必ず Canvas の子オブジェクトとして配置されます。

Hierarchy → 右クリック → UI > Canvas で作成します。

② HPの枠部分のバーを作る

背景バーのベースとなる枠部分を追加します！

①で作ったCanvasを選択 → 右クリック → UI → Imageを追加します

追加したImageを選択し、以下を変更します。

• 名前：HPBar_Backに変更
• 色：黒やグレーに変更する
• サイズ：横長（例：300×30ぐらい）

③ ゲージ部分を作る（赤のバー）

②で作った背景バーに対して、子オブジェクトとしてゲージ部分を作ります！
この③で作る部分はゲージのHPが減る見た目の赤い部分を指しています。

②で作ったHPBar_Backを選択→ 右クリック → UI → Imageを追加します

親子関係にするのがポイントです💡

追加したImageを選択し、以下を変更します。

• 名前：「HPBar_Fill」に変更する
• Inspector >Image > Source Imageを適当なスプライトに設定する（Squareなど）
• Color：赤など
• Image Type：Filledに変更（画像を少しずつ消したり、伸ばしたりできる機能にする）
• Fill Method：Horizontalに変更（横に左→右（または右→左）にゲージが減るようになる）
• Fill Origin：Leftに変更（左から減る）

➡️これで「左から減るHPバー」仕組みになります！

• 背景（Back）：HPの枠
• 前面（Fill）：実際に減る部分

こうして分けることで、見た目調整がしやすくなります！

② HPを減少させるソースコード

今回はHPバーUIの動きを確認しやすいように、Spaceキーを押すとHPが減るサンプルで解説します。ダメージを受ける処理の代わりに、Spaceキーを押すたびにゲージが減少していくことが確認できます。

using UnityEngine;
using UnityEngine.UI;

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

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

    private int _currentHP;

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

    void Update()
    {
        // Spaceキーを押したらHPを1減らす
        if (UnityEngine.Input.GetKeyDown(KeyCode.Space))
        {
            _currentHP--;
            _currentHP = Mathf.Clamp(_currentHP, 0, _maxHP);
            _UpdateHPBar();
        }
    }
    
    private void _UpdateHPBar()
    {
        if (_hpBarFill == null) return;

        _hpBarFill.fillAmount = (float)_currentHP / _maxHP;
    }
}

using UnityEngine;
using UnityEngine.UI;

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

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

    private int _currentHP;

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

    void Update()
    {
        // Spaceキーを押したらHPを1減らす
        if (UnityEngine.Input.GetKeyDown(KeyCode.Space))
        {
            _currentHP--;
            _currentHP = Mathf.Clamp(_currentHP, 0, _maxHP);
            _UpdateHPBar();
        }
    }
    
    private void _UpdateHPBar()
    {
        if (_hpBarFill == null) return;

        _hpBarFill.fillAmount = (float)_currentHP / _maxHP;
    }
}

③ コードを1行ずつ解説

HPを管理する変数

[SerializeField] private int _maxHP = 5;
private int _currentHP;

[SerializeField] private int _maxHP = 5;
private int _currentHP;

_maxHP は最大HPです。
_currentHP は現在のHPです。

SerializeField を付けているので、Inspector から数値を調整することもできます。

StartでHPを初期化する

private void Start()
{
    _currentHP = _maxHP;
}

private void Start()
{
    _currentHP = _maxHP;
}

ゲーム開始時に、現在HPを最大HPと同じ値にしています。
これを入れておくことで、最初から満タンの状態でスタートできます！

HPバー更新処理

    private void _UpdateHPBar()
    {
        if (_hpBarFill == null) return;

        _hpBarFill.fillAmount = (float)_currentHP / _maxHP;
    }

    private void _UpdateHPBar()
    {
        if (_hpBarFill == null) return;

        _hpBarFill.fillAmount = (float)_currentHP / _maxHP;
    }

ここで「見た目（UI）」を更新しています。
_hpBarFill.fillAmountは赤いゲージ部分の長さとなる部分です。
現在HPからMAXHPを割って今の体力の割合を求め、_hpBarFill（赤いゲージ部分のImage）にセットしています。
こうすることで、バーの長さを少しずつ削って体力が変動するように見せています！

④ プレイヤー側にバーをセットする

Playerオブジェクトを選択し、Inspectorの「HP Bar Fill」に対して、作ったHPBar_Fillをドラッグ＆ドロップします！

これを忘れると動かないので注意です！

❌よくあるエラー

HPバーが減らない

原因：

• Image Typeが「Simple」になっている
  ➡️ 必ず「Filled」にする

NullReferenceExceptionが出る

原因：

• _hpBarFillの設定忘れの可能性大
  ➡️ ④の手順通り、Inspectorの「HP Bar Fill」に対して、作ったHPBar_Fillをドラッグ＆ドロップする

まとめ

最後まで読んでいただきありがとうございました！

今回は、ImageのFill機能を使ったHPバー（体力UI）の作り方を解説しました！

動作確認はSpaceキーで行いましたが、実際のゲームでは敵に触れたときにHPを減らす形にしています。
敵に触れたらダメージを受ける処理の仕組みは、こちらの記事で詳しく解説しているので、
合わせて実装すると「敵に触れる」→「ダメージを受ける」→「HPを減らす」という風になり、一気にゲームらしくなります👾

【Unity2D】敵に触れたらダメージを受ける仕組みの作り方｜（コード全文・解説付き）

Unity2Dでアクションゲームを作っていると、敵に触れたらHPを減らしたいダメージ処理を入れたいと思うことがありますよね。この記事では、敵に触れたらプレイヤーがダメージを受ける仕組みの作り方を、初心者向けにわかりやすく解説します！今回は ...

naiterukaiju.com

2026.03.29

前回の記事では、敵を作る方法を解説しました👾

【Unity入門⑦】2Dアクションゲームで敵を作ってみよう！

前回の記事では、プレイヤーにカメラを追従させる実装方法を解説しました。横スクロールアクションといえば「敵キャラ」👾！今回は 地面の上を左右に歩くだけのシンプルな敵 を作ってみましょう！↓実装イメージ↓(); _moveDirection =...

naiterukaiju.com

2025.10.05

今回はそこから一歩進んで、プレイヤーが敵に触れたら体力が減る仕組みを作ってみましょう👾
さらに、体力UI（HPバー）を画面に表示して、減っていく演出も追加します！

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

完成イメージ

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

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

① Canvasを作成

まずはUIの土台となるCanvasを作ります。

Canvas（キャンバス）とは、一言でいうと
Unityで「UIを表示するための土台（画面）」です。

テキスト、ボタン、パネルなどの UI要素は、必ず Canvas の子オブジェクトとして配置されます。

Hierarchy → 右クリック → UI > Canvas で作成します。

② HPの枠部分のバーを作る

背景バーのベースとなる枠部分を追加します！

①で作ったCanvasを選択 → 右クリック → UI → Imageを追加します

追加したImageを選択し、以下を変更します。

• 名前：HPBar_Backに変更
• 色：黒やグレーに変更する
• サイズ：横長（例：300×30ぐらい）

③ ゲージ部分を作る（赤のバー）

②で作った背景バーに対して、子オブジェクトとしてゲージ部分を作ります！
この③で作る部分はゲージのHPが減る見た目の赤い部分を指しています。

②で作ったHPBar_Backを選択→ 右クリック → UI → Imageを追加します
（親子関係にするのがポイントです💡）

追加したImageを選択し、以下を変更します。

• 名前：「HPBar_Fill」に変更する
• Inspector >Image > Source Imageを適当なスプライトに設定する（Squareなど）
• Color：赤など
• Image Type：Filledに変更（画像を少しずつ消したり、伸ばしたりできる機能にする）
• Fill Method：Horizontalに変更（横に左→右（または右→左）にゲージが減るようになる）
• Fill Origin：Leftに変更（左から減る）

➡️これで「左から減るHPバー」仕組みになります！

• 背景（Back）：HPの枠
• 前面（Fill）：実際に減る部分

こうして分けることで、見た目調整がしやすくなります！

② プレイヤーに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;
        }
    }
}

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

OnCollisionEnter2D()は「ぶつかったときに呼ばれる処理」です。
今回はここで敵かどうかを判定して、ダメージ処理を呼び出してHPバーの見た目を更新するようにしています。
各処理の詳しい説明は別記事で解説していますので、ご興味あればこちらを参照ください👾

【Unity2D】敵に触れたらダメージを受ける仕組みの作り方｜（コード全文・解説付き）

Unity2Dでアクションゲームを作っていると、敵に触れたらHPを減らしたいダメージ処理を入れたいと思うことがありますよね。この記事では、敵に触れたらプレイヤーがダメージを受ける仕組みの作り方を、初心者向けにわかりやすく解説します！今回は ...

naiterukaiju.com

2026.03.29

③ 敵オブジェクトの設定

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

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

④ プレイヤーのInspector設定

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

動作確認

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

まとめ

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

最後まで読んでいただきありがとうございました！

体力UIを視覚的に作り、徐々に減少していく演出をさせることが出来ました！
これにプラスして、体力が0になったら「ゲームオーバー」と表示させるのが一般的ですよね。
次の記事では、体力が0になったときにゲームオーバー演出を出す処理を追加していきます！

【Unity入門⑨】HPが0になったらゲームオーバーの演出をさせよう

前回の記事で、敵に触れたらダメージを食らうHPバーを作りました。今回はプレイヤーのHPが0になったらゲームオーバになるUIを作ってみましょう！この記事では、・プレイヤーのHPが0になったら画面に「GAME OVER」、「リトライ」ボタンを表...

naiterukaiju.com

2025.10.18