Unityゲームの作り方メモ脱出ゲーム
C#スクリプトUI設計Unityイベントトリガーカメラ操作ズーム機能脱出ゲーム

Unity3D脱出ゲームの作り方⑥｜ボタンでカメラを回転＆ズームする方法

Unity

1. はじめに

Unityで脱出ゲームを作るシリーズ第6回へようこそ！
今回はカメラを回転＆ズームさせる仕組みを作っていきます。脱出ゲームでは、視点を自由に動かしてヒントを探したり、特定のオブジェクトを拡大して詳しく調べたりすることが重要ですよね。

そこで、この記事では以下のような機能を実装します。

✅ ボタンを押すとカメラが左右に回転
✅ オブジェクトをクリックするとズーム
✅ ズーム時に戻るボタンを表示

これらを実現するために、UIボタンとC#スクリプトを活用して、簡単にカメラを制御できるようにします。初心者でも理解しやすいように、コードと設定手順を詳しく説明していくので、一緒に作っていきましょう！



2. CanvasとPanelの作成

Unityでカメラを操作するボタンを作成するために、まず Canvas（キャンバス） と Panel（パネル） を作成します。ここでは、3つのパネルを用意し、それぞれカメラの回転やズーム解除の役割を持たせます。

① Canvasの作成

まず、UI要素を配置するためのキャンバス（Canvas）を作成します。

  1. ヒエラルキー（Hierarchy）ウィンドウで右クリック
  2. 「UI」→「Canvas」を選択
  3. Canvasの名前を「CameraMoveCanvas」 に変更

Canvasの設定

Canvasを選択し、インスペクター（Inspector）で次の設定を確認・変更してください。

  • Render Mode を Screen Space – Overlay にする（デフォルトのままでOK）
  • Canvas Scaler の UI Scale Mode を Scale With Screen Size に変更
    （ゲーム画面のサイズに合わせてUIがスケールするようにする）
  • Reference Resolution に 1920×1080 を入力
    （画面サイズを固定する場合）

② Panelの作成

Canvasの中に、カメラを操作するためのパネルを3つ作成します。

  1. 「CameraMoveCanvas」を選択
  2. 右クリック →「UI」→「Panel」 を選択
  3. 作成した Panel の名前を LeftPanel に変更
  4. 同じ手順で「RightPanel」「BackPanel」も作成

各パネルには、それぞれ次の役割を持たせます。

パネル名役割色初期表示
LeftPanel左回転ボタン赤表示
RightPanel右回転ボタン青表示
BackPanelズーム解除ボタン黄非表示

③ パネルの見た目を変更

次に、それぞれのパネルの背景色を変更して、分かりやすくします。

  1. LeftPanelを選択
  2. インスペクターで Image コンポーネントの Color を 赤 に変更
  3. RightPanel を青、BackPanel を黄 に変更

BackPanelは初期状態では非表示にするので、Inspector の チェックを外す ことで非表示にできます。

  • BackPanel を選択
  • Inspector の ゲームオブジェクトをアクティブにする（チェックボックス） をオフ

④ ボタンの追加

次に、パネルにカメラ操作用のボタンコンポーネントを追加します。

  1. LeftPanel を選択
  2. インスペクター画面の「AddComponent」ボタンをクリックします。
  3. 「Button」を検索して追加します。
  4. 同じ手順で RightButton、BackButtonにも追加

⑤ 配置を調整

最後に、各ボタンを画面の見やすい位置に調整します。

ボタン配置場所
LeftButton画面左側
RightButton画面右側
BackButton画面中央（ズーム時のみ表示）
  • Rect Transform の Anchor を 左・右に設定（各ボタンの位置を固定）
  • Width や Height を適宜調整（ボタンのサイズ）

これで、カメラを操作するためのUIの基本部分が完成しました！お好みで画像やTextを設定してデザインを変更してみてください。次は 「カメラのスクリプト作成」 に進んで、ボタンを押したときにカメラが動くように設定していきます。



