Unity3D脱出ゲームの作り方⑦：アイテムズーム機能を実装しよう！

1. はじめに

脱出ゲームを作るときに「アイテムを拡大して詳しく見る」機能は欠かせませんよね！
例えば、鍵のような小さいアイテムを拾ったとき、「これってどんな形をしているんだろう？」とプレイヤーが気になる場面が出てきます。そこで、アイテムを選択し、+ボタンを押すことで拡大表示する「ズーム機能」を実装してみましょう。

この機能があると、プレイヤーはアイテムをじっくり観察できるようになり、
「鍵の裏に何か書いてある…？」といった謎解きのヒントを与えることができます。
また、アイテムを拡大するだけでなく、回転させていろんな角度から見られるようにすると、さらにゲームのクオリティがアップします！

この記事では、以下の内容を詳しく解説します。

• アイテムズーム用のUIパネルを作成する方法
• ズームしたアイテムを回転させる方法
• スクリプトを編集してズーム機能を実装する方法
• ズーム画面を閉じるボタンの設定方法

初心者の方でも手順通りに進めれば簡単に実装できるので、一緒に作っていきましょう！

2. ズーム用パネルの作成

アイテムをズーム表示するためのパネルを作成していきます。このパネルを使うことで、選択したアイテムを拡大表示し、さらに回転させることができるようになります。まずは基本となる ZoomCanvas を作成し、その中にズーム用のパネルを配置していきましょう！

1. Canvasの作成

ズーム用のUIを管理するために、Canvas を作成します。

1. ヒエラルキー（Hierarchy）ウィンドウ で 右クリック → UI → Canvas を選択
2. 作成されたCanvasの名前を ZoomCanvas に変更
3. Inspector で以下の設定を変更
   • Render Mode を Screen Space – Camera に設定
   • Render Camera に MainCamera をドラッグ＆ドロップ
   • Plane Distance を 1 に設定（カメラとキャンバスの距離を調整）
   • Oder in Layerを1に設定

💡 Plane Distance を変更することで、Canvasとカメラの間隔を調整できます。1 に設定することで適切な位置に表示されます。

2. 背景パネルの作成

ズーム時に背景を暗くするための パネル（Panel） を作成します。

1. ZoomCanvas の子オブジェクト として UI → Panel を作成
2. 名前を BackGroundPanel に変更
3. BackGroundPanel の Image コンポーネントの Color を 透明 にする
   • Alpha（透明度）を 0 に設定

この BackGroundPanel は、ズーム中にボタン操作などを制限するための透明なパネルとして機能します。

3. 黒い背景パネルの作成

ズーム時に画面を暗くするために、黒い背景を作成します。

1. BackGroundPanel の 子オブジェクト として UI → Panel を作成
2. 名前を BlackPanel に変更
3. BlackPanel の Image コンポーネントの Color を 黒（#000000） に変更
4. サイズを 画面全体を覆うように調整
   • Anchor を Stretch（全画面） に設定すると便利

💡 BlackPanel を表示することで、ズーム時に背景が暗くなり、ユーザーの視線をアイテムに集中させることができます。

4. ズームオブジェクトの親オブジェクトを作成

ズームするアイテムを表示するための 空のオブジェクト（Empty Object） を BlackPanel の前面に作成します。

1. BlackPanel の子オブジェクトとして Create Empty を作成
2. 名前を ZoomObjParent に変更
3. RectTransform の Position を調整し、画面中央に配置
4. ZoomObjParent の Scale を適切なサイズに調整
5. ZoomObjParent は BlackPanel に埋もれないよう、 Z座標 を調整（例： Z = -2 ）

この ZoomObjParent にアイテムを配置することで、ズーム時にアイテムが表示される仕組みになります。

まとめ

ここまでの作業で、ズーム用のパネルが完成しました！

✅ ZoomCanvas → UIを管理するキャンバス
✅ BackGroundPanel → 透明な背景パネル（操作制限）
✅ BlackPanel → 画面を暗くする黒い背景
✅ ZoomObjParent → ズームアイテムを表示するオブジェクト

この後のステップでは、ズーム用のPrefabを作成し、スクリプトを実装していきます！

3. アイテムズーム用のPrefab設定

アイテムをズーム表示するために、事前にズーム用のPrefab（プレハブ）を作成しておきます。このPrefabを ZoomObjParent に配置することで、+ボタンを押したときに拡大表示されるようになります。

1. ズーム用Prefabの作成

まず、ズームしたいアイテム（例：鍵）のPrefabを作成します。

① 3Dモデルの準備

• Hierarchy ウィンドウで ズーム表示したいアイテム（鍵や道具など）を作成 します。
  • 例えば 3D Object → Cube を選び、鍵のモデルを設定します。
• 既存の3Dモデル（アセットストアなどから取得したもの）がある場合、それを使用してもOKです。

② Prefab化

1. Project ウィンドウで 「Prefab」フォルダを作成。
2. 作成した3Dオブジェクトを Prefab フォルダに ドラッグ＆ドロップ して、Prefab化します。

3. ズーム表示時の調整

ズーム表示したときに、アイテムが適切な位置・サイズ・向きで表示されるように調整します。

① ZoomObjParent に配置

• ZoomPanel スクリプトで ZoomObjParent にPrefabが生成される ので、ここに配置されることを想定してサイズや角度を調整 します。（例：Scale,X400,Y400,Z400）

② アイテムの位置や角度の調整

1. ZoomPrefab を ZoomObjParent に 手動で一度配置 して、適切なサイズや回転になるよう調整。
2. BlackPanelにめり込まないように Z の位置を調整。
3. ZoomObjParentを回転したときに見やすい角度になるか確認。

4. アイテムデータベースの編集

アイテムをズームできるようにするために、アイテムデータベースにズーム用のPrefabを設定できるようにします。
これにより、各アイテムごとに専用のズームオブジェクトを持たせることができます。

① Itemスクリプトを編集

まずは、 Item クラスにズーム用のPrefabを設定するための変数を追加します。
UnityのInspector上でPrefabを設定できるようにするために、 Serializable を指定しておきましょう。

🔹 修正するスクリプト: Item.cs

using System;
using UnityEngine;

[Serializable] // Inspectorで表示できるようにする
public class Item
{
    // アイテムの種類
    public enum Type
    {
        key,    // 鍵
        Cube,   // 立方体
        Circle, // 円形
        // アイテムを追加する場合ここに書き足す
    }

    // タイプを持たせる
    public Type type;
    // アイテムの画像
    public Sprite sprite;
    // ズーム用のPrefab
    public GameObject ZoomPrefab; // ← 追加

    // コンストラクタ
    public Item(Item item) 
    {
        this.type = item.type;
        this.sprite = item.sprite;
    }  
}

✅ GameObject ZoomPrefab; を追加することで、アイテムごとにズーム用のPrefabを持たせられるようになります。

② アイテムデータベースにズーム用Prefabを設定

次に、 New Item Database Entity の Inspector にズーム用Prefabを設定する項目が追加されていることを確認しましょう。

1. Unityエディタで New Item Database Entity を開く
2. items のリストの各アイテムを開く
3. ZoomPrefab の項目に、ズーム時に表示させたいPrefabをドラッグ＆ドロップで設定する

5. ズーム機能を実装するスクリプト

アイテムを選択した状態で「+ボタン」を押すと、そのアイテムがズーム表示される機能をスクリプトで実装していきます。ズームパネルを表示し、ズーム対象のアイテムを適切に配置する処理を作成します。

① ズームパネルのスクリプト作成

まず、ZoomPanel というスクリプトを作成し、ズームパネルの管理を行います。

スクリプトを作成

1. プロジェクトウィンドウを右クリック
2. 「Create」→「C# Script」 を選択
3. スクリプト名を「ZoomPanel」に変更

スクリプトの内容

using UnityEngine;

public class ZoomPanel : MonoBehaviour
{
    [SerializeField] GameObject backGroundPanel; // 背景パネル
    Canvas canvas;
    [SerializeField] Transform zoomObjParent; // ズームするオブジェクトの親オブジェクト
    GameObject zoomItem; // ズーム表示するアイテム

    public static ZoomPanel instance;

    private void Awake()
    {
        instance = this; // インスタンス化
    }

    private void Start()
    {
        canvas = GetComponent<Canvas>();
        HideZoomPanel(); // 最初は非表示にする
    }

    // +ボタンが押されたときの処理
    public void OnClickZoom() 
    {
        Item selectItem = ItemBox.instance.GetSelectItem();
        if (selectItem == null)
        {
            return; // アイテムが選択されていなければ処理しない
        }
        backGroundPanel.SetActive(true); // 背景パネルを表示
        ShowItem(); // アイテムを表示
    }

