2DアクションUnityゲームの作り方メモ
2DアクションRPGCinemachineConfinerHPバーUI作成Unityカメラ追従

【Unity】2DアクションRPGの作り方③！UIとカメラ設定編

2Dアクション
2025.02.28

1. はじめに

こんにちは！今回は 「Unityで2DアクションRPGを作る方法」 の第3回目です。
前回（パート2）では、フィールドの作成や攻撃モーションの設定 を行いました。これで、プレイヤーがマップ上を自由に移動し、攻撃モーションを再生できるようになりましたね！

しかし、ゲームとしての完成度を高めるには、プレイヤーのHPを表示するUI や カメラの追従機能 も必要になります。
そこで今回は、以下の3つの要素を追加して、ゲームの見た目や操作性を向上させていきます。

✅ HPバーの作成 → プレイヤーのHPを可視化するUIを追加
✅ カメラのプレイヤー追従 → プレイヤーの動きに合わせてカメラが動くように設定
✅ マップ外を映らないようにする → カメラの範囲を制限して、マップの外が表示されないようにする

これらを設定することで、プレイヤーの状態を分かりやすく表示し、スムーズなカメラワークを実現できます。
それでは、HPバーの作成から順番に進めていきましょう！



2. HPバーの作成

アクションRPGでは、プレイヤーの体力（HP）を視覚的に表示することが重要です。この記事では、UIスライダーを利用してHPバーを作成し、スクリプトでHPの変動を管理する方法 を解説します。

Unity入門：スライダーを使ったHPバーの作り方
UnityでHPバーを実装する方法の紹介です。
cbagames.jp

2.1 スライダーUIの作成

まず、HPバーとしてスライダー（Slider）を作成し、画面左上に固定しましょう。

1. HPバーの追加

  1. ヒエラルキー（Hierarchy）ウィンドウ で UI → Slider を作成。
  2. 名前を HPSlider に変更。

2. HPバーの位置を調整

  1. HPSlider を選択 し、Inspector の左上のマークをクリック。
  2. Alt キーを押しながら左上 を選択すると、HPバーが画面の左上に固定される。

3. Canvas の設定

  1. Canvas を選択し、Inspector で UI Scale Mode を Scale With Screen Size に変更。
  2. Reference Resolution の X: 1920, Y: 1080 に設定。
    • 画面サイズに応じてHPバーがスケール するようになります。

4. HPバーのデザイン変更

  1. スライダーのサイズを調整 して、適当な大きさに変更。
  2. Background のカラーを 赤 に設定。（背景）
  3. Fill の Image カラーを 緑 に設定。（HPゲージ）
  4. Fill Area と Fill の Rect Transform の Width を 0 に設定。
  5. Handle Slide Area を削除。（不要なハンドルを非表示）
  6. HPSlider の Max Value を 100 に設定。

これで、スライダーをHPバーとして利用できる状態 になりました。次は、スクリプトでHPの変動を管理しましょう。

アセットを使ってHPバーをさらに魅力的に！

シンプルなHPバーを作成しましたが、よりスタイリッシュなデザインにしたい場合は、以下のアセットを活用すると便利です！

🎨 Healthbars Kit

  • カスタマイズ可能なHPバーを多数収録！シンプルなUIでも、高品質なデザインを簡単に導入できます。

❤️ Pixel HUD – Health Hearts & Bars

  • ピクセルアートスタイルのHPバー＆ハートUIをセットで収録。レトロな2Dゲームに最適！

これらを使うと、デザイン性の高いHPバーを簡単に導入 できるので、ぜひチェックしてみてください！



3. HPバーのスクリプト作成

HPバーがあると、プレイヤーの現在の体力を視覚的に確認できるようになります。ここでは、GameManager を使ってHPバーを管理し、プレイヤーの体力が変化したときに自動でUIが更新されるようにスクリプトを作成していきます。

3.1 HPバーをスクリプトで制御

プレイヤーのHPに応じてHPバーを更新するには、GameManager スクリプト を作成します。