3. カメラのスクリプト作成

脱出ゲームでは、プレイヤーが視点を動かして部屋の隅々を調べることが重要です。そこで、ボタンをクリックするとカメラが左右に回転し、特定のオブジェクトを拡大表示できるようにします。

今回は、カメラの回転・ズーム機能を制御する CameraManager スクリプト を作成し、ボタン操作でカメラを動かせるようにしていきます。

1. CameraManager スクリプトの作成

まず、カメラの動作を管理するスクリプトを作成しましょう。

① スクリプトを作成

プロジェクトウィンドウで 右クリック → 「Create」 → 「C# Script」 を選び、新しいスクリプトを作成します。名前は CameraManager にしましょう。

② 空のオブジェクトを作成してスクリプトをアタッチ

  1. ヒエラルキー（Hierarchy）ウィンドウで 右クリック → 「Create Empty」 を選び、新しい空のオブジェクトを作成します。
  2. 名前を CameraManager に変更します。
  3. CameraManager オブジェクトに、作成した CameraManager スクリプトをドラッグ＆ドロップしてアタッチします。

2. カメラの回転・ズームを管理するスクリプトの記述

次に、CameraManager.cs を開き、以下のコードを入力してください。

カメラの回転・ズームを制御するコード

using UnityEngine;

public class CameraManager : MonoBehaviour
{
    public static CameraManager instance;

    [SerializeField] GameObject backButton = default;
    [SerializeField] GameObject RightButton = default;
    [SerializeField] GameObject LeftButton = default;
    [SerializeField] Transform[] cameraPositions;
    Camera zoomCamera = default;
    Camera mainCamera = default;
    int currentIndex = 0;

    private void Awake()
    {
        instance = this;
    }

    private void Start()
    {
        mainCamera = Camera.main;
        currentIndex = 0;
        SetCameraPosition(currentIndex);
        backButton.SetActive(false);
    }

    // 右回転
    public void TurnRight() 
    {
        currentIndex++;
        if (currentIndex >= cameraPositions.Length) 
        {
            currentIndex = 0;
        }
        SetCameraPosition(currentIndex);
    }

    // 左回転
    public void TurnLeft() 
    {
        currentIndex--;
        if (currentIndex <= -1)
        {
            currentIndex = cameraPositions.Length - 1;
        }
        SetCameraPosition(currentIndex);
    }

    // ズーム解除（元のカメラに戻る）
    public void OnBack() 
    {
        backButton.SetActive(false);
        LeftButton.SetActive(true);
        RightButton.SetActive(true);
        this.zoomCamera.gameObject.SetActive(false);
        mainCamera.gameObject.SetActive(true);
    }

    // カメラの位置を設定
    void SetCameraPosition(int index) 
    {
        Camera.main.transform.position = cameraPositions[index].position;
        Camera.main.transform.rotation = cameraPositions[index].rotation;
    }

    // ズームカメラを設定
    public void SetZoomCamera(Camera zoomCamera) 
    {
        this.zoomCamera = zoomCamera;
        backButton.SetActive(true);
        LeftButton.SetActive(false);
        RightButton.SetActive(false);
        Camera.main.gameObject.SetActive(false);
    }
}

3. スクリプトの詳細解説

このスクリプトでは、カメラの回転・ズーム切り替え機能 を実装しています。

① TurnRight() と TurnLeft()

  • cameraPositions[] に登録された カメラ位置オブジェクト を順番に参照し、カメラの位置と角度を変更します。
  • これにより、ボタンをクリックするとカメラが回転 します。

② OnBack()

  • ズームカメラを無効化し、通常のカメラに戻す処理 です。
  • Backボタンを非表示 にし、左右の移動ボタンを再表示します。

③ SetZoomCamera()

  • ZoomCameraSetter から呼び出される関数で、クリックしたオブジェクトのズームカメラを有効化します。
  • ズーム時には、移動ボタンを非表示にしてBackボタンを表示 します。



