Unity 2Dでカメラを背景からはみ出させない方法【Cinemachine Confiner 2D】

2026年10月30日

広告

Cinemachine Confiner 2D チュートリアル

はじめに

2Dゲーム開発で「プレイヤーを追いかけるカメラが背景の外まで映ってしまう」経験はありませんか？

この記事では、Unity 6 + Cinemachine 3.xを使って、カメラが必ず背景内に収まる設定方法を、初心者の方にも分かりやすく解説します。

この記事の進め方

上から順番に進めれば、カメラが背景からはみ出さないシーンが完成します。

  1. 準備1:アセットを入れて、背景を置く
  2. 準備2:スプライトシートからキャラクターを切り出す
  3. 準備3:キャラクターをシーンに置く
  4. 本編:カメラが背景からはみ出さないようにする

こんなときはここへ

  • スプライトシートの切り出しが初めて → 準備2(画像つきで説明しています)
  • キャラクターを歩かせたい → 本編のあとにアニメーションの記事を用意しています。まずはこの記事を最後まで進めてください

完成イメージ

  • プレイヤーを操作しても、カメラは背景画像の範囲からはみ出さずに追従します。
  • 2Dゲームでよくある「画面の見切れ」や「マップ外が映る」問題を一発で解消できます。

準備・必要なもの

  • Unity 6.0.0以降（この記事は6000.0以降を前提） 2026/10/29現在 Unity 6.6（6000.6.6f1）
  • Cinemachine 3.1.7（Package Managerからインストール）2026/10/29現在 最新版
Package Manager で Cinemachine 3.1.7 をインストールする画面

Unityプロジェクトの作成

Unity Hub の「新しいプロジェクト」から、テンプレート「Universal 2D」を選び、プロジェクト名をCameraConfinerDemoとして作成します。

この名前は仮のものです。お好きな名前でも問題ありません。作成が終わるとUnityエディタが開くので、このまま次の「今回使用したアセット」へ進みましょう。

今回使用したアセット（フリー）

準備編:シーンを用意しよう

カメラの設定を行うには、背景とキャラクターがシーンに置かれている必要があります。ここでは、本編に進むための最小限の準備をします。所要時間の目安は10〜15分です。

最終的に、Hierarchy に Background と Player の2つが置かれている状態を目指します。

準備1:アセットを入れて、背景を置く

1. アセットをプロジェクトに入れる

  1. この記事の「今回使用したアセット」のリンクから、Asset Store の Free Platform Game Assets を開き、「マイアセットに追加」を押します。
  2. Unity エディタで Window > Package Management > Package Manager を開きます。
  3. 左側の一覧から My Assets を選び、Free Platform Game Assets を探して Download → Import を押します。
  4. インポートの画面が出たら、そのまま Import を押します。

Project ウィンドウに、アセットのフォルダーが追加されれば成功です。

2. 背景をシーンに置く

  1. Project ウィンドウで Backgrounds フォルダーを開き、背景の画像を1枚選びます。
  2. その画像を、Hierarchy にドラッグ&ドロップします。
  3. Hierarchy に追加されたオブジェクトの名前を Background に変更します(選んで F2 キー)。
  4. Inspector の Transform で、Position を X=0, Y=0, Z=0 にします。
Project ウィンドウで Background の画像ファイルの場所を示した画面

確認ポイント: Scene ビューに背景が表示されていれば、準備1は完了です。
取り込み直後に、Console に黄色い警告が大量に表示されることがありますが、アセットに含まれる古い形式の通知です。そのまま進めて大丈夫です。

準備2:スプライトシートからキャラクターを切り出す

キャラクターの画像は、複数のポーズが1枚の png にまとめて保存されています。これを「スプライトシート」と呼びます。このままでは1枚の大きな絵なので、ポーズごとに切り分ける(スライスする)必要があります。

1. 画像を「複数のスプライト」として扱う設定にする

  1. Project ウィンドウで、キャラクターのスプライトシート(複数のポーズが並んだ png)を選びます。
  2. Inspector の Sprite Mode を Multiple に変更します。
  3. Inspector 右下の Apply を押します。
スプライトを切り出せるように設定した Unity の画面

2. Sprite Editor で自動的に切り出す

  1. 同じ Inspector の Sprite Editor ボタンを押します。
  2. Sprite Editor の左上にある Slice を押します。
  3. Type を Automatic のままにして、Slice ボタンを押します。
  4. キャラクターごとに四角い枠が表示されます。右上の Apply を押して、Sprite Editor を閉じます。
Sprite Editor の Slice でキャラクターを自動的に切り出している画面

3. 切り出せたか確認する

Project ウィンドウで、スプライトシートの左側にある小さな▶をクリックして開きます。切り出された画像が、枝分かれして並んで表示されます。

確認ポイント: ▶を開くと、ポーズごとの画像が並んでいれば成功です。
Slice のメニューに「Texture is in compressed format…」と表示されることがありますが、そのまま Automatic で切り出せます。

スライスの設定をさらに詳しく知りたい方や、このあとアニメーションを付けたい方は、1枚のスプライトシートからアニメーションを作る手順で解説しています。

準備3:キャラクターをシーンに置く

1. キャラクターをシーンに置く

  1. 切り出した画像の中から、ポーズを1つ選びます(どれでも構いません)。
  2. それを Hierarchy にドラッグ&ドロップします。
  3. オブジェクトの名前を Player に変更します。
  4. Scene ビューで、Player が背景の上に表示される位置にあることを確認します。

2. 背景より前に表示されるようにする

Player が背景に隠れて見えない場合は、描画の順番を設定します。

  1. Hierarchy で Background を選び、Inspector の Sprite Renderer > Order in Layer を 0 にします。
  2. Hierarchy で Player を選び、同じく Order in Layer を 1 にします。

数字が大きいほど手前に表示されます。

確認ポイント: Scene ビューで、背景の上に Player が表示されていれば、準備は完了です。Player を動かすスクリプトは、本編の手順5で付けます。

うまくいかないときは

  • Player が表示されない → Order in Layer が、Background より Player のほうが大きい値になっているか確認してください。
  • 切り出した画像が▶の中に見当たらない → 準備2の Sprite Mode が Multiple になっているか、Apply を押したか確認してください。

シーン構成

最終イメージ：次からの項で実装していきます

  • Background（背景画像）カメラが移動できる範囲を定義します。
  • Player（キャラクター）
  • CinemachineCamera（仮想カメラ：Cinemachine 2D Camera）

Background と Player は、上の準備編で用意したものです。

本編:カメラが背景からはみ出さないようにする

1. 背景にBox Collider 2Dを追加

  1. HierarchyでBackgroundオブジェクトを選択します。
  2. Inspectorから「Add Component」→「Box Collider 2D」を追加します。
  3. Box Collider 2Dのサイズを背景画像に合わせて調整してください。
背景の Box Collider 2D を追加した Inspector の画面

2. Cinemachine 2Dカメラを作成

  1. Hierarchy上で右クリックします。
  2. 「Cinemachine > Targeted Cameras > 2D Camera」を選択します。
Hierarchy の右クリックメニューから Cinemachine > Targeted Cameras > 2D Camera を選ぶ画面

3. Cinemachine Confiner 2Dの追加と設定

  1. 作成したCinemachineCameraを選択します。
  2. Inspector下部の「Add Extension」ボタンをクリックします。
  3. リストから「CinemachineConfiner2D」を選択します。
Add Extension から Cinemachine Confiner 2D を選ぶ画面
  1. Inspectorで「Bounding Shape 2D」に「Background（Box Collider 2D）」を指定します。
  2. DampingやSlowing Distanceは初期値のままで構いません（必要に応じて微調整します）。
Confiner 2D の Bounding Shape 2D に Background を指定した画面

4. カメラのターゲットにPlayerを指定

  1. CinemachineCameraの「Tracking Target」欄にPlayerオブジェクトをドラッグ&ドロップします。
CinemachineCamera の Tracking Target に Player を指定した画面

5. Playerを動かすスクリプトを付ける

カメラの動きを確かめるには、Playerを動かせる必要があります。矢印キー（またはWASDキー）で上下左右に動かす、最小のスクリプトを用意しました。

using UnityEngine;
using UnityEngine.InputSystem;

public class PlayerMove : MonoBehaviour
{
    [SerializeField] private float speed = 5f;

    void Update()
    {
        var keyboard = Keyboard.current;
        if (keyboard == null) return;

        Vector2 move = Vector2.zero;
        if (keyboard.leftArrowKey.isPressed  || keyboard.aKey.isPressed) move.x -= 1;
        if (keyboard.rightArrowKey.isPressed || keyboard.dKey.isPressed) move.x += 1;
        if (keyboard.upArrowKey.isPressed    || keyboard.wKey.isPressed) move.y += 1;
        if (keyboard.downArrowKey.isPressed  || keyboard.sKey.isPressed) move.y -= 1;

        transform.position += (Vector3)(move.normalized * speed * Time.deltaTime);
    }
}
  1. Projectウィンドウで右クリックし、「Create > MonoBehaviour Script」で PlayerMove という名前のスクリプトを作ります（ファイル名とクラス名は必ず同じにします）。
  2. ダブルクリックして開き、上のコードをすべて貼り付けて保存します。
  3. HierarchyのPlayerにドラッグ＆ドロップして付けます。InspectorにSpeedの欄が表示されます。

この記事のコードは、Unity 6の新しいInput Systemを使っています。キー入力の仕組みの詳細は、Unity 6でキー入力による移動を実装する ― Input Systemの基本で解説しています。Project Settings > Player の「Active Input Handling」が「Input System Package (New)」または「Both」になっていることを確認してください。

6. 実行と動作確認

  • ゲームを再生し、プレイヤーを動かしてみてください。
  • カメラはBox Collider 2Dで囲まれた背景範囲の中だけを追従し、背景の外には出ません。

よくある質問・トラブルシューティング

