部屋を3つ以上に増やすにはどうすればいいですか？

追加のroomパネルを作成し、スクリプトの座標変更処理を修正しましょう。例えば、this.transform.localPosition = new Vector2(-3000, 0); のように移動先の座標を調整します。

矢印ボタンが動作しません

Buttonコンポーネントの OnClick() に、適切な関数 (OnLeftAllow() / OnRightAllow()) を設定しているか確認してください。

背景画像が透けて見えるのはなぜですか？

ImageコンポーネントのA（アルファ値）が255になっているか確認してください。

【Unity入門】2D脱出ゲームを作ろう！パート1：部屋の作成と移動処理

1. はじめに
2. 部屋の作成
3. 部屋の移動処理
4. まとめ
よくある質問（FAQ）
1. 関連記事:

1. はじめに

Unityでゲームを作ってみたいけど、どこから始めればいいかわからない……そんな初心者の方に向けて、今回は 2D脱出ゲームの作り方 を解説していきます！

脱出ゲームといえば、部屋の中に隠されたヒントを見つけて、仕掛けを解きながら進んでいくゲームですよね。今回は、そんな シンプルな脱出ゲーム を作る方法を、 初心者向け にステップごとに解説していきます。

この記事では、まず 「部屋の作成」と「移動処理」 を実装します。具体的には、以下の内容を学んでいきます。

✅ 部屋を作るためのUI設定（CanvasやPanelの使い方）
✅ 複数の部屋を作成し、矢印ボタンで移動できるようにする
✅ C#スクリプトを使って部屋の切り替えを実装する

これをマスターすれば、2D脱出ゲームの基本的な構造が作れるようになりますよ！
次回以降の記事では、 アイテムの取得やギミックの実装 など、ゲームを面白くする仕掛けも追加していきます。

🌟 完成イメージ 🌟

スワイプではなく、矢印ボタンを押して部屋を移動できる
画面サイズはスマホ向けの「1080×1920」の縦画面
シンプルなUIで操作しやすい設計

今回のチュートリアルで使用する素材は、 以下のサイトからダウンロードできます。
📌 脱出ゲーム用フリー素材
📌 いらすとや

Unityで2D脱出ゲームをゼロから作ることもできますが、すでに基本的な仕組みが用意されたアセットを活用すれば、もっとスムーズに開発できます。
例えば、「2D Escape Engine」 を使えば、部屋の移動やギミックなどがすぐに実装できるので、手間をかけずにオリジナルの脱出ゲームを作れます！

それでは、早速 部屋の作成 から始めていきましょう！

2. 部屋の作成

2D脱出ゲームを作るために、まずは「部屋」となるUIパネルを作成していきます。部屋の管理には**Panel（パネル）**を使い、スクロールやフェードなどの特殊な処理を使わずに、横にスライドさせることで部屋を切り替えるようにします。

2-1. Panelの作成

まずは、すべての部屋を管理する親パネルを作成します。

手順

「Hierarchy」ウィンドウで、右クリック → UI → Panel を選択
作成したPanelの名前を「Panelparent」に変更
「Inspector」ウィンドウで設定を変更
- RectTransform
  - Anchor（アンカー） を center（中央）に設定
- Imageコンポーネント
  - 使わないので削除（右クリック→Remove Component）

2-2. Canvasの設定

次に、Panelparentの表示設定を適切にするためにCanvasの設定を変更します。

手順

「Hierarchy」ウィンドウで「Canvas」を選択
「Inspector」ウィンドウで設定を変更
- RenderMode（レンダーモード） → Screen Space - Camera
- Render Camera（レンダー用カメラ） → Main Camera に設定

2-3. 部屋を作る

続いて、ゲーム内の部屋となるパネルを作成していきます。

手順

「Panelparent」の子オブジェクトとして、新しいPanelを作成
- 右クリック → UI → Panel を選択
- 名前を「room0」に変更
- RectTransformのAnchor を center に設定
- Imageコンポーネントは削除
「room0」の子オブジェクトとして背景パネルを作成
- 右クリック → UI → Panel
- 名前を「backGround」に変更
- Imageコンポーネントを有効化し、背景画像を設定
- Alpha値（A）を255 に変更（透明度をなくす）

2-4. 部屋を複製して増やす

部屋を複数作るために、「room0」を複製します。

手順

「room0」を選択して Ctrl + D で複製
新しい部屋の名前を「room1」に変更
room1の位置を変更
- RectTransform の X座標を -1500 に設定

2-5. 各部屋の背景を設定

最後に、部屋ごとに異なる背景を設定します。

手順

「room0」の「backGround」のImageコンポーネントで背景画像を設定
「room1」の「backGround」も同様に背景を設定

これで、部屋を2つ作成し、スライドで切り替える準備ができました。次のステップでは、左右の矢印ボタンを作成し、部屋を移動できるようにしていきます！

3. 部屋の移動処理

脱出ゲームでは、部屋を移動できるようにすることが重要です。ここでは、左右の矢印ボタンを作成し、それをクリックすることで部屋を切り替える処理を実装していきます。

3-1. 矢印ボタンの作成

まずは、部屋を移動するための「左右の矢印ボタン」を作成します。