4. ボタンのOnClick設定

カメラを操作するための LeftPanel（左回転）, RightPanel（右回転）, BackPanel（ズーム解除） の ボタンを設定 していきます。ボタンをクリックすると、CameraManager の関数が呼び出されてカメラが動くようにしましょう。

① ボタンのOnClick設定

まず、それぞれのボタンに OnClick() イベント を追加していきます。

  1. Unityエディタの Hierarchy（ヒエラルキー）ウィンドウで LeftPanel, RightPanel, BackPanel を選択 します。
  2. Inspector（インスペクター）ウィンドウで Button コンポーネントを確認 します。
  3. OnClick() セクションの「+」ボタンをクリック して、新しいイベントを追加します。
  4. CameraManager を OnClick() のオブジェクトに設定
    • LeftPanel の OnClick() に CameraManager をドラッグ＆ドロップ
    • RightPanel の OnClick() に CameraManager をドラッグ＆ドロップ
    • BackPanel の OnClick() に CameraManager をドラッグ＆ドロップ
  5. 関数を割り当てる
    • LeftPanel → CameraManager.TurnLeft
    • RightPanel → CameraManager.TurnRight
    • BackPanel → CameraManager.OnBack

設定が完了すると、ボタンをクリックすることでカメラが動くようになります。



5. カメラのポジション設定

カメラを回転させるには、カメラの位置と角度をあらかじめ設定しておくことが重要です。この記事では、4方向の壁を向くようにカメラの位置を決める方法を紹介します。

① CameraPositionsオブジェクトを作成

まず、カメラのポジションを管理する空のオブジェクトを作ります。

  1. ヒエラルキー（Hierarchy）ウィンドウで右クリック
  2. 「Create Empty」を選択
  3. 名前を 「CameraPositions」 に変更

この CameraPositions の子オブジェクトとしてカメラ位置を設定するためのオブジェクトを追加していきます。

② カメラのポジション用オブジェクトを作成

カメラの位置を決めるために、4方向の位置に空のオブジェクトを作るのも良いですが、それだとどこに配置しているかわかりにくいことがあります。
そこで、目印としてCubeを使う方法を紹介します。

  1. CameraPositions を選択した状態で、ヒエラルキーウィンドウで右クリック
  2. 「3D Object」 → 「Cube」 を選択
  3. Cubeの名前を 「CamPos_Front」 に変更
    → 部屋の正面（ドアの方向など）を向くように配置
  4. 同じ手順で、4方向にCubeを作成
    • CamPos_Left（左を向くカメラ位置）
    • CamPos_Right（右を向くカメラ位置）
    • CamPos_Back（後ろを向くカメラ位置）

これで、4方向のカメラ位置が視覚的にわかるようになります。

③ Cubeの位置と回転を調整

各 CamPos_〇〇（Cube）の位置と回転を調整して、カメラが正しい向きを向くようにします。

位置の調整

  • CamPos_Front → 部屋の正面に配置　例：（PosX-1,Y1,Z2）
  • CamPos_Left → 部屋の左側に配置　例：（PosX-2,Y1,Z1）
  • CamPos_Right → 部屋の右側に配置　例：（PosX1,Y1,Z1）
  • CamPos_Back → 部屋の後方に配置　例：（PosX-1,Y1,Z-1）

回転の調整

カメラが各Cubeの向きを向くように調整

  • Cubeの青い矢印（Z軸の方向）がカメラの向く方向
  • CamPos_Front → Z軸を部屋の正面へ　例：（RotationX0,Y180,Z0）
  • CamPos_Left → Z軸を部屋の左壁へ　例：（RotationX0,Y90,Z0）
  • CamPos_Right → Z軸を部屋の右壁へ　例：（RotationX0,Y-90,Z0）
  • CamPos_Back → Z軸を部屋の後ろの壁へ　例：（RotationX0,Y0,Z0）