1. GameManager スクリプトを作成

  1. Project ウィンドウ を開く。
  2. Create → C# Script を選択し、名前を GameManager にする。
  3. Hierarchy で Create Empty を作成し、名前を GameManager に変更。
  4. 作成した GameManager オブジェクトに GameManager スクリプトをアタッチ。

2. GameManager のコード

GameManager は、プレイヤーのHPに応じてHPバーを更新する処理 を管理します。

using UnityEngine;
using UnityEngine.UI;

public class GameManager : MonoBehaviour
{
    public static GameManager instance;

    [SerializeField]
    private Slider hpSlider;
    
    [SerializeField]
    private PlayerController player;
    private void Awake()
    {
        if (instance == null) 
        {
            instance = this;
        
        }
    }
   

    public void UpdateHealthUI() 
    {
        hpSlider.maxValue = player.MaxHealth;
        hpSlider.value = player.CurrentHealth;
    
    }
}

3. PlayerController の修正

プレイヤーの現在HPと最大HPを管理し、HPが変化するたびに GameManager に通知します。

[System.NonSerialized]
public int CurrentHealth;
    public int MaxHealth;

    private void Start()
    {
        CurrentHealth = MaxHealth;
        GameManager.instance.UpdateHealthUI();
    }

4. Inspector で設定

  1. PlayerController の Inspector で MaxHealth を設定（例: 100）。
  2. GameManager に HPSlider と Player をドラッグ＆ドロップ して関連付ける。

3.2 動作確認

プレイボタンを押して確認！

  • ゲーム開始時に HPバーが満タン（100%） になっているかチェック。

この後、ダメージ処理を実装すると、HPが減少するアクションが再現 できます！

まとめ

✅ スライダーUIを利用してHPバーを作成
✅ Canvas の設定でスケーリング対応
✅ GameManager で HP をスクリプト制御
✅ PlayerController に HP を管理するコードを追加

これで、プレイヤーのHPをUIで可視化 できるようになりました！



4. カメラをプレイヤーに追従させる

2DアクションRPGでは、プレイヤーが動いたときにカメラがスムーズに追従する設定が重要です。Unityには Cinemachine という機能があり、これを使うと簡単にカメラ追従を実装できます。ここでは Cinemachine を導入して、カメラがプレイヤーを追いかけるように設定 する方法を解説します。

4.1 Cinemachine の導入

まずは、Cinemachine をプロジェクトに追加します。

  1. Unity のメニューから Window → Package Manager を開きます。
  2. Unity Registry を選択し、検索バーに Cinemachine と入力。
  3. 表示された Cinemachine パッケージを選択し、「Install」ボタンをクリック。
  4. インストールが完了すると、メニューに Cinemachine タブが追加されます。

これで、Cinemachine を使う準備ができました！

4.2 プレイヤー追従カメラの設定

次に、カメラがプレイヤーを追いかけるように設定します。

① CinemachineBrain を追加

Cinemachine を使うには、メインカメラ（Main Camera） に Cinemachine Brain というコンポーネントを追加する必要があります。

  1. ヒエラルキー（Hierarchy）で Main Camera を選択。
  2. Inspector ウィンドウの Add Component から Cinemachine Brain を追加。

Cinemachine Brain は、Cinemachine の仮想カメラ（VCam）を制御する役割を持っています。

② 仮想カメラ（Virtual Camera）を作成

次に、プレイヤーを追従するカメラを作成します。

  1. ヒエラルキー（Hierarchy）を右クリックし、Cinemachine → 2D Camera を選択。
  2. CM vcam1 というオブジェクトが作成されます。
  3. CM vcam1 の Inspector を開き、Follow の項目に プレイヤーオブジェクト（Player） をドラッグ＆ドロップ。

これで、CM vcam1 がプレイヤーを追従する設定になりました。

4.3 動作確認

  1. ゲームを再生して、プレイヤーが移動したときにカメラが追従するか確認！
  2. カメラがスムーズに追いかけるように調整が必要なら、Damping（減衰） の値を調整。
    • Damping を 0.5~1.0 に設定すると、ゆっくりとカメラが追従するようになる。