    // ズーム用のアイテムを表示する
    void ShowItem() 
    {
        if(zoomItem != null) 
        {
            Destroy(zoomItem); // すでにある場合は削除
        }
        Item selectItem = ItemBox.instance.GetSelectItem();
        zoomItem = ItemDatabase.instance.CreateZoomItem(selectItem.type); // アイテムを生成
        zoomItem.transform.SetParent(zoomObjParent, false); // ズーム用の親オブジェクトに設定
    }

    // ズームパネルを非表示にする
    public void HideZoomPanel() 
    {
        backGroundPanel.SetActive(false); 
    }

    // カメラの設定（ズーム時に使用）
    public void setRenderCamera(Camera camera)
    {
        canvas.worldCamera = camera;
    }
}

スクリプトのポイント

• OnClickZoom()
  • ItemBox から選択中のアイテムを取得し、ズームパネルを表示します。
  • backGroundPanel.SetActive(true); で背景パネルを有効化。
• ShowItem()
  • すでにズーム表示しているアイテムがある場合は削除。
  • ItemDatabase からアイテムのズームPrefabを取得して生成。
  • zoomObjParent の子オブジェクトとして配置。
• HideZoomPanel()
  • backGroundPanel.SetActive(false); でズーム画面を非表示にする。
• setRenderCamera(Camera camera)
  • ズームパネルがカメラを認識できるように設定。

②スクリプトの適用

作成した ZoomPanel スクリプトを ZoomCanvas にアタッチしてください。

インスペクターで設定する項目

1. BackGroundPanel → ZoomCanvasの子オブジェクト（黒いパネル）
2. ZoomObjParent → BlackPanelの子オブジェクト（アイテムを表示するためのオブジェクト）

6. +ボタンとズーム解除ボタンの設定

アイテムを選択したときに**+ボタンを押すことでアイテムをズームできるようにし、ズーム画面を閉じるためのズーム解除ボタン（CloseButton）**を作成します。

1. +ボタンにスクリプトを設定

+ボタン をクリックすると ZoomPanel.OnClickZoom() が実行されるように設定します。

1. ZoomButton を選択。
2. Inspector の Button コンポーネント内の OnClick() を開く。
3. 「＋」ボタンをクリックして、新しいイベントを追加。
4. ZoomPanel をヒエラルキーからドラッグして OnClick() のオブジェクトに設定。
5. OnClick() のドロップダウンメニューから ZoomPanel -> OnClickZoom() を選択。

✅ これで、+ボタンを押すと選択中のアイテムがズームされるようになります！

2. ズーム解除ボタン（CloseButton）の作成

1. ヒエラルキー（Hierarchy）ウィンドウで BlackPanel を選択。
2. BlackPanel の子オブジェクトとして Button を追加（右クリック → UI → Button）。
3. 名前を CloseButton に変更。

3. ボタンのデザイン調整

1. Inspector の Button コンポーネントを開く。
2. Text の変更
   • Text オブジェクトの Text を「X」にする。
   • または、 Image コンポーネントを変更してアイコン風にする（例えば、白い「✖」マークの画像を設定）。
3. サイズと位置の調整
   • Rect Transform の PosX と PosY を調整して、右上 に配置。

4. ズーム解除の処理を設定

1. CloseButton を選択。
2. Inspector の Button コンポーネント内の OnClick() を開く。
3. 「＋」ボタンをクリックして、新しいイベントを追加。
4. ZoomPanel をヒエラルキーからドラッグして OnClick() のオブジェクトに設定。
5. OnClick() のドロップダウンメニューから ZoomPanel -> HideZoomPanel() を選択。

✅ これで、Xボタンを押すとズーム画面が閉じるようになります！

7. スクリプトの追加・編集

ここでは、アイテムズーム機能を実装するために、ItemDatabase、ItemBox、CameraManager のスクリプトを修正していきます。
ズームオブジェクトを適切に生成し、選択したアイテムを取得できるようにし、カメラの切り替えをスムーズに行う方法を解説します。

1. ItemDatabase スクリプトの修正

まず、ItemDatabase にズームオブジェクトを生成するメソッド CreateZoomItem() を追加します。
このメソッドは、選択したアイテムの ZoomPrefab を取得し、実際に生成する役割を持ちます。

using UnityEngine;

public class ItemDatabase : MonoBehaviour
{
    // どこからでもアクセスできるようにする
    public static ItemDatabase instance;

    private void Awake()
    {
        instance = this;
    }

    [SerializeField] ItemDatabaseEntity itemDatabaseEntity = default;