④ CameraManagerにカメラ位置を設定

  1. CameraManager を選択
  2. インスペクター（Inspector）ウィンドウで cameraPositions に CamPos_Front, CamPos_Left, CamPos_Right, CamPos_Back をセット
    • CameraPositions の子オブジェクトをドラッグ＆ドロップでセットすればOK
  3. 各パネルをドラッグアンドドロップしてセット

⑤ メインカメラの初期位置をリセット

カメラを正しい位置に動かすために、メインカメラの位置をリセットします。

  1. ヒエラルキーから Main Camera を選択
  2. インスペクターの Transform を以下に設定
    • Position → X: 0, Y: 0, Z: 0
    • Rotation → X: 0, Y: 0, Z: 0
  3. LeftPanel、RightPanelのボタンを押しながら、カメラの位置が正しく動くか確認

⑥ 見えないオブジェクトは非表示にする

CamPos_〇〇 を Cube で作った場合、そのままだとゲーム中に表示されてしまいます。
これを防ぐために MeshRendererをオフに しておきましょう。

  1. ヒエラルキーで CamPos_Front などのオブジェクトを選択
  2. インスペクターで Mesh Renderer のチェックを外す
  3. すべての CamPos_〇〇 で同じ設定を行う

これで、ゲーム中にCubeが表示されなくなります。

⑦ 動作確認

すべての設定が完了したら、Unityを**再生ボタン（▶）**でテストしてみましょう。

  • LeftPanel（左ボタン）をクリック → カメラが左に回転
  • RightPanel（右ボタン）をクリック → カメラが右に回転
  • カメラが4方向の位置にスムーズに移動するか確認

これで、ボタンをクリックすることでカメラが部屋の4方向に回転できるようになりました！
次のステップでは、クリックでズームする機能を実装していきます！



6. ズーム機能の実装

脱出ゲームでは、部屋のオブジェクトをクリックしたときにズームする機能がよく使われます。例えば、ドアの鍵穴を調べるためにズームしたり、パスワードのヒントを拡大表示したりするシーンを作ることができます。

今回は、ドアにズーム機能を追加してみましょう。メインカメラとは別にズーム用のカメラを用意し、クリック時に切り替えることでズーム機能を実現します。

6.1. ズーム用のカメラを作成

まず、ズームするための専用カメラを作成します。

  1. Hierarchyウィンドウで右クリック → 「Camera」 を選択
  2. 作成したカメラの名前を ZoomCamera に変更
  3. Inspectorウィンドウで Transform の位置を調整し、ドアにズームするように配置
  4. GameObject を非表示にするため、Inspector で チェックを外す

📌 ポイント
ズームカメラの Field of View (視野角) を調整すると、より拡大した見え方にできます。

6.2. ズーム用のクリック判定を作成

ズーム機能を作動させるため、ドアにコライダーを追加します。

  1. ドアの子オブジェクトを作成
    • Hierarchyウィンドウで**ドアの上で右クリック → 「Create Empty」**を選択
    • 名前を DoorZoom に変更
  2. Inspector で 「Add Component」 → 「Box Collider」 を追加
    • Size をドアより少し大きめに設定し、クリックしやすくする

📌 ポイント
Box Collider の Is Trigger をオンにすると、他の物理衝突を避けながらクリック判定ができる。

6.3. ズーム用スクリプトを作成

ズームの切り替えを行う ZoomCameraSetter.cs を作成します。

  1. プロジェクトウィンドウで右クリック → Create → C# Script
  2. スクリプト名を ZoomCameraSetter に変更
  3. 以下のコードを入力
using UnityEngine;

public class ZoomCameraSetter : MonoBehaviour
{
    [SerializeField] Camera zoomCamera = default;

    public void OnClickObj() 
    {
        zoomCamera.gameObject.SetActive(true);
        CameraManager.instance.SetZoomCamera(zoomCamera);
    }
}