① 矢印ボタンの画像を設定

Canvasの下に Image を作成します。
作成したImageに 矢印画像 を設定します。
Add Component から Buttonコンポーネント を追加します。

② 空のオブジェクトを作成

Hierarchy ウィンドウで 右クリック → Create Empty を選択。
新しくできたオブジェクトの名前を allows に変更。
先ほど作成した左右の矢印ボタンを「allows」の子オブジェクトにする。

この手順で、矢印ボタンをまとめて管理しやすくなります。

3-2. 移動用スクリプトの作成

次に、矢印ボタンを押したときに、部屋が移動するスクリプトを作成します。

① スクリプトを作成

Project ウィンドウを右クリックし、Create → C# Script を選択。
スクリプト名を PanelChanger に変更。
作成したスクリプトを Panelparent にアタッチ。

② スクリプトの記述

スクリプトを開いて、以下のコードを入力します。

using UnityEngine;

public class PanelChanger : MonoBehaviour
{
    public GameObject _LeftArrow;  // 左矢印ボタン
    public GameObject _RightArrow; // 右矢印ボタン

    private void Start()
    {
        // 初期状態では左矢印を非表示、右矢印のみ表示
        HideArrows();
        _RightArrow.SetActive(true);
    }

    public void HideArrows()
    {
        // すべての矢印を非表示にする
        _LeftArrow.SetActive(false);
        _RightArrow.SetActive(false);
    }

    public void OnLeftAllow() 
    {
        // 左矢印が押されたとき、room0に移動
        HideArrows();
        _RightArrow.SetActive(true);
        this.transform.localPosition = new Vector2(0, 0);
    }

    public void OnRightAllow() 
    {
        // 右矢印が押されたとき、room1に移動
        HideArrows();
        _LeftArrow.SetActive(true);
        this.transform.localPosition = new Vector2(-1500, 0);
    }
}

3-3. スクリプトを適用する

① 矢印ボタンにスクリプトをアタッチ

Hierarchy ウィンドウで Panelparent を選択。
Inspector の PanelChanger スクリプトにある _LeftArrow と _RightArrow に、それぞれ左矢印と右矢印のボタンをドラッグ＆ドロップ。

② ボタンのOnClick()を設定

左矢印ボタンを選択し、Inspector の Button コンポーネントを確認。
OnClick() の + をクリックし、新しいイベントを追加。
Panelparent を OnClick() にドラッグし、PanelChanger → OnLeftAllow を選択。
右矢印ボタンも同じように設定し、OnRightAllow を選択。

3-4. 実装結果の確認

これで、矢印ボタンをクリックすると、部屋が移動するようになりました。

右矢印を押すと Panelparent が X = -1500 に移動（room1が表示）。
左矢印を押すと X = 0 に戻る（room0が表示）。

4. まとめ

今回の記事では、Unityで2D脱出ゲームを作るための基本的な部屋の作成方法と部屋を移動する処理について解説しました。

まず、Panelparent を作成し、その下に room0 や room1 といった部屋のパネルを配置しました。さらに、背景画像を設定し、部屋ごとに異なる見た目にする方法も紹介しました。Canvasの設定 では、RenderMode を Screen Space – Camera に変更し、CanvasScaler の ReferenceResolution を 1080×1920 に設定することで、縦画面に適したUIのスケーリングを実現しました。

次に、部屋を移動できる矢印ボタン を作成し、PanelChanger スクリプトを使って部屋を切り替える処理を実装しました。矢印ボタンの OnClick() に OnLeftAllow() や OnRightAllow() を設定することで、ボタンを押したときに Panelparent の座標が移動し、スムーズに部屋が切り替わるようになりました。

今回の実装をまとめると、以下のような流れになっています。

✅ 部屋を作成する

Panelparent を作成し、部屋（room0、room1 など）をその子オブジェクトとして配置
room0 の下に backGround を作成し、背景画像を設定
room1 を複製し、X座標を -1500 に設定

✅ 部屋の移動機能を作成する

矢印ボタンを Canvas の下に配置
ボタンを allows という空のオブジェクトの子オブジェクトにする
PanelChangerスクリプト を作成し、Panelparent の localPosition を変更する

この方法を応用すれば、部屋を3つ以上に増やすことも可能 です。また、ボタンを Panelparent ではなく room0 や room1 の子オブジェクトとして配置すれば、各部屋ごとに独自の移動ボタンを設定することもできます。

次回の記事では、オブジェクトの配置やアイテムの取得・使用といったインタラクティブな要素の追加 を解説していきます。部屋の移動ができるようになったので、これからはゲームらしく「アイテムを見つけて脱出する仕組み」を実装していきましょう！

今回は部屋の作成と移動処理を実装しましたが、脱出ゲームには アイテムの取得・使用、パズルの仕組み など、さまざまな要素が必要になります。
「2D Escape Engine」 を使えば、こういった仕組みをすぐに実装できるので、開発時間を大幅に短縮できます！
次回以降も、自作での実装方法を解説しますが、「手っ取り早く脱出ゲームを作りたい！」という方は、アセットの活用も検討してみてください。

それでは、次回もお楽しみに！🚪🔑✨