    // アイテムを生成するメソッド
    public Item Spawn(Item.Type type)
    {
        for (int i = 0; i < itemDatabaseEntity.items.Count; i++)
        {
            Item itemData = itemDatabaseEntity.items[i];
            if (itemData.type == type)
            {
                return new Item(itemData);
            }
        }
        return null;
    }

    // **ズーム用アイテムを生成するメソッドを追加**
    public GameObject CreateZoomItem(Item.Type itemType)
    {
        for (int i = 0; i < itemDatabaseEntity.items.Count; i++)
        {
            Item itemData = itemDatabaseEntity.items[i];
            if (itemData.type == itemType)
            {
                return Instantiate(itemData.ZoomPrefab);
            }
        }
        return null;
    }
}

追加したポイント

✅ CreateZoomItem() を追加し、アイテムの種類 (Item.Type) を受け取って ZoomPrefab を生成する処理を実装
✅ Instantiate(itemData.ZoomPrefab); でプレハブをインスタンス化
✅ itemDatabaseEntity から一致するアイテムを検索し、該当する ZoomPrefab を返す

このメソッドを ZoomPanel の ShowItem() 内で使用し、選択したアイテムをズーム表示します。

2. ItemBox スクリプトの修正

次に、現在選択中のアイテムを取得するメソッド GetSelectItem() を ItemBox に追加します。
これにより、ズーム機能を使用する際に、どのアイテムをズームすべきかを判定できるようになります。

using UnityEngine;

public class ItemBox : MonoBehaviour
{
    //アイテムボックスがすべてのスロットを取得
    [SerializeField] Slot[] slots = default;

    //どこからでもアクセスできる
    public static ItemBox instance;

    Slot selectSlot;
    private void Awake()
    {
        instance = this;
    }

    //クリックしたらアイテムを受け取る
    public void SetItem(Item item)
    {
        for (int i = 0; i < slots.Length; i++)
        {
            Slot slot = slots[i];
            if (slot.IsEmpty())
            {
                slot.Set(item);
                break;
            }
        }
    }

    //クリックしたら選択状態にする
    public void OnSlotClick(int position)
    {
        //アイテムがない場合実行しない
        if (slots[position].IsEmpty())
        {
            return;
        }
        //一度BackPanelを全て消す
        for (int i = 0; i < slots.Length; i++)
        {
            slots[i].HideBackPanel();
        }
        //クリックしたスロットのBackPanelを表示する
        slots[position].OnSelect();
        //選択アイテムとして取得する
        selectSlot = slots[position];
    }

    //アイテムを選択しているかを判定する関数
    public bool CheckSelectItem(Item.Type useItemType)
    {
        if (selectSlot == null)
        {
            return false;
        }
        if (selectSlot.GetItem().type == useItemType)
        {
            return true;
        }
        return false;
    }

    public void UseSelectItem()
    {
        selectSlot.RemoveItem();
        selectSlot = null;
    }

    public Item GetSelectItem()
    {
        if (selectSlot == null)
        {
            return null;
        }
        return selectSlot.GetItem();
    }
}

追加したポイント

✅ GetSelectItem() を追加し、選択されているスロットからアイテムを取得する処理を実装
✅ selectSlot.GetItem(); で現在選択されているアイテムを返す
✅ selectSlot が null の場合は null を返し、選択中のアイテムがないことを示す

この GetSelectItem() は ZoomPanel の OnClickZoom() で呼び出され、+ボタンを押したときにズーム対象のアイテムを取得します。

3. CameraManager スクリプトの修正

最後に、ズーム機能の際に ズームパネルを非表示にする処理と、メインカメラとズームカメラの切り替え を実装します。
ズーム中は MainCamera を無効にし、 ZoomCamera を有効にすることで、ズーム専用のカメラが機能するようにします。

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);
        ZoomPanel.instance.setRenderCamera(mainCamera);
    }

    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);
        ZoomPanel.instance.setRenderCamera(zoomCamera);
    }
}

まとめ

✅ ItemDatabase に CreateZoomItem() を追加
✅ ItemBox に GetSelectItem() を追加
✅ CameraManager にズームパネルの表示・カメラ切り替え機能を追加

これで、ズーム機能の実装に必要なスクリプト修正が完了しました！

8. ズームしたアイテムを回転させる

アイテムのズーム機能が実装できたら、次はズームしたアイテムをマウス操作で回転できるようにしていきます。回転機能があると、プレイヤーがアイテムを360度確認できるので、隠されたヒントを発見しやすくなります。

アイテム回転用スクリプトの作成

ズーム中のアイテムをマウスドラッグで回転させるには、ZoomObjParent の Transform を変更するスクリプトを作成します。