このスクリプトは、クリックされたオブジェクトの zoomCamera をアクティブ化し、CameraManager にズームカメラの情報を渡します。

6.4. スクリプトを適用

作成した ZoomCameraSetter を DoorZoom に適用し、Inspector で ZoomCamera をセットします。

  1. DoorZoom を選択
  2. Inspector で Add Component → ZoomCameraSetter を追加
  3. ZoomCameraSetter に ZoomCamera をドラッグ＆ドロップ してセット

6.5. クリックイベントを追加

次に、クリック時に OnClickObj() を呼び出すように設定します。

  1. DoorZoom の Inspector で 「Add Component」 → 「Event Trigger」 を追加
  2. 「Add New Event Type」 → 「Pointer Click」 を選択
  3. + ボタンをクリックし、 ZoomCameraSetter をドラッグ＆ドロップ
  4. 関数 OnClickObj() を選択

これで、ドアをクリックするとズームカメラがアクティブになり、カメラがドアにズームされます！

6.6. バックボタンの設定

ズームしたときに BackPanel を表示 し、元のカメラに戻れるように設定します。

  1. BackPanel の Button の OnClick() に CameraManager をセットし、 OnBack() を実行

これで、ズーム時に BackPanel が表示され、ボタンを押すとズームを解除できます！

これで、脱出ゲームにクリックでズームする機能を実装できました！🎉部屋のオブジェクトが増えても同じようなやり方でズーム機能を設定できます。



7. ズーム時のみドアを開ける設定

通常の脱出ゲームでは、ズームしないとドアを開けられないようにすることがあります。この設定を行うことで、プレイヤーが適切なヒントを確認したり、鍵を見つけたりした後にドアを開けるようにできます。

この機能を実現するために、レイヤーとPhysicsRaycasterの設定を活用します。

7.1. 新しいレイヤー「zoom」を作成

まず、ズーム時のみクリック可能にするためのレイヤーを作成します。

  1. Unityのメニューバーから 「Edit」 → 「Project Settings」 を開く
  2. 「Tags and Layers」 を選択
  3. 「Layers」 セクションで一番下の空きスロットをクリック
  4. 新しいレイヤー名を「zoom」 に設定

7.2. DoorZoom のレイヤーを変更

  1. DoorZoom オブジェクトを選択
  2. Inspector ウィンドウの「Layer」 をクリック
  3. 新しく作成した「zoom」レイヤーを選択

📌 ポイント
これで DoorZoom は「zoom」レイヤーに属するようになりました。

7.3. DoorのZoomCamera の PhysicsRaycaster 設定

次に、DoorZoomCamera の PhysicsRaycaster の設定を変更して、通常の状態では DoorZoom をクリックできないようにします。

  1. DoorのZoomCamera を選択
  2. Inspector ウィンドウで 「Add Component」 → 「PhysicsRaycaster」 を追加
  3. 「Event Mask」の設定で「zoom」のチェックを外す

📌 ポイント
これにより、ズームカメラが DoorZoom を認識しなくなります。

7.4. 動作の仕組み

この設定によって、以下のような動作になります。

✅ ズーム前：DoorZoom にクリックするとズームカメラになる
✅ ズーム後：DoorZoom をクリックするとドアが開く

ズームしないとドアを開けられない仕様になったので、プレイヤーが適切なタイミングで操作するように誘導できます。



8. 表示の調整

UnityでUIを作成すると、Canvasの Sort Order（表示順序）によってボタンやUIが意図しない位置に表示されることがあります。特に、移動ボタンがアイテムボックスより前面に表示されると、ゲームのUIが崩れてしまいます。

ここでは、ボタンの表示順を適切に調整する方法を説明します。

1. 問題の確認

  • LeftPanel, RightPanel, BackPanel のボタンが、アイテムボックス（ItemBoxCanvas）より前に表示されることがある
  • これでは、ボタンがアイテムに被ってしまい、視認性や操作性が悪くなる
  • Canvasの Sort Order を調整して、適切な順番で表示するようにする

