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

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

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

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

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

✨ この記事でわかること

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

ゲーム開発講師

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

＼ゲーム制作をゼロから学びたいあなたへ／
Unity入門の森を見る初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる

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

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

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

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

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

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

Sliderを使ったUI版HPバーの作り方
頭上のワールドスペース版HPバーの作り方
HP管理（ロジック）とUIを分離する基本設計
色変化ロジックの実装
実践的なHPバー実装を学ぶには
まとめ

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

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

}

このコードで、HPが減ると、HPバーの色が緑から赤に変化します。

Color.Lerpを使うことで、滑らかに色が変化します。

⚠️ よくある失敗例

SliderのFill Areaが正しく設定されていない
色変化の計算が間違っている
Updateで毎フレーム計算している（パフォーマンスの問題）

＼ゲーム制作をゼロから学びたいあなたへ／
Unity入門の森を見る初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる

実践的なHPバー実装を学ぶには

ここまで、UnityでHPバーを作る方法について解説してきました。

ただし、実際のゲーム制作では、さらに多くの要素が必要になります。

アニメーション、エフェクト、UI、サウンドなど、全体を体系的に学ぶには、専門の講座が効率的です。

Unity入門の森では、2Dアクションゲームの作り方を、基礎から完成まで丁寧に解説しています。

コードの意味から、なぜその実装方法を選ぶのかまで、しっかり理解できる内容になっています。

Q: 初心者でも本当に作れるの？
A: はい。Unity入門の森の講座では、プログラミング経験がなくても、手順通りに進めれば完成までたどり着けます。分からない部分は、動画と図解で詳しく説明しています。

2Dアクション制作に特化した講座なら、効率的にスキルアップできます。

ゲーム制作でスキルを上げたい方は、ぜひチェックしてみてください。

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

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

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

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

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

まとめ

UnityでHPバーを作る方法について解説しました。

要点のまとめ

Sliderコンポーネントを使えば、簡単にHPバーが作れる
頭上のHPバーは、CanvasをWorld Spaceに設定する
ダメージ連動は、HPが減った時にHPバーを更新する
色変化は、Color.Lerpを使うと滑らかに変化する

基本を押さえれば、あとは応用していくだけです。

まずは、ここで紹介したコードを実際に動かしてみてください。

動かしながら理解を深めていくのが、上達への近道です。

＼ゲーム制作をゼロから学びたいあなたへ／
Unity入門の森を見る初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる