UnityでHPバーを作る方法｜UI連動・頭上UI・ダメージ反映まで徹底解説

UnityでHPバーを作りたい。でも、UIの設定方法が分からない。

多くの学生が最初に悩むのが、この部分です。

実は、Sliderコンポーネントを使えば、意外とシンプルに実装できます。

この記事では、UnityでHPバーを作る方法について、UI連動・頭上UI・ダメージ反映まで徹底解説します。

✨ この記事でわかること

Sliderを使ったUI版HPバーの作り方
頭上のワールドスペース版HPバーの作り方
ダメージ連動の実装方法
色変化ロジックの実装

ゲーム開発講師

HPバーは、ゲームのUIで重要な要素です。まずは、基本的なUI版から始めましょう。

＼あなたにピッタリのアクションゲーム制作講座を見つけよう！／

おすすめ第1位

Unity 2Dアクションゲーム
の作り方講座（ロックマン風）

★★★★★ (スマホ化・広告実装)

ロックマン風の横スクロールACTをスマホ化・広告実装まで対応。ゲームのリリースまでを見据えた実践的なカリキュラムで、作って終わりにならない一本です。

講座を購読する＼リリースまで一気に学ぼう／

3D入門に最適

ゼルダ風3Dアクションゲーム
の作り方講座

★★★★★ (スマホ化対応)

ゼルダ風の3Dアクションをスマホ対応で作れる入門講座。全16回で初心者でも3Dゲーム開発の基礎からしっかり習得できます。

講座を購読する＼初心者でも3Dアクションが作れる！／

3プラットフォーム対応

Unity FPSゲームの
作り方講座

★★★★★ (スマホ・VR対応)

FPS・VR・スマホの3プラットフォームに同時対応。1本作るだけで3つのゲームが完成する圧倒的なコスパが魅力の講座です。

講座を購読する＼FPS・VR・スマホを同時に制覇！／

ゲームを「遊ぶ側」から「作る側」へ

あなたのオリジナルゲーム、今年こそ完成させませんか？

RPG・アクション・ホラー…Unityで本格ゲームを作りたい人のための学習サイトです。

Unity入門の森｜永久会員チケット

全講座ラインナップを見てみる

実際に完成するゲームを題材に、
ソースコード・素材・プロジェクト一式をすべて公開。
仕事や学校の合間の1〜2時間でも、
「写経→改造」で自分のゲームまで作りきれる環境です。

Sliderを使ったUI版HPバーの作り方
頭上のワールドスペース版HPバーの作り方
HP管理（ロジック）とUIを分離する基本設計
色変化ロジックの実装
実践的なHPバー実装を学ぶには
アクションゲームを作りたいなら！Unity入門の森のアクション制作講座で本格ゲーム開発に挑戦しよう
まとめ

Sliderを使ったUI版HPバーの作り方

UI版HPバーは、Sliderコンポーネントを使います。

手順は次の通りです。

Hierarchyで右クリック → UI → Slider
Sliderの設定を調整（Min: 0、Max: 100）
スクリプトでHPの値をSliderに反映

以下のスクリプトで、HPバーを制御できます。

using UnityEngine;
using UnityEngine.UI;

public class HPBar : MonoBehaviour
{
    [SerializeField] private Slider hpSlider;
    [SerializeField] private int maxHP = 100;
    private int currentHP;
    
    void Start()
    {
        currentHP = maxHP;
        hpSlider.maxValue = maxHP;
        hpSlider.value = currentHP;
    }
    
    public void TakeDamage(int damage)
    {
        currentHP -= damage;
        currentHP = Mathf.Max(0, currentHP);
        hpSlider.value = currentHP;
    }
}

using UnityEngine;

using UnityEngine.UI;

public class HPBar : MonoBehaviour

{

[SerializeField] private Slider hpSlider;

[SerializeField] private int maxHP = 100;

private int currentHP;

void Start()

{

currentHP = maxHP;

hpSlider.maxValue = maxHP;

hpSlider.value = currentHP;

}

public void TakeDamage(int damage)

{

currentHP -= damage;

currentHP = Mathf.Max(0, currentHP);

hpSlider.value = currentHP;

}

このコードで、HPが減ると、Sliderの値が更新されます。

hpSlider.valueを変更するだけで、HPバーが更新されます。

ゲーム開発講師

Sliderコンポーネントを使えば、簡単にHPバーが作れます。まずは、このコードを動かしてみてください。

頭上のワールドスペース版HPバーの作り方

頭上のHPバーは、CanvasをWorld Spaceに設定します。

手順は次の通りです。

Hierarchyで右クリック → UI → Canvas
CanvasのRender Modeを「World Space」に設定
Canvasをプレイヤーの子オブジェクトにする
Sliderを追加して、位置を調整

以下のスクリプトで、頭上のHPバーを制御できます。

using UnityEngine;
using UnityEngine.UI;

public class WorldSpaceHPBar : MonoBehaviour
{
    [SerializeField] private Slider hpSlider;
    [SerializeField] private int maxHP = 100;
    private int currentHP;
    
    void Start()
    {
        currentHP = maxHP;
        hpSlider.maxValue = maxHP;
        hpSlider.value = currentHP;
    }
    
    public void TakeDamage(int damage)
    {
        currentHP -= damage;
        currentHP = Mathf.Max(0, currentHP);
        hpSlider.value = currentHP;
    }
    
    void LateUpdate()
    {
        // カメラの方を向く
        transform.LookAt(Camera.main.transform);
        transform.Rotate(0, 180, 0);
    }
}

using UnityEngine;

using UnityEngine.UI;

public class WorldSpaceHPBar : MonoBehaviour

{

[SerializeField] private Slider hpSlider;

[SerializeField] private int maxHP = 100;

private int currentHP;

void Start()

{

currentHP = maxHP;

hpSlider.maxValue = maxHP;

hpSlider.value = currentHP;

}

public void TakeDamage(int damage)

{

currentHP -= damage;

currentHP = Mathf.Max(0, currentHP);

hpSlider.value = currentHP;

}

void LateUpdate()

{

// カメラの方を向く

transform.LookAt(Camera.main.transform);

transform.Rotate(0, 180, 0);

}

このコードで、頭上のHPバーがカメラの方を向きます。

LateUpdateで、毎フレームカメラの方を向くようにします。

【ゲームの作り方講座プレゼント中！】

HP管理（ロジック）とUIを分離する基本設計

実際のゲーム制作では、HPを管理する処理（ロジック）とHPバーなどの表示（UI）を分けて考えるのが基本です。

HPの数値管理とUI表示を同じスクリプトで行うと、後からUIを変更したり、頭上HPバーを追加したりする際に修正が大変になります。

まずは、HPの増減だけを管理するクラスを作りましょう。

using UnityEngine;
using System;

public class PlayerHP : MonoBehaviour
{
    [SerializeField] private int maxHP = 100;
    private int currentHP;

    // HPが変化したことを通知するイベント
    public event Action&lt;int, int&gt; OnHPChanged;

    void Start()
    {
        currentHP = maxHP;
        OnHPChanged?.Invoke(currentHP, maxHP);
    }

    public void TakeDamage(int damage)
    {
        currentHP = Mathf.Max(0, currentHP - damage);
        OnHPChanged?.Invoke(currentHP, maxHP);

        // HPが0になったら
        if (currentHP &lt;= 0)
        {
            // ゲームオーバー処理
        }
    }
}

using UnityEngine;

using System;

public class PlayerHP : MonoBehaviour

{

[SerializeField] private int maxHP = 100;

private int currentHP;

// HPが変化したことを通知するイベント

public event Action<int, int> OnHPChanged;

void Start()

{

currentHP = maxHP;

OnHPChanged?.Invoke(currentHP, maxHP);

}

public void TakeDamage(int damage)

{

currentHP = Mathf.Max(0, currentHP - damage);

OnHPChanged?.Invoke(currentHP, maxHP);

// HPが0になったら

if (currentHP <= 0)

{

// ゲームオーバー処理

}

このスクリプトでは、HPの計算のみを行い、SliderなどのUI要素は一切扱っていません。

次に、HPバー側でこの情報を受け取り、表示を更新します。

using UnityEngine;
using UnityEngine.UI;

public class HPBar : MonoBehaviour
{
    [SerializeField] private Slider hpSlider;
    [SerializeField] private PlayerHP playerHP;

    void Start()
    {
        playerHP.OnHPChanged += UpdateHPBar;
    }

    void UpdateHPBar(int currentHP, int maxHP)
    {
        hpSlider.maxValue = maxHP;
        hpSlider.value = currentHP;
    }
}

using UnityEngine;

using UnityEngine.UI;

public class HPBar : MonoBehaviour

{

[SerializeField] private Slider hpSlider;

[SerializeField] private PlayerHP playerHP;

void Start()

{

playerHP.OnHPChanged += UpdateHPBar;

}

void UpdateHPBar(int currentHP, int maxHP)

{

hpSlider.maxValue = maxHP;

hpSlider.value = currentHP;

}

このように役割を分けることで、

UIを変更してもHP処理に影響しない
頭上HPバーや別UIを簡単に追加できる
コードの見通しが良くなる

といったメリットがあります。

最初は少し難しく感じるかもしれませんが、「HPを管理する側」と「表示する側を分ける」という考え方は、Unityゲーム制作で非常に重要な基本設計です。

色変化ロジックの実装

HPバーの色を、HPの残量に応じて変化させることができます。

以下のコードで、色変化ができます。

using UnityEngine;
using UnityEngine.UI;

public class HPBarColor : MonoBehaviour
{
    [SerializeField] private Slider hpSlider;
    [SerializeField] private Image fillImage;
    [SerializeField] private Color fullHealthColor = Color.green;
    [SerializeField] private Color lowHealthColor = Color.red;
    
    void Update()
    {
        float hpRatio = hpSlider.value / hpSlider.maxValue;
        fillImage.color = Color.Lerp(lowHealthColor, fullHealthColor, hpRatio);
    }
}