1. 新しいスクリプトを作成

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

作成した ItemRotation スクリプトを開いて、以下のコードを入力してください。

using UnityEngine;

public class ItemRotation : MonoBehaviour
{
    [SerializeField] Transform zoomObjParent;
    [SerializeField] Transform zoomCanvas;

    // 回転の速度
    public float speed = 100;

    // マウスをドラッグしてズームしたアイテムを回転させる
    private void Update()
    {
        if (Input.GetMouseButton(0)) 
        {
            float dy = -Input.GetAxis("Mouse X") * speed;
            float dx = Input.GetAxis("Mouse Y") * speed;

            // X軸とY軸の回転
            zoomObjParent.RotateAround(transform.position, zoomCanvas.transform.rotation * Vector3.up, dy);
            zoomObjParent.RotateAround(transform.position, zoomCanvas.transform.rotation * Vector3.right, dx);
        }             
    }
}

2. スクリプトの解説

このスクリプトでは、Update() の中でマウスのドラッグ操作を検出し、それに応じて zoomObjParent を回転させています。

• Input.GetMouseButton(0)
  → 左クリック（0）を押している間、マウスの動きを取得
• Input.GetAxis("Mouse X")
  → マウスの横方向の移動量を取得（右が正、左が負）
• Input.GetAxis("Mouse Y")
  → マウスの縦方向の移動量を取得（上が正、下が負）
• speed
  → 回転速度を調整するための変数。数値を大きくすると速く回転する

RotateAround() を使って、zoomCanvas の回転軸を基準にオブジェクトを回転させています。

3. ゲームオブジェクトにスクリプトを追加

作成した ItemRotation スクリプトを ZoomObjParent にアタッチします。

1. ヒエラルキーウィンドウ で ZoomObjParent を選択
2. Inspector で Add Component をクリック
3. ItemRotation を検索して追加

4. インスペクターで設定を行う

ZoomObjParent に ItemRotation スクリプトをアタッチしたら、Inspector で以下の設定を行います。

1. ZoomObjParent にドラッグ＆ドロップ
   • zoomObjParent のフィールドに ZoomObjParent を設定
2. ZoomCanvas にドラッグ＆ドロップ
   • zoomCanvas のフィールドに ZoomCanvas を設定
3. 回転速度の調整
   • speed の値を 100 に設定（後で調整可能）

5. 動作確認と調整

ゲームを再生して、ズームしたアイテムをマウスドラッグで回転させてみましょう。

• 左クリックを押しながら マウスを左右に動かす → アイテムが水平方向に回転
• 左クリックを押しながら マウスを上下に動かす → アイテムが垂直方向に回転

もしアイテムが思うように回転しない場合は、以下の点をチェックしてください。

✔ ZoomObjParent の Z の位置を調整して BlackPanel にめり込まないようにする
✔ speed の値を変更して回転速度を調整する
✔ zoomCanvas の Transform の向きを確認する

これで、ズームしたアイテムをマウス操作で回転させる機能が追加できました！プレイヤーはアイテムを拡大表示しながら、好きな角度で確認できるようになります。

よくある質問（FAQ）

Unity3D脱出ゲームの作り方⑧｜4桁のパスワードでドアを開く

Unityで脱出ゲームの4桁パスワードギミックを作成！ダイヤル式ロックの仕組みをEventTriggerとC#スクリプトで簡単に実装する方法を解説。初心者でもわかりやすい手順付き。

cbagames.jp

Unity初心者必見！Asset Storeで手に入るゲーム制作が楽になるおすすめアセット

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

cbagames.jp

関連記事:

【Unity入門】2Dシューティングゲームを簡単に作る手順を解説【Unity初心者向け】2Dブロック崩しゲームの作り方を解説！Unity初心者が最初に作るべきゲーム5選！楽しく学べるステップバイステップガイド【Unity】2Dタワーディフェンスゲームの作り方②！武器配置と弾の発射を実装Unityで簡単2Dゲームを作る方法！初心者向けチュートリアル【Unity2D】にゃんこ大戦争風タワーディフェンスゲームの作り方！初心者向け完全ガイドUnityのエラーを解決！初心者がよくつまずくポイントと対処法Unityでアセットが読み込めない時の対処法！インポート時のエラー完全ガイド【実践】UnityでRPGのスキルシステムを作る！ステートマシンで簡単管理Unity3D脱出ゲームの作り方⑥｜ボタンでカメラを回転＆ズームする方法