2DアクションUnityゲームの作り方メモ
2DゲームC#スクリプトHPバーUI作成UnityアクションゲームプレイヤーHP

【Unity】初心者向け2Dアクションゲームを作ろう③｜HPを表示するUIの作成とダメージ処理

2Dアクション
2025.02.15

1. はじめに

こんにちは！今回は Unityで2Dアクションゲームを作る記事の第3回 です。
前回までにプレイヤーキャラクターの移動やアニメーションの設定を行いましたね。
今回は プレイヤーのHPをUIに表示し、ダメージを受けると減るようにする仕組み を作っていきます！

ゲームをプレイしていると、敵の攻撃を受けたときにHPが減るのが一般的ですよね。
このHPを 画面に見える形で表示するUI（ユーザーインターフェース） を作ることで、プレイヤーは 「あとどれくらいダメージを受けられるのか」 を把握しながらプレイできます。

この記事では、
✅ HPを表示するUIの作成方法
✅ C#スクリプトでHPの増減を管理する方法
✅ ダメージを受けたときにHPアイコンを減らす処理
を順番に解説していきます。

このチュートリアルで学べること
✔️ Unityの UI（Canvas, Image）の基本操作
✔️ Horizontal Layout Group を使ったUIの自動整列
✔️ プレハブを活用した効率的なアイコン管理
✔️ C#スクリプトでのHP管理とUIの更新

初心者の方でも分かりやすいように、 実際のスクリプトの書き方や設定方法 も詳しく紹介するので、一緒に進めていきましょう！

それでは、まず HPを表示するUIの作成 から始めます！

Youtubeで見る
Part2
Part3



2. HPを表示するUIの作成

ここからは、プレイヤーのHPを表示するための UI（ユーザーインターフェース） を作成していきます！
ゲーム中にHPが減っていく様子を ハートのアイコン で表現するUIを作っていきます。

Unityの使い方⑪ UI（ユーザーインターフェース）を作ってみよう
Unity入門：スライダーを使ったHPバーの作り方
UnityでHPバーを実装する方法の紹介です。
cbagames.jp

2.1 Canvasの作成

まずは、UIを表示するために Canvas（キャンバス） を作成します。

  1. ヒエラルキー（Hierarchy）ウィンドウ で 右クリック
  2. 「UI」 → 「Canvas」 を選択

これで、ゲーム画面にUIを表示するための土台ができました！
次に、このCanvasの中に HPを表示するエリア を作ります。

2.2 HPを管理するオブジェクトの作成

次に、プレイヤーのHPアイコンを並べるための 空のオブジェクト を作ります。

  1. Canvasの子オブジェクトとして空のオブジェクトを作成（右クリック → 「Create Empty」）
  2. 名前を 「HP」 に変更

この「HP」オブジェクトの中に ハートのアイコンを並べていく 仕組みを作ります！

2.3 Horizontal Layout Groupの設定

HPのアイコンを綺麗に並べるために、「Horizontal Layout Group」 というコンポーネントを追加します。

  1. 「HP」オブジェクトを選択
  2. インスペクター（Inspector）ウィンドウ で 「Add Component」 をクリック
  3. 「Horizontal Layout Group」を検索して追加

この設定をすると、「HP」の子オブジェクト（HPアイコン）が 等間隔に整列 するようになります！

2.4 HPアイコン（ハートの画像）の作成

次に、HPを表す ハートのアイコン を作成します。

  1. 「HP」の子オブジェクトとして「UI」 → 「Image」を作成
  2. 名前を 「HpIcon」 に変更
  3. インスペクターの「Source Image」 にHPアイコン画像を設定

📝 画像の設定方法

  • Unity標準の画像を使う場合は、 Source Image で「UIMask」を選択
  • 自分で用意した画像を使う場合は、 画像を「Assets」フォルダにインポート して Source Image に設定
  • 無料アセットを利用するのもおすすめ！
    例えば、「Simple Heart Health System」のような無料アセットを使うと簡単に綺麗なハートUIが作れます！

