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

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

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

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

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

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

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

naiterukaiju.com

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

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

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

naiterukaiju.com

この記事でできること

• 画面に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