クリック時の反応がないのですが？

EventTriggerが設定されているか、スクリプトが正しくアタッチされているか確認してください。

数字が更新されません！

numberText に正しくTextMeshProの参照が設定されているか確認してください。

パスワードを変更したいのですが？

int[] Answer = { 1, 2, 3, 4 }; の数値を変更するか、Publicを付けてInspectorで設定できるようにしてください。

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

1. はじめに
2. オブジェクトの準備
3. NumberPanelのスクリプト
4. PasswordPanelのスクリプト
よくある質問（FAQ）
1. 関連記事:

1. はじめに

脱出ゲームを作るときに欠かせないのが、パスワードロックのギミックです。ドアを開けるためにプレイヤーが数字を入力し、正しいコードを入力すると解除されるシステムは、謎解き要素を強化するのにピッタリです。

この記事では、4桁のダイヤル式パスワードロックをUnityで作成する方法を解説します。数字がクリックで変わる仕組みと正解するとクリア判定が出る処理を、EventTriggerとC#スクリプトを使って実装していきます。

初心者の方でもわかりやすいように、オブジェクトの配置からスクリプトの書き方まで丁寧に説明するので、一緒に作ってみましょう！

2. オブジェクトの準備

まずは、パスワードパネルを構成するオブジェクトを作成していきます。
大まかな流れとしては、「パスワードパネル（PasswordPanel）」の中に「数字のダイヤル（NumberPanel）」を4つ配置する構造になります。

① PasswordPanelを作成

Hierarchy（ヒエラルキー）ウィンドウで**右クリック →「Create Empty」**を選択
名前を 「PasswordPanel」 に変更
Inspector（インスペクター）ウィンドウで以下の設定を行う
- Position（位置）：X=0, Y=0, Z=0
- Rotation（回転）：X=0, Y=0, Z=0
- Scale（スケール）：X=1, Y=1, Z=1（変更不要）

② BackPanelを作成（パスワードの背景）

**HierarchyでPasswordPanelを選択した状態で右クリック →「3D Object」→「Cube」**を作成
名前を 「BackPanel」 に変更
Inspectorで以下の設定を行う
- Position：X=0, Y=1, Z=0
- Scale：X=3, Y=1, Z=0.1（横長にしてパネルっぽく）

👉 これがパスワードパネルの背景になります！お好みで色などを変更してみてください。

③ NumberPanelを作成（数字のダイヤル部分）

Hierarchyで右クリック →「3D Object」→「Cube」 を作成
名前を 「NumberPanel」 に変更
Inspectorで以下の設定を行う
- Position：X=-1.2, Y=1, Z=0.05
- Scale：X=0.5, Y=0.5, Z=0.1（数字が入るサイズに調整）
BackPanelの子オブジェクトにする。

👉 これが1桁分のパスワードダイヤルになります！

④ 数字を表示するTextMeshProを追加

Unityの使い方⑫TextMeshProで日本語を表示できるようにしよう

HierarchyでNumberPanelを選択した状態で右クリック →「3DObject」→「Text – TextMeshPro」 を作成
名前を 「NumberText」 に変更
Inspectorで以下の設定を行う
- Text（テキスト）：0
- Font Size（フォントサイズ）：適宜調整（見やすい大きさに）
- Alignment（配置）：中央揃え（Center）
- Rect Transform：NumberPanelの中央に配置

👉 これでダイヤルの数字が表示されるようになります！

⑤ NumberPanelを複製して4つ並べる

HierarchyでNumberPanelを選択し、Ctrl + D（MacはCmd + D）で複製
複製したNumberPanelをBackPanelの中に配置
各NumberPanelのPosition（X座標）を変更して4つ並べる
- 1つ目：X=-1.2
- 2つ目：X=-0.4
- 3つ目：X=0.4
- 4つ目：X=1.2

👉 これで4桁のダイヤル式パスワードが完成！

💡 ここまでの確認ポイント

✅ PasswordPanelの中にBackPanelがあるか？
✅ BackPanelの中に4つのNumberPanelが並んでいるか？
✅ NumberPanelの中にTextMeshPro（NumberText）が追加されているか？
✅ NumberPanelにEventTriggerが追加されているか？

👉 この状態で、次のステップ「スクリプトの作成」に進みます！

3. NumberPanelのスクリプト

次に、クリックすると数字が変わるスクリプトを作成していきます。
このスクリプトを各ダイヤル部分（NumberPanel）に適用することで、プレイヤーが数字を操作できるようになります。

① C#スクリプトを作成

まず、新しいC#スクリプトを作成します。