4.5 まとめ

  • Cinemachine をインストール
  • Main Camera に Cinemachine Brain を追加
  • 仮想カメラ（VCam）を作成し、プレイヤーを Follow に設定
  • Follow Offset や Damping を調整してカメラの挙動を最適化

これで プレイヤーが移動すると、カメラがスムーズに追従する ようになりました！



5. マップの外を映らないようにする

2DアクションRPGでは、カメラがマップの端まで行ったときに、マップ外の空白が見えてしまうことがあります。これを防ぐために、Cinemachine Confiner を使ってカメラの移動範囲を制限します。
この設定を行うことで、プレイヤーがマップの端に到達しても、余計な空間が映らず、自然なカメラワークを実現できます。

5.1 Confiner（境界）オブジェクトを作成する

まず、マップの端を囲むためのConfinerオブジェクトを作成します。

  1. ヒエラルキー（Hierarchy）ウィンドウで空のオブジェクトを作成
    • Hierarchy を右クリック → Create Empty を選択
    • 名前を Confiner に変更
  2. 位置のリセット
    • Inspector で Transform を (0,0,0) にリセット
    • これにより、Confiner の基準位置をマップの中心に設定できます

5.2 Confiner用のレイヤーを作成

Confiner に専用のレイヤーを設定することで、他のオブジェクトと区別し、衝突判定の影響を受けないようにします。

  1. 新しいレイヤーを作成
    • Inspector の Layer をクリック
    • Add Layer を選択
    • Confiner という新しいレイヤーを作成
  2. Confiner オブジェクトにレイヤーを適用
    • Inspector の Layer 設定で、作成した Confiner を選択
  3. Physics2Dのレイヤー設定を変更
    • Edit → Project Settings を開く
    • Physics2D タブを選択
    • Layer Collision Matrix の Confiner のチェックを 全てオフ にする
    • これにより、Confiner が物理的な衝突判定を持たず、カメラの範囲制限のためだけに機能するようになります

5.3 Confiner にコライダーを追加

次に、カメラの移動範囲を決めるために Polygon Collider 2D を追加します。

  1. Confiner に Polygon Collider 2D を追加
    • Inspector の Add Component をクリック
    • Polygon Collider 2D を検索して追加
  2. マップの端に合わせてコライダーの形を調整
    • Edit Collider をクリック
    • 緑の頂点をドラッグしてマップの境界線に沿うように調整
    • カメラが移動できる範囲を完全に囲むように設定するのがポイント！

5.4 CinemachineConfiner の設定

最後に、Cinemachine を使ってカメラの移動範囲を Confiner に制限します。

  1. Cinemachine の Confiner 設定を追加
    • CM vcam1（Cinemachine Virtual Camera）を選択
    • Inspector の Extensions セクションを開く
    • Add Extension をクリック
    • Cinemachine Confiner を追加
  2. Bounding Shape 2D に Confiner を設定
    • Bounding Shape 2D の項目が表示されるので、Confiner オブジェクトをドラッグ＆ドロップして設定

5.5 設定の確認とテスト

すべての設定が完了したら、ゲームを実行してカメラの動作を確認します。

✅ チェックポイント

  • プレイヤーがマップの端まで行っても、カメラが外の空間を映さないか？
  • カメラがプレイヤーの動きに自然に追従するか？
  • コライダーの形が適切に設定されているか？（カメラの移動範囲が意図した通りになっているか）

もしマップ外が映ってしまう場合は、Polygon Collider 2D の形を再調整し、カメラの移動範囲を正しく設定してください

💡 より高度なカメラ制御を簡単に実装したい方へ！
「TopDown Engine」を使えば、Cinemachine の設定を個別に行わなくても、キャラクターの移動やカメラ追従を一括で管理できます。初心者でも簡単にトップダウンアクションRPGを作成できます！

5.6 まとめ

  • Confiner オブジェクトを作成（マップの端を囲む）
  • 新しいレイヤーを設定（衝突判定の影響をなくす）
  • Polygon Collider 2D で移動範囲を設定
  • Cinemachine Confiner を追加してカメラの移動制限を適用

これで、プレイヤーがマップの端に移動しても、カメラが不要なエリアを映さず、より自然なゲーム体験を提供できます！



6. まとめ

この記事では、2DアクションRPGのUIとカメラの設定 を行いました。以下のポイントを押さえながら、ゲームのプレイ体験を向上させる仕組みを実装しました。

① HPバーの作成

  • UI → Slider を使ってHPバーを作成し、ゲーム画面の左上に固定しました。
  • Canvas の UI Scale Mode を Scale With Screen Size に変更し、画面サイズに応じてUIが調整されるように設定しました。
  • GameManager を導入し、PlayerController の MaxHealth と CurrentHealth の値に応じてHPバーが更新されるようにしました。

② カメラをプレイヤーに追従

  • Cinemachine を導入し、Cinemachine 2D Camera を作成しました。
  • Cinemachine Brain を Main Camera に追加し、Follow に Player を設定することで、プレイヤーをカメラが追従するようになりました。

③ マップ外を映らないようにする

  • Polygon Collider 2D を Confiner オブジェクトに追加し、マップの端を囲むように設定しました。
  • Cinemachine Confiner を Cinemachine 2D Camera に追加し、Bounding Shape 2D に Confiner を設定することで、マップの外が映らないようになりました。

これで、ゲームのUIやカメラの動作が整い、よりプレイしやすい環境ができました！🎮✨

次回は 敵キャラの配置とダメージ処理の実装 を行い、プレイヤーが戦えるようにしていきます！お楽しみに！💥🔥

【Unity】2DアクションRPGの作り方④！敵の配置＆攻撃システム編
Unityで2DアクションRPGの敵キャラを作成！この記事では、敵の配置、エリア内での徘徊、プレイヤーを追跡するAI、攻撃処理を実装します。プレイヤーが敵を攻撃する仕組みも解説！
cbagames.jp



よくある質問（FAQ）

Q
HPバーが表示されない
A

GameManager の HPSlider と Player が正しく Inspector で設定されているか確認してください。

Q
カメラがプレイヤーを追従しない
A

CM vcam1 の Follow に Player が設定されているか、Cinemachine Brain が Main Camera に追加されているか確認してください。

Q
マップ外が映ってしまう
A

Polygon Collider 2D のサイズが適切か、Cinemachine Confiner に Confiner が設定されているか確認してください。

【UnityAssetStore】ゼルダの伝説風2Dアクションアドベンチャーゲーム制作におすすめのアセット
Unityでゼルダの伝説風の2Dアクションアドベンチャーゲームを開発したい方必見！Unityで使えるおすすめアセットを紹介！戦闘システム、RPG要素、UI、BGMまで揃った便利なツールを活用して、理想のゲームを実現しよう。
cbagames.jp
Unity初心者必見！Asset Storeで手に入るゲーム制作が楽になるおすすめアセット
Unity Asset Storeで手に入るゲーム制作が楽になるおすすめアセットを厳選紹介！ゲーム制作を効率化し、クオリティをアップさせる便利なツールやテンプレートなどを紹介！
cbagames.jp

関連記事:

Unityのスクリプト設計を改善！SOLID原則で整理する方法Unityのコードをきれいに保つ！依存性注入（DI）の基本と実装方法【実践】UnityでJSONデータ管理！セーブ＆ロードを最適化する方法Unityのシリアライズ完全ガイド！データの保存・読み込みを自由自在に【Unity C#】カスタムイベントの作り方！EventとActionを使いこなそうUnityのオブジェクト指向設計！継承・ポリモーフィズム・インターフェースを徹底解説Unity初心者必見！シングルトンの正しい実装方法とよくあるミス【Unity】2Dタワーディフェンスゲームの作り方②！武器配置と弾の発射を実装Unityで簡単2Dゲームを作る方法！初心者向けチュートリアルUnityエディタをもっと便利に！カスタムアトリビュートの作り方と活用法
タイトルとURLをコピーしました