Q. Playerが小さすぎる場合は？

A. Lensの値を調整してください。

Q. カメラが端でピタッと止まらず、滑るように見える場合は？

A. DampingやSlowing Distanceを調整してください。

Q. カメラの映る範囲が背景より大きくて外が見切れる場合は？

A. Lens の「Orthographic Size」を小さくするか、背景を大きくしてください。背景がカメラの画面より小さいと、Confiner 2D は画面全体を背景の中に収められません。

Q. 背景が複雑な形でも対応できる？

A. Polygon Collider 2Dも利用可能です。

Q. 背景のColliderが子オブジェクトでも大丈夫？

A. 問題ありません。ただしColliderが有効かどうかは確認してください。

参考リンク

キャラクターをアニメーションさせたい場合

準備2で切り出したスプライトは、そのままアニメーションに使えます。

カメラが背景内に収まるようになったら、次はPlayerを歩かせてみましょう。スプライトの切り出しは準備2で済んでいるので、次の記事は「手順3 Animation Clip を作成」から進められます。

まとめ

Cinemachine Confiner 2Dを使えば、2Dゲームで「カメラのはみ出し」問題がすぐに解決できます。

ぜひ自分のUnityプロジェクトで試してみてください！

カメラが背景の範囲内に収まって表示されている Unity の Game ビュー

実践Tips

背景画像やマップのサイズにピッタリ合わせるコツ

  • Box Collider 2DはInspector上で手動調整できますが、背景画像のSprite Rendererサイズと完全一致させたい場合は、Colliderの「Edit Collider」でガイドを見ながら合わせると便利です。
  • 背景画像自体が動的に変わる（例：マップ切り替え）場合は、Colliderもスクリプトで自動調整すると確実です。

複雑な地形・ステージへの応用

  • 直線的な矩形範囲でなくてもPolygon Collider 2Dを使えば、L字・複雑なエリアにも対応できます。
  • 複数エリア（マップ）の切り替え時は、ConfinerのBounding Shapeを切り替えることで柔軟に管理できます。

カメラのズーム・移動速度調整

  • CinemachineCameraの「Orthographic Size」をスクリプトで変更すれば、ズームイン・ズームアウト演出もOK。
  • 端で急にカメラが止まるのが気になる場合は「Damping」「Slowing Distance」を活用しましょう。

移動ターゲットを途中で切り替えたい

  • 「Tracking Target」（追従する対象）はスクリプトから自由に差し替え可能。イベントシーンなどで追いかける対象を変える演出もできます。

よくあるエラーとその解決法

エラー1：カメラが背景外まで移動してしまう

  • 原因1: Bounding Shape 2Dに指定しているColliderが正しくセットされていない→ InspectorでCollider参照が外れていないか再確認。
  • 原因2: Box Collider 2Dのサイズが背景より小さい→ 「Edit Collider」で背景全体をカバーするように調整。

エラー2：「Confiner 2D Extension is missing bounding shape」などの警告が出る

  • 原因: Confiner 2DにColliderが未設定→ Inspectorの「Bounding Shape 2D」が空欄の場合、必ずBackgroundオブジェクトのBox Collider 2Dをドラッグして指定。

エラー3：カメラの映る範囲が広すぎて見切れてしまう

  • 原因: カメラの「Orthographic Size」が大きすぎる、もしくはColliderが小さすぎる→ カメラサイズを小さくするか、Colliderを広げて調整。
  • Oversize Windowオプションが有効になっている場合、画角がはみ出しても強制的に見せる仕様になるので、原則OFF推奨。

エラー4：Colliderを複数指定しても動かない

  • 注意: Bounding Shape 2Dに指定できるのは一つのColliderのみ→ 複数マップを切り替えたい場合は、対象マップのColliderを都度切り替える実装を。

エラー5：Play中にColliderを変更してもカメラ範囲が更新されない

  • 解決法: CinemachineConfiner2D.InvalidateCache() をスクリプトから呼び出すことで、Colliderの変更を即時反映できます。
// 例: 背景のColliderを切り替えた直後
var confiner = virtualCamera.GetComponent<CinemachineConfiner2D>();
confiner.InvalidateCache();

裏技・上級者向けTips

  • カメラ追従に「Group Framing」も併用可能→ 複数のキャラクターやターゲットを常に画面内に入れたい場合は「Cinemachine Target Group」＋「Confiner 2D」の組み合わせが強力です。
  • イベント時にカメラを一時停止したいとき→ CinemachineCameraの「Tracking Target」や「Look At Target」を一時的に外す／他の空オブジェクトに切り替える方法も便利です。

まとめ

Cinemachine Confiner 2Dは、工夫次第で2Dゲームの「自然なカメラワーク」や「特殊な演出」も柔軟に実現できます。

トラブルがあっても基本的にはColliderの設定とInspectorの再確認が解決の糸口です。

困ったら本記事のエラー集を見返してみてください！

訪問数 679 回, 今日の訪問数 3回

広告

Cinemachine,Unity,Unity6

Posted by hidepon