【Unity初心者向け】HPバーの作り方｜Sliderで体力ゲージを実装する方法を徹底解説

ゲームを作っていると、プレイヤーの体力を画面に表示したくなる場面がよくあります。

特にRPGやアクションゲームでは、現在どれくらいダメージを受けているのかが分からないと、プレイヤーは状況を判断しにくくなってしまいます。

そんなときに便利なのが、Unityの「Slider」を使ったHPバーです。

Sliderは本来、音量調整や数値設定に使われるUIですが、少し設定を変更するだけで体力ゲージとして活用できます。

実際に私も試作ゲームを作るときは、まずSliderでHPバーを作ることが多いです。実装がシンプルなので、ゲームシステムの動作確認を素早く進められるからです。

ただし、初めて作る場合は次のようなところで悩みやすいかもしれません。

• SliderをHPバーとして使う方法が分からない
• ダメージを受けてもゲージが減らない
• HandleやInteractableの設定がよく分からない
• HPバーが画面に表示されない

HPバーはゲームUIの中でも特によく使う仕組みです。一度作り方を覚えておくと、スタミナゲージや経験値バーなどにも応用できます。

まずは完成形を作りながら、SliderとHPを連動させる仕組みを確認していきましょう。

Unityを使ったことがないという方はコチラの記事から見てみてください！

UnityでHPバーを作る方法

UnityでHPバーを作るなら、まずはUIの「Slider」を使う方法がおすすめです。

Sliderは数値に合わせてバーの長さが変わるUIなので、現在HPの値を入れるだけで体力ゲージとして使えます。たとえば最大HPが10で、現在HPが7なら、バーを7割くらい残すような表示にできます。

作成するHPバーの動き

今回作るHPバーは、次のような基本的な動きを想定します。

• ゲーム開始時はHPが満タンで表示される
• 敵に触れるとHPが1減る
• HPが減るとSliderのゲージも減る
• HPが0になるとゲームオーバー処理につなげられる

最初から見た目の演出まで作り込もうとすると、設定する項目が一気に増えて迷いやすくなります。まずは「HPの数値」と「Sliderの表示」が連動するところまで作ると、仕組みを理解しやすいです。

実装の流れ

HPバーの実装は、大きく分けると次の3ステップです。

1. Sliderを作成して、HPバーらしい見た目にする
2. HPを管理するスクリプトを作る
3. ダメージを受けたときにSliderの値を更新する

この流れで作ると、UIの設定とスクリプトの役割を分けて考えられます。

「Sliderの見た目がおかしい」のか、「HPの値が変わっていない」のか、「Sliderへの参照が外れている」のかも判断しやすくなるので、あとからエラーを直すときにも困りにくくなります。

---

SliderをHPバー用に設定する

まずはUnityのSliderを配置して、HPバーとして使える状態にしていきましょう。

初期状態のSliderは「ユーザーが数値を変更するためのUI」として作られています。そのため、そのままではHPバーとして使いにくい部分があります。

ここでは見た目と設定を調整して、「現在のHPを表示する専用ゲージ」に変更します。

UIの基本操作が不安な場合は、先にコチラの記事も参考にしてみてください。

Sliderを作成する

まずはHierarchyウィンドウで右クリックし、以下の手順でSliderを作成します。

1. Hierarchyを右クリック
2. UI
3. Slider

作成すると、Canvasの子オブジェクトとしてSliderが配置されます。

Sceneビューを見ると、横長のゲージが表示されているはずです。

Canvas Scalerを設定する

HPバーは画面サイズが変わっても見やすく表示されるようにしておくことが大切です。

Canvasを選択し、Canvas Scalerの設定を確認しましょう。

• UI Scale Mode：Scale With Screen Size
• Reference Resolution：1920 × 1080（例）

この設定を行うことで、解像度が異なるPCやスマートフォンでもUIが極端に小さくなったり大きくなったりしにくくなります。

Handleを非表示または削除する

Sliderには初期状態で「Handle」と呼ばれるつまみが付いています。

これはプレイヤーが値を変更するための部品ですが、HPバーでは使用しません。

Hierarchy内の以下のオブジェクトを削除するか、非アクティブにしましょう。

• Handle Slide Area

これで一般的な体力ゲージに近い見た目になります。

InteractableをOFFにする

Handleを消しただけでは、Sliderはまだ操作可能なUIとして扱われています。

プレイヤーがマウス操作でHPバーを変更できないようにするため、Sliderコンポーネントの「Interactable」のチェックを外してください。

HPバーは表示専用なので、この設定を行うのが一般的です。

FillとBackgroundの色を変える

次にHPバーらしい色へ変更します。

よく使われる組み合わせは次のようなものです。

部分	おすすめの色
Fill	緑・青
Background	赤・黒・グレー

Fillは現在のHPを表す部分、Backgroundは失われたHPを表す部分です。

ゲームの世界観に合わせて自由に変更して構いません。

ゲージの余白を調整する

Unityのバージョンやテンプレートによっては、ゲージの両端に余白ができることがあります。