2. CanvasのSort Orderとは？

Sort Order は、Canvasの描画優先順位を決める設定です。
数値が大きいCanvasが前面に表示され、小さいCanvasは背面に隠れるようになります。

たとえば：

  • Sort Order: 0 → 一番奥に表示される
  • Sort Order: 1 → Sort Order: 0 のCanvasより前面に表示
  • Sort Order: 10 → さらに前面に表示

この仕組みを利用して、移動ボタン（CameraMoveCanvas）とアイテムボックス（ItemBoxCanvas）の表示順を適切に設定します。

3. Sort Order の設定方法

  1. CameraMoveCanvas の Sort Order を確認
    • CameraMoveCanvas を選択
    • Inspectorウィンドウで Canvas コンポーネントをチェック
    • Sort Order の値を現在の ItemBoxCanvas より小さくする
  2. ItemBoxCanvas の Sort Order を調整
    • ItemBoxCanvas の Sort Order を CameraMoveCanvas より大きい値 に設定
    • 例: CameraMoveCanvas が Sort Order: 1 の場合、ItemBoxCanvas を Sort Order: 2 にする
  3. 動作確認
    • ゲームを実行し、アイテムボックスがボタンより手前に表示されているか確認

4. 表示順を調整する際のポイント

  • 数値を変えすぎると他のUIに影響が出るため、少しずつ調整する
  • 複数のCanvasがある場合は、整理して優先度を決める
  • Sort Order を変更した後は必ず動作確認をする

5. まとめ

  • ボタンがアイテムボックスより手前に表示される場合
    • ItemBoxCanvas の Sort Order を CameraMoveCanvas より大きい値 に設定する
  • Sort Order を活用してUIの重なりを調整
  • 変更後はゲームを実行して確認

これで、UIの表示が正しく調整でき、快適なゲーム画面が作れます！



よくある質問（FAQ）

Q
カメラが回転しない！
A

CameraManager の cameraPositions に正しくオブジェクトが登録されているか確認してください。

Q
ズーム機能が動作しない！
A

ZoomCameraSetter の zoomCamera にズーム用のカメラが正しく設定されているか確認してください。

Q
バックボタンを押してもカメラが戻らない！
A

OnBack() 内で mainCamera.SetActive(true); を忘れていないかチェックしましょう。

Unity初心者必見！Asset Storeで手に入るゲーム制作が楽になるおすすめアセット
Unity Asset Storeで手に入るゲーム制作が楽になるおすすめアセットを厳選紹介！ゲーム制作を効率化し、クオリティをアップさせる便利なツールやテンプレートなどを紹介！
cbagames.jp
Unity3D脱出ゲームの作り方⑦：アイテムズーム機能を実装しよう！
Unityで脱出ゲームを作成中の方必見！アイテムを選択し、+ボタンを押すことでズーム表示する機能の実装方法を解説します。ズームパネルの作成、スクリプトの設定、アイテムの回転まで詳しく説明します。
cbagames.jp

関連記事:

Unity3D脱出ゲームの作り方⑦：アイテムズーム機能を実装しよう！Unityでキー操作によって複数のオブジェクトを切り替える【Unity2D】にゃんこ大戦争風タワーディフェンスゲームの作り方！初心者向け完全ガイド【Unity】2Dタワーディフェンスゲームの作り方②！武器配置と弾の発射を実装Unityのシリアライズ完全ガイド！データの保存・読み込みを自由自在にUnityのUIが表示されない問題を解決！初心者にありがちなミスと修正法【実践】UnityでJSONデータ管理！セーブ＆ロードを最適化する方法Unityで簡単2Dゲームを作る方法！初心者向けチュートリアル【Unity】ツムツム風パズルゲームを作ろう！初心者向け完全ガイドクリックしたオブジェクトを順番に配列へ格納！Unity初心者向け簡単チュートリアル
タイトルとURLをコピーしました