プロジェクトウィンドウを右クリック
「Create」→「C# Script」を選択
スクリプトの名前を 「NumberPanel」 に変更

② スクリプトの記述

作成した NumberPanel.cs を開いて、以下のコードを入力してください。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using TMPro;

public class NumberPanel : MonoBehaviour
{
    [SerializeField] TMP_Text numberText; // 表示する数字
    public int number = 0; // 内部の数字

    // クリックされたら数字を増やす
    public void OnClick() 
    {
        number++; // 数字を1つ増やす

        // 10以上になったら0に戻す
        if(number >= 10) 
        {
            number = 0;       
        }

        // TextMeshProのテキストを更新
        numberText.text = number.ToString();    
    }
}

③ スクリプトの解説

このスクリプトでは、クリックするたびに 表示されている数字を1つ増やす 処理を行っています。

🔹 number 変数：
→ 数字のカウントを管理する変数（初期値は 0）

🔹 OnClick() メソッド：
→ クリックされるたびに数字が増える 処理
→ number が 10以上になったら 0 にリセット（0〜9の数字をループ）

🔹 numberText.text = number.ToString();
→ number の値を TextMeshProに反映

④ スクリプトをアタッチ

作成したスクリプトを 各NumberPanelオブジェクト に適用します。

Hierarchyウィンドウで「NumberPanel」を選択
Inspectorウィンドウの「Add Component」ボタンをクリック
「NumberPanel」スクリプトを追加

⑤ TextMeshProとの接続

スクリプト内の numberText に NumberPanel内のTextMeshProをアタッチ します。

HierarchyでNumberPanelの子オブジェクト（TextMeshPro）を選択
Inspectorで「TextMeshPro – Text (UI)」コンポーネントを確認
NumberPanelオブジェクトのInspectorを開く
「NumberText」の欄にTextMeshProをドラッグ＆ドロップ

✅ これでスクリプトとUIの連携が完了！

⑥ クリックイベントの設定

クリックしたときに OnClick() を実行するため、EventTriggerを設定 します。

Hierarchyで「NumberPanel」を選択
Inspectorの「Add Component」ボタンをクリック
「EventTrigger」を追加
「Add New Event Type」ボタンを押して「Pointer Click」を追加
「+」ボタンをクリック
NumberPanelをドラッグ＆ドロップ
「No Function」→ 「NumberPanel」→「OnClick()」を選択

✅ これでクリック時に数字が変わるようになりました！

⑦ 動作確認

ここまでの設定が終わったら、ゲームを再生して動作確認 をしてみましょう。

ゲームを再生（▶ボタンをクリック）
NumberPanelをクリック
数字が 0 → 1 → 2 … 9 → 0 とループすれば成功！

うまく動作しない場合は設定やコライダーのサイズやパネルの位置などを調整してみてください！

⑧ まとめ

NumberPanelのスクリプトを作成し、クリックで数字を変更できるようにした
OnClick() メソッドで数字を 0〜9 の範囲でループ
EventTriggerを使ってクリックイベントを設定
TextMeshProを使って数字を表示＆更新

これで、ダイヤル式のパスワード入力パネルが完成しました！
次のステップでは、4桁のパスワードが正しく入力されたか判定するスクリプト を作成していきます。

4. PasswordPanelのスクリプト

次に、4桁のパスワードが正しく入力されたかを判定するスクリプトを作成します。このスクリプトを使えば、ユーザーが設定した正しい数字をそろえると、特定のアクション（例：ドアが開く）が実行されるようになります。

① PasswordPanelスクリプトを作成

まず、PasswordPanelというC#スクリプトを作成します。

スクリプトの作成手順

プロジェクトウィンドウを右クリック
「Create」→「C# Script」を選択し、スクリプトの名前を「PasswordPanel」に変更します。
スクリプトを開く
作成した「PasswordPanel」スクリプトを開き、以下のコードを入力してください。

② パスワード判定のスクリプト

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PasswordPanel : MonoBehaviour
{
    // 正解のパスワード（例：1, 2, 3, 4）
    int[] Answer = { 1, 2, 3, 4 };
    
    // NumberPanel（4つのダイヤル）を参照するための配列
    [SerializeField] NumberPanel[] numberPanels = default;

    // ボタンが押されたときにパスワードをチェック
    public void OnClickButton() 
    {
        if (CheckClear()) 
        {
            Debug.Log("Clear"); // パスワードが正解ならクリア処理
        }
    }

    // 入力されたパスワードが正しいか確認する
    bool CheckClear() 
    {
        for(int i = 0; i < numberPanels.Length; i++) 
        {
            // 各ダイヤルの数字が正解の配列と一致しなければfalseを返す
            if (numberPanels[i].number != Answer[i]) 
            {
                return false;
            }
        }
        return true; // すべて一致していればtrueを返す
    }
}