おすすめのアセット

2.5 HPアイコンの配置調整

「HpIcon」を複数コピーして、HPが 3つ分 あるようにしてみましょう！
このとき、「HP」オブジェクトの「Horizontal Layout Group」の「Spacing」 を調整すると、アイコンの間隔を調整できます。

  1. 「HpIcon」を3つに複製（Ctrl + Dでコピー）
  2. 「HP」を選択し、「Horizontal Layout Group」 の「Spacing」を適宜調整

これで、プレイヤーのHPを示すハートアイコンが綺麗に並びました！ 🎉

2.6 Anchor Presetsを設定

このままだと、画面サイズが変わったときにHPの位置がズレる可能性 があります。
それを防ぐために 「Anchor Presets（アンカープリセット）」 を設定しましょう！

  1. 「HP」オブジェクトを選択
  2. 「Rect Transform」 の「Anchor Presets」を開く（Shiftを押しながらクリックで拡張）
  3. 左上固定にするため、左上のアンカープリセットを選択

これで、画面サイズが変わってもHPアイコンが左上に固定されるようになりました！

2.7 HpIconをプレハブ化

最後に、作った「HpIcon」を プレハブ（Prefab） にしておきます。

Unityの使い方⑬ プレハブ（Prefab）で効率よくオブジェクトを管理しよう
  1. プロジェクトウィンドウ（Project） で「Assets」フォルダ内に「Prefabs」フォルダを作成
  2. 「HpIcon」をドラッグして 「Prefabs」フォルダ内に移動
  3. プレハブ化したら、ヒエラルキーのHpIconは削除してOK！

これでHPを表示するUIの準備が完了しました！
次は C#スクリプトを作成して、HPの増減を管理する仕組みを作っていきます！



3. HP管理のスクリプト作成

ここからは、プレイヤーのHPをスクリプトで管理 していきます！
具体的には、プレイヤーのHPに応じてハートアイコンを増減させる処理 を作ります。

3.1 PlayerHPスクリプトの作成

まずは、新しいC#スクリプト「PlayerHP」を作成しましょう。

  1. プロジェクトウィンドウ（Project） で右クリック
  2. 「Create」 → 「C# Script」 を選択
  3. 名前を 「PlayerHP」 に変更
  4. 作成したスクリプトを開く

3.2 スクリプトの記述

以下のコードを PlayerHP.cs に入力してください。

using UnityEngine;
using UnityEngine.UI;

public class PlayerHP : MonoBehaviour
{
    [SerializeField, Header("HPアイコン")]
    private GameObject playerIcon; // HPアイコンのプレハブ

    private Player player; // プレイヤーのスクリプトを取得
    private int beforeHP;  // 前回のHPを記録

    void Start()
    {
        // プレイヤーのスクリプトを探して取得
        player = FindObjectOfType<Player>();
        beforeHP = player.GetHP();
        CreateHPIcon();
    }

    private void CreateHPIcon()
    {
        // プレイヤーのHPの数だけアイコンを生成
        for (int i = 0; i < player.GetHP(); i++)
        {
            GameObject playerHPObj = Instantiate(playerIcon);
            playerHPObj.transform.SetParent(transform); // 親（HPオブジェクト）に設定
        }
    }

    void Update()
    {
        ShowHPIcon(); // HPの変化をチェック
    }

    private void ShowHPIcon()
    {
        // HPが変わっていなければ何もしない
        if (beforeHP == player.GetHP()) return;

        // すべてのHPアイコンを取得
        Image[] icons = transform.GetComponentsInChildren<Image>();

        // 現在のHP以下のアイコンのみ表示、それ以外は非表示
        for (int i = 0; i < icons.Length; i++)
        {
            icons[i].gameObject.SetActive(i < player.GetHP());
        }

        // HPの変更を記録
        beforeHP = player.GetHP();
    }
}

3.3 スクリプトの解説

① プレイヤーのスクリプトからHPを取得

player = FindObjectOfType<Player>();
beforeHP = player.GetHP();

🔹 FindObjectOfType<Player>() でシーン内の Playerスクリプト を持つオブジェクトを探し、HPを取得しています。

② HPアイコンを作成

for (int i = 0; i < player.GetHP(); i++)
{
    GameObject playerHPObj = Instantiate(playerIcon);
    playerHPObj.transform.SetParent(transform);
}

🔹 プレイヤーのHPの数だけHPアイコンを生成 し、「HP」オブジェクトの子要素として配置 しています。

③ HPの変化をチェックし、アイコンを非表示にする

Image[] icons = transform.GetComponentsInChildren<Image>();

for (int i = 0; i < icons.Length; i++)
{
    icons[i].gameObject.SetActive(i < player.GetHP());
}

🔹 GetComponentsInChildren<Image>() で HPアイコンのリストを取得 し、プレイヤーのHPよりも大きいインデックスのアイコンを 非表示 にします。

3.4 PlayerスクリプトにHP取得メソッドを追加

プレイヤーのHPを取得するために、Playerスクリプトに GetHP() メソッドを追加 します！
このメソッドを使って、PlayerHPスクリプトから 現在のHP を取得できるようにします。

📌 Player.cs に以下のコードを追加

public int GetHP() 
{
    return hp;
}

🔹 これで、PlayerHP スクリプトから プレイヤーの現在のHP を取得できるようになりました！

3.5 PlayerHPスクリプトをアタッチ

作成した PlayerHP スクリプトを 「HP」オブジェクトに適用 します。

  1. ヒエラルキー（Hierarchy）で「HP」オブジェクトを選択
  2. インスペクター（Inspector）で「Add Component」 をクリック
  3. 「PlayerHP」スクリプトを追加
  4. 「Player Icon」にプレハブ化した「HpIcon」をドラッグ＆ドロップ で設定



4.スクリプトのアタッチと動作確認

ここまでの設定が完了したら、Unityの プレイボタン（▶） を押して 動作を確認 してみましょう！

✅ プレイヤーのHPの数だけハートアイコンが表示される！
✅ HPが減ると、対応するハートアイコンが消える！

🎉 正しく動作すれば成功です！ 🎉

HPバーのおすすめアセット

4.1 よくあるトラブルと対処法

ゲームを再生してうまく動作しない場合、以下のポイントをチェックしてみましょう！

トラブル原因と対処法
ハートアイコンが表示されないPlayer Icon にプレハブ化した HpIcon を設定したか確認する
HPが減ってもハートが消えないShowHPIcon() メソッド内で player.GetHP() の値が更新されているか確認
ハートの位置がズレるAnchor Presets を 左上固定 に設定
プレイヤーがHPを持っていないエラーPlayer スクリプトの GetHP() メソッドが正しく定義されているか確認



5. まとめ

お疲れさまでした！🎉
今回は UnityのUIを使ってプレイヤーのHPを表示し、ダメージを受けると減少する仕組み を作成しました。

✅ 今回学んだこと

✔ Canvasを使ってHPバーのUIを作成
✔ Horizontal Layout Groupを活用してハートアイコンを整列
✔ C#スクリプトを使ってプレイヤーのHPを管理
✔ ダメージを受けるとHPアイコンを減らす処理の実装

この仕組みを応用すれば、プレイヤーのHPを数値で表示したり、ゲージ型のHPバーを作成 することも可能です！🎮

Corgi Engineで2Dアクションゲームをもっと本格的に！

ここまでで、Unityを使って 2DアクションゲームのHP管理システム を作る方法を学びました！
ただ、「もっと手軽にハイクオリティなアクションゲームを作りたい！」と思いませんか？

そんなあなたに 最強の2Dプラットフォーマーエンジン をご紹介します！ 🎮✨

🎯 Corgi Engineとは？

Corgi Engine は、Unityの2D & 2.5Dアクションゲームを爆速で開発できる高機能アセット です！

ゼロからアクションゲームを作るのは大変ですが、Corgi Engineを使えば 「完成度の高いプラットフォーマーをすぐに作成可能！」 🎮✨

💡 Corgi Engineの魅力

✅ すぐに使える！
インポートするだけで、プロレベルの2Dアクションゲームが動く！

✅ 2D & 2.5Dどちらも対応！
ドット絵風の2Dゲームから、美麗な2.5Dゲームまで幅広く作れる！

✅ キャラクターコントロールが簡単！
ダッシュ、ジャンプ、二段ジャンプ、スロープ移動など、アクションゲームに必要な動作をすべて網羅！

✅ 敵AIやアイテムシステムも搭載！
敵のパターン設定や、パワーアップアイテムの管理も簡単にできる！

✅ スマホ・PC・コンソールにも対応！
Unityがサポートするプラットフォームならどこでも動作！

🎮 Corgi Engineを使えば、すぐに本格的なアクションゲームが作れる！

ゼロからスクリプトを組むと時間がかかる部分も、Corgi Engineなら 「テンプレートを使ってすぐにゲームを動かせる！」

例えば…
🔹 今すぐプレイできるデモシーンを改造してオリジナルゲームを作成！
🔹 難しいスクリプトを1から書かなくても、すぐに動作する！
🔹 物理演算、パーティクルエフェクト、アニメーションの組み込みもスムーズ！

🎯 Corgi Engineをチェックしよう！

Unityアセットストアで 数々の高評価レビューを獲得している大人気アセット なので、ぜひ詳細をチェックしてみてください！✨

👉 Corgi Engine – 2D & 2.5D Platformer

今すぐ購入して、あなたの 2Dアクションゲーム開発を一気に加速 させましょう！ 🚀🔥

【Unity】初心者向け2Dアクションゲームを作ろう④ゲームオーバーの実装方法を解説！
Unity初心者向けに2Dアクションゲームのゲームオーバー画面を実装する方法を解説！UIの作成からスクリプトの実装まで、わかりやすく説明します。
cbagames.jp

よくある質問（FAQ）

Q
HPアイコンが正しく表示されません
A

PlayerHP の playerIcon に適切なプレハブが設定されているか確認してください。また、Horizontal Layout Group の Spacing や Anchor Presets の設定を見直しましょう。

Q
ダメージを受けてもHPアイコンが減りません
A

ShowHPIcon() 内で player.GetHP() の値が適切に更新されているか確認してください。デバッグログを使って GetHP() の戻り値を出力してみると問題の特定がしやすくなります。

Q
HPアイコンの間隔がうまく調整できません
A

Horizontal Layout Group の Spacing を適宜変更してみてください。また、Child Alignment の設定を Middle Center にすると整列しやすくなります。

Unity初心者必見！Asset Storeで手に入るゲーム制作が楽になるおすすめアセット
Unity Asset Storeで手に入るゲーム制作が楽になるおすすめアセットを厳選紹介！ゲーム制作を効率化し、クオリティをアップさせる便利なツールやテンプレートなどを紹介！
cbagames.jp

関連記事:

【Unity】2Dタワーディフェンスゲームの作り方②！武器配置と弾の発射を実装【Unity】初心者向け2Dアクションゲームを作ろう②｜プレイヤーのアクション【Unity】2Dタワーディフェンスゲームの作り方①！敵の配置と基本アニメーション【Unity入門】2Dシューティングゲームを簡単に作る手順を解説【Unity 2D】脱出ゲームの作り方③ ドア開閉＆鍵＆パスワードロックを実装【Unity】2DアクションRPGの作り方②！フィールド・攻撃モーションの設定【Unity 2D】シャドウバース風カードゲームの作り方！初心者向け解説（パート1）【Unity】ツムツム風パズルゲームを作ろう！初心者向け完全ガイド【Unity初心者向け】2Dブロック崩しゲームの作り方を解説！Unity3D脱出ゲームの作り方③ – アイテムボックスの作成
タイトルとURLをコピーしました