その場合はFill AreaやFillのRectTransformを確認し、LeftやRightの値を調整してみてください。

ゲージが枠いっぱいまで伸びるようになると、より自然なHPバーに見えます。

スライダーの背景色とバーの色を変えると、HPバーの雰囲気がぐっと良くなります。

ここまで設定できれば、見た目はほぼ完成です。次はスクリプトからSliderを操作し、実際のHPと連動させていきましょう。

---

HPバーをスクリプトで動かす

Sliderの見た目を整えたら、次はスクリプトからHPバーを操作します。

大切なのは、プレイヤーのHPを管理する変数と、画面に表示するSliderをつなげることです。HPの値が変わったタイミングでSliderの値も更新すると、体力ゲージとして動くようになります。

PlayerHealthスクリプトを作成する

Projectウィンドウで右クリックし、以下の手順で新しいC#スクリプトを作成します。

1. Projectウィンドウを右クリック
2. Create
3. C# Script
4. 名前を「PlayerHealth」に変更

作成したスクリプトを開き、次のコードを入力します。

using UnityEngine;
using UnityEngine.UI;

public class PlayerHealth : MonoBehaviour
{
    public int maxHp = 10;
    private int currentHp;

    public Slider hpSlider;

    void Start()
    {
        currentHp = maxHp;

        hpSlider.maxValue = maxHp;
        hpSlider.value = currentHp;
    }

    public void TakeDamage(int damage)
    {
        currentHp -= damage;

        if (currentHp < 0)
        {
            currentHp = 0;
        }

        hpSlider.value = currentHp;

        if (currentHp == 0)
        {
            Debug.Log("ゲームオーバー！");
        }
    }
}

最大HPと現在HPを用意する

このスクリプトでは、最大HPと現在HPを別々に管理しています。

public int maxHp = 10;
private int currentHp;

maxHpは最大HPです。Inspectorから変更できるようにpublicにしています。

currentHpは現在のHPです。外部から直接変更されると管理が難しくなるため、ここではprivateにしています。

ゲーム開始時には、現在HPを最大HPと同じ値にします。

currentHp = maxHp;

Sliderに現在HPを反映する

HPバーとして使うために、Sliderの最大値と現在値を設定します。

hpSlider.maxValue = maxHp;
hpSlider.value = currentHp;

maxValueには最大HPを入れます。valueには現在HPを入れます。

たとえば最大HPが10で現在HPも10なら、Sliderは満タンになります。現在HPが5になれば、Sliderは半分の表示になります。

InspectorでSliderを登録する

コードを書いただけでは、スクリプトはどのSliderを操作すればよいか分かりません。

次の手順で、作成したSliderをhpSliderに登録してください。

1. PlayerHealthスクリプトをプレイヤーにアタッチする
2. InspectorでPlayerHealthコンポーネントを確認する
3. HierarchyのSliderを、Hp Slider欄へドラッグ＆ドロップする

ここを忘れると、実行時にNullReferenceExceptionが出たり、HPバーが動かなかったりします。

スクリプトでUIを動かすときは、「コードを書く」だけでなく「Inspectorで参照を入れる」ところまでが1セットです。

---

ダメージでHPバーを減らす

HPバーを動かす準備ができたら、次はダメージを受けたときにゲージを減らしていきます。

ポイントは、HPの数値を減らしたあとにhpSlider.valueへ現在HPを入れ直すことです。HPだけ減らしても、Sliderの値を更新しなければ画面上のゲージは変わりません。

TakeDamageでHPを減らす

先ほどのスクリプトでは、ダメージ処理をTakeDamageというメソッドにまとめています。

public void TakeDamage(int damage)
{
    currentHp -= damage;

    if (currentHp < 0)
    {
        currentHp = 0;
    }

    hpSlider.value = currentHp;

    if (currentHp == 0)
    {
        Debug.Log("ゲームオーバー！");
    }
}

damageには、受けるダメージ量を入れます。

たとえばTakeDamage(1)ならHPが1減り、TakeDamage(3)ならHPが3減ります。敵の強さや攻撃の種類に合わせて数値を変えられるので、あとから調整しやすい形です。

HPが0未満にならないようにする

HPを減らすだけだと、現在HPがマイナスになることがあります。

たとえば現在HPが1のときに3ダメージを受けると、計算上は-2になります。

ゲーム上ではHPがマイナス表示になると分かりにくいため、0より小さくなった場合は0に戻しています。

if (currentHp < 0)
{
    currentHp = 0;
}

この処理を入れておくと、HPバーも0の位置で止まります。

Slider.valueを更新する

HPを減らしたあとは、Sliderに現在HPを反映します。

hpSlider.value = currentHp;

ここがないと、内部ではHPが減っていても、画面上のHPバーは満タンのままに見えてしまいます。

「ダメージ処理は動いているのにHPバーが減らない」という場合は、この行が呼ばれているかを確認してみてください。

OnTriggerEnterで動作確認する

実際に敵へ触れたときにHPを減らすには、接触判定からTakeDamageを呼び出します。

今回は簡単なテストとして、敵に触れたらHPを1減らす形にします。

void OnTriggerEnter(Collider other)
{
    if (other.gameObject.tag == "Enemy")
    {
        TakeDamage(1);
    }
}

このコードは、同じPlayerHealthスクリプト内に追加できます。

OnTriggerEnterは、Trigger設定されたColliderに入ったときに呼ばれる処理です。通常の衝突とTriggerの違いがあいまいな場合は、コチラの記事もあわせて確認しておくと理解しやすいです。

Enemyタグを設定する

上のコードでは、接触した相手のタグがEnemyだった場合だけダメージを受けるようにしています。

敵オブジェクトを選択し、Inspector上部のTagからEnemyを設定してください。

Enemyタグがない場合は、Tagの一覧から新しく追加できます。

タグ名はコードと完全に一致している必要があります。enemyやEnemiesのように文字が違うと条件が成立しないので、HPが減りません。

ここまで設定できたら、ゲームを再生して敵に触れてみましょう。HPバーが少しずつ減れば、HPとSliderの連動は成功です。

見た目を本格的に作り込みたい場合は、UI用のアセットを使う方法もあります。自作の仕組みを理解したうえで使うと、デザイン調整の時間をかなり短縮しやすいです。

Ultimate health bar collection
✅ Unity Asset Storeでチェックする

Modern UI Pack
✅ Unity Asset Storeでチェックする

GUI PRO Kit
✅ Unity Asset Storeでチェックする

---

HPバーが動かない原因

コードを書いたのにHPバーが表示されない、敵に触れてもゲージが減らないということはよくあります。

私も最初の頃はコードのミスばかり疑っていましたが、実際にはInspectorの設定漏れやColliderの設定ミスが原因だったことが何度もありました。

まずは次のポイントを順番に確認してみましょう。

UI全般のトラブルについて詳しく知りたい場合は、コチラの記事も参考になります。

HPバーが表示されない

HPバー自体が見えない場合は、CanvasやSliderの設定を確認します。

特に次の項目で問題が起きやすいです。

• SliderがCanvasの外に配置されている
• Scaleが0になっている
• Gameビューの外に配置されている
• Canvasが非アクティブになっている

Sceneビューでは見えていても、Gameビューでは表示されていないケースもあるので注意してください。

ダメージを受けても減らない

敵に接触しているのにHPバーが減らない場合は、まずTakeDamage()が呼ばれているか確認しましょう。

確認方法としては、メソッド内に次のようなログを入れるのが簡単です。

Debug.Log("ダメージを受けました");

Consoleに表示されなければ、接触判定の時点で問題が起きています。

表示されるのにHPバーが変化しない場合は、Sliderへの反映処理を確認してみましょう。

hpSlider.value = currentHp;

この処理が実行されていなければ、ゲージは更新されません。

hpSliderに参照が入っていない

初心者の方が最も遭遇しやすいのがこのケースです。

Inspectorを見ると、PlayerHealthスクリプト内の「Hp Slider」が空欄になっていることがあります。

空欄のまま実行すると、UnityはどのSliderを操作すればよいか分かりません。

その結果、次のようなエラーが表示されることがあります。

NullReferenceException

Hierarchy内のSliderを、Hp Slider欄へドラッグ＆ドロップして登録してください。

Trigger判定が反応しない

OnTriggerEnter()が呼ばれない場合は、ColliderやRigidbodyの設定を確認します。

最低限、次の条件が必要です。

確認項目	内容
Collider	どちらかにColliderが付いている
Is Trigger	どちらかのColliderで有効
Rigidbody	どちらかに付いている

Collider同士だけではTriggerイベントが発生しないため、Rigidbodyの付け忘れには注意してください。

Canvas設定が間違っている

HPバーが画面に表示されない場合は、CanvasのRender Modeも確認してみましょう。

• Screen Space – Overlay
• Screen Space – Camera
• World Space

画面固定のHPバーを作りたい場合は、通常は「Screen Space – Overlay」が使われます。

もしWorld Spaceになっている場合、HPバーがシーン内の遠くに配置されていて見えなくなっている可能性があります。

表示されない場合は、CanvasのRender Modeを確認すると原因が見つかることがあります。

---

まとめ

UnityでHPバーを作るなら、まずはSliderを使う方法が扱いやすいです。

Sliderは数値に合わせてバーの長さを変えられるため、現在HPをvalueに入れるだけで体力ゲージとして使えます。

基本の流れは次の通りです。

• Sliderを作成する
• Handleを非表示または削除する
• InteractableをOFFにする
• スクリプトで最大HPと現在HPを管理する
• ダメージを受けたらhpSlider.valueを更新する

うまく動かないときは、コードだけでなくInspectorの参照設定やCanvas、Collider、Rigidbodyも確認してみてください。

HPバーの仕組みが分かると、スタミナゲージや経験値バー、ボスの体力表示などにも応用できます。

まずはシンプルな画面固定のHPバーを完成させて、そこから少しずつ見た目や演出を調整していきましょう。