③ スクリプトの解説

このスクリプトでは、プレイヤーが入力した4桁の数字と、設定した正解のパスワードが一致しているかを判定しています。

int[] Answer = { 1, 2, 3, 4 };
→ これは正解のパスワードを定義している配列です。ここを書き換えれば、好きなパスワードを設定できます。
[SerializeField] NumberPanel[] numberPanels = default;
→ 4つのNumberPanel（ダイヤル）をInspectorから設定できるようにするための配列。
OnClickButton()
→ ボタンが押されたときに CheckClear() を呼び出し、パスワードの正誤を判定。
CheckClear()
→ ループで4つのNumberPanelの数字をチェックし、すべて正解していれば true を返す。

④ PasswordPanelスクリプトの適用

次に、このスクリプトをBackPanelにアタッチし、パスワード入力システム全体を管理します。

スクリプトの適用手順

BackPanelを選択
Inspectorの「Add Component」から「PasswordPanel」スクリプトを追加
NumberPanels（4つのダイヤル）をドラッグ＆ドロップで設定
- PasswordPanelスクリプトの「NumberPanels」に4つのNumberPanelをセットする

⑤ パスワード入力ボタンを作成

パスワードの正誤を判定するために、**「決定ボタン」**を追加します。

ボタンの作成方法

Hierarchyウィンドウで「3DObject」→「Cube」を作成
ボタンの名前を「CheckButton」に変更
位置や色、Sizeを調整してBackPanelの子オブジェクトにする。
Inspectorの「Add Component」ボタンをクリック
「EventTrigger」を追加
「Add New Event Type」ボタンを押して「Pointer Click」を追加
「+」ボタンをクリック
PasswordPanelをドラッグ＆ドロップ
「No Function」→ 「PasswordPanel」→「OnClickButton()」を選択

⑥ 動作確認

ゲームを再生
NumberPanelをクリックして数字を変更
1,2,3,4に設定して「決定」ボタンを押す
コンソールに「Clear」のログが出れば成功！

⑦ クリア後の処理を追加

パスワードをクリアしたら、ドアを開けるなどの処理を追加できます。

ドアを開ける処理を追加する

[SerializeField] Animator animator = default;

public void OnClickButton() 
{
    if (CheckClear()) 
    {
        animator.Play("DoorOpen");
    }
}

正解したときにアニメーションを再生すれば、ドアが開くように見える。

まとめ

PasswordPanelスクリプトを作成し、パスワードの正誤を判定
スクリプトをBackPanelに適用し、ダイヤルを設定
決定ボタンを作成し、パスワード判定処理を実装
パスワードが正解したらドアを開ける処理を追加可能

この仕組みを応用すれば、さまざまなパスワードギミックを実装可能！
好きな数字に変更したり、制限時間を追加するなど、ゲームに合わせたアレンジを加えてみてください！位置やサイズを調整したいときはPasswordPanelのtransformを調整すれば簡単に全体を調整できます。

よくある質問（FAQ）

Q クリック時の反応がないのですが？: A
EventTriggerが設定されているか、スクリプトが正しくアタッチされているか確認してください。

Q 数字が更新されません！: A
numberText に正しくTextMeshProの参照が設定されているか確認してください。

Q パスワードを変更したいのですが？: A
int[] Answer = { 1, 2, 3, 4 }; の数値を変更するか、Publicを付けてInspectorで設定できるようにしてください。

1. はじめに

2. オブジェクトの準備

① PasswordPanelを作成

② BackPanelを作成（パスワードの背景）

③ NumberPanelを作成（数字のダイヤル部分）

④ 数字を表示するTextMeshProを追加

⑤ NumberPanelを複製して4つ並べる

💡 ここまでの確認ポイント

3. NumberPanelのスクリプト

① C#スクリプトを作成

② スクリプトの記述

③ スクリプトの解説

④ スクリプトをアタッチ

⑤ TextMeshProとの接続

⑥ クリックイベントの設定

⑦ 動作確認

⑧ まとめ

4. PasswordPanelのスクリプト

① PasswordPanelスクリプトを作成

スクリプトの作成手順

② パスワード判定のスクリプト

③ スクリプトの解説

④ PasswordPanelスクリプトの適用

スクリプトの適用手順

⑤ パスワード入力ボタンを作成

ボタンの作成方法

⑥ 動作確認

⑦ クリア後の処理を追加

ドアを開ける処理を追加する

まとめ

よくある質問（FAQ）

関連記事: