この記事では Escape the room game (脱出ゲーム) の謎解きUIの作り方について解説します。なおここで解説するのはコンピューターゲーム(デジタル)での脱出ゲームで、リアル脱出ゲーム(アナログ)のものとは、やや考え方が変わることにご注意ください
目次
脱出ゲームにおける謎解きUIの考え方
デジタルゲームでの謎解きUIについての考え方は以下のとおりです
- デジタルな入力で実装できる謎(答え)にする
- 入力可能な答えが複数用意されている
アナログの脱出ゲームでは、
- 紙を折って、ある部分をハサミで切ると答えになる
- 鏡で光線を反射させて、ある部分を照らすと答えが出てくる
- 磁石を使って遠隔操作で鉄の物体を移動させる
などアナログな道具や装置で、答えを導き出すものがあります。
もちろんデジタルゲームでもこれらを実装することはできますが、実装コストが高く使い回しが効かない(頑張って実装しても流用して別の謎解きに使うのが難しくてコスパが悪い)ので、個人的には避けています。
また、3択(ABCのいずれかが正解など)でイベント終了時に答え合わせをする、といった問題も不向きです。それがダメというわけではないですが、デジタルの場合は答えが正解かどうかをすぐに判定する仕組みが必要とされることが多く、3回繰り返すことで正解がわかる、という方法で答えが出るような問題はあまりよろしくないからです。
デジタルにおける謎解きUIは以下のものがおすすめです
- 謎の答えが「3〜5文字程度の文字」となるもの
- オブジェクトの操作をある順序で行うと答えになるもの
ある程度、総当たりで答えが出せることを考えて「3〜5文字」あたりがいいのかと思っています。ただヒントの出し方にもよるので、おおよその値ですね。
もしくはクリックの順番で答えを判定する方法があります。(回転ダイヤルやゲージなど)
具体的なUIの例
ダイヤル入力式
脱出ゲームで最も汎用的に使えるのが「上下ボタンのダイヤル式」だと考えています。
![](http://2dgames.jp/wp-content/uploads/2022/01/spin.gif)
この方式は「上下」のダイヤル(ボタン)をクリックすることで、暗号の答えを入力するUIとなります。
Godot Engineでの実装方法は以下のページにまとめておきました
![](https://2dgames.jp/wp-content/uploads/2022/01/number-160x160.gif)
![](https://2dgames.jp/wp-content/uploads/2022/08/dial.gif)
上記画像は「4文字」を入力するものですが、ダイヤル式は「数字」「画像」「記号」「矢印」など、どんな文字にでも置き換えることができます。
例えば、画像を上下で切り替える方式にすることで、画像を選ぶ方法にすることもできます。
![](https://2dgames.jp/wp-content/uploads/2022/08/EscapeGameEditor.png)
「画像だと判定が難しそう……」と思うかもしれませんが、例えば画像の並びに対して「番号(数字)」を割り振ります。
![](https://2dgames.jp/wp-content/uploads/2022/08/pictures_png___384_x_384px_72dpi_200_0__.png)
こうすることで、正解が「ねずみ」「すいか」「かめ」であれば、”204″ が内部(プログラム)的な正解の番号となります。
ダイヤル式の派生
ダイヤル式が汎用的に使える……というのは作る側からすると良いですが、ダイヤル式ばかり使うと、遊ぶ側からすると同じ見た目でがっかりしてしまいます。
そこで、見た目のバリエーションを増やす例を上げていきます
数字入力に特化したUIです。金庫や厳重な扉など、暗証番号を入力するような場面で用意すると雰囲気が出て良いと思います。
![](http://2dgames.jp/wp-content/uploads/2022/01/29.gif)
少しひねりを入れると、特定の数字はパネルアイテムを入手するまで押せなくする、特定の数字がかすれていて何度も押された形跡がある(つまり正解の番号)、といった使い方も考えられます。
Godot Engine での実装方法は以下のページに書いています
![](https://2dgames.jp/wp-content/uploads/2022/02/safe_lock-1-160x160.gif)
これもダイヤルの1つですが、回転できるようにしたものです。回転というと少し実装が難しいように思えるかもしれませんが、実際には特定の回転値に対応する画像を一定のパターン用意して実装するのが簡単で良いです。
![](https://2dgames.jp/wp-content/uploads/2022/08/dial-1.gif)
![](https://2dgames.jp/wp-content/uploads/2022/08/Notification_Center-1024x590.png)
この画像は移動を「8方向」のみとして、それぞれに番号が割り振られています。そして、このボタンをクリックするたびに時計回りに回るようにパターンを切り替えます。
そうすると、例えば正解が「右上・下・左」とすれば「146」が内部的な答えの値となります
回転ダイヤルとほぼ同じ考え方ですが、こちらは「数」が答えとなる場合に利用できます。クリックするたびにゲージの数が1つ増え、最大に達したら0に戻るような動作で良いと思います。
![](https://2dgames.jp/wp-content/uploads/2022/08/bar.gif)
![](https://2dgames.jp/wp-content/uploads/2022/08/Dial_-_Godot_Engine.png)
ゲージの数がそのまま数字として判定できると思います。
問題の例としては、「不自然に置いてある石が積み上がっている数」だったり、「ミニチュアとして飾られている建物の階数」などが良いかもしれません。横向きのバーであれば、方向に意味をもたせたりする謎も作れそうです。
回転式ダイヤルに似ていますが、秒針・分針・時針が連動して動くので、実装が少しややこしいです。
「時間」または「4桁の数字」が答えとなる場合に使用することができます
![](http://2dgames.jp/wp-content/uploads/2022/08/clock.gif)
こちらの画像は「左右のボタン」を押すと30分単位で時計の針が動く、という例となります。
という感じで、秒針を入れると細かくなりすぎるので、分以上の単位で「15分単位」または「30分単位」にするのが良さそうです。
Godot Engine での実装方法は以下のページに書きました
![](https://2dgames.jp/wp-content/uploads/2022/08/clock.gif)
最近は据え置き型の電話は見なくなりましたが、プッシュホン式であれば電卓UIに近いので難しくないと思います。
![](https://2dgames.jp/wp-content/uploads/2022/08/%E9%9B%BB%E8%A9%B1-915x1024.png)
ボタンを一定の順番で押す
ボタン(スイッチ)を一定の順番で押すものについて、リストアップしてみます
左右に配置された2つのスイッチを用意して、それを一定の順序で押すと謎が解けるものです。
![](https://2dgames.jp/wp-content/uploads/2022/08/button.png)
単純に「◀・▶・◀・◀・▶・▶」という暗号でも良いですし(正解は「左・右・左・左・右・右」の順番でスイッチを押す)、
「左:134、右:256」という少しひねりを入れた暗号でも良いかもしれません(数字は方向に対応するボタンを押す順番で、正解は「左・右・左・左・右・右」)
「左右」という謎解きを解くUIとしては、左右に回転させられるギミックも考えられます。
![](https://2dgames.jp/wp-content/uploads/2022/08/image-33.png)
「位置情報」を使うスイッチの別の例としては、部屋の構造をスイッチの配置として、それぞれの階には特徴的なオブジェクトが配置されており、それが配置されている部屋に該当するものを押す、という謎解きも考えられます。
![](https://2dgames.jp/wp-content/uploads/2022/08/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A_numbers-3.png)
![](https://2dgames.jp/wp-content/uploads/2022/08/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A_numbers-4.png)
先程のスイッチは「位置」と「順番」の暗号でしたが、ボタンの色を増やすことで「色」と「順番」の暗号が作れます
![](https://2dgames.jp/wp-content/uploads/2022/08/button2.png)
これをどのような暗号にするかですが、例えば以下のような数字のメモを配置しておき、
![](https://2dgames.jp/wp-content/uploads/2022/08/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A_numbers.png)
別の場所にこのようなメモを配置します。
![](https://2dgames.jp/wp-content/uploads/2022/08/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A_numbers-1.png)
そしてこの2つのメモを組み合わせて……
![](https://2dgames.jp/wp-content/uploads/2022/08/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A_numbers-2.png)
「青→黄色→赤→緑」の順番で押すのが正解となる暗号です
「位置」情報を「音階」に置き換えたものが鍵盤です。例えば「返校」というゲームではピアノの鍵盤を一定の順番で押すという謎解きがありました
![](http://2dgames.jp/wp-content/uploads/2022/08/image-4-e1659777488443.png)
オブジェクトの操作
だいぶ用途は限られますが、脱出ゲームはクリックゲームでもあるので、クリックした文字を消すという方法で、このような問題を出すことができます
![](https://2dgames.jp/wp-content/uploads/2022/08/72474869-75e3-4e34-8171-50aeac980aa0_png___1280_x_600px_72dpi_100_0__-1024x478.png)
カタカナの「イ」を3つ消すことで「コタエ」の文字を残すのが正解となります。
![](https://2dgames.jp/wp-content/uploads/2022/08/%E3%82%B3%E3%82%BF%E3%82%A8.png)
不正解の場合に文字をもとに戻す必要があるので、その理由付け(ファンタジー設定や、黒板ではなく映像にするなど)が必要となりますが、それができれば謎解きとして使うことができそうです。
入手したアイテムを特定の場所に配置し、その一致条件によって正解かどうかを判定する方法があります。
例えばギリシャ神話になぞらえて、以下の謎解きをさせるのも良いかもしれません
- アテナには「アイギスの盾」をもたせる
- ポセイドンには「三叉の鉾」をもたせる
- バッカスには「お酒」をもたせる
このような仕組みの場合、何をもたせているかで見た目を変えると、画像作成のコストが大きな負担となります。そこで画像を引き気味にして、クリックしたらテキストで「アテナは『アイギスの盾』を持っている……」と説明するのも1つの方法です。
なお、脱出ゲームを作るセオリーとしては、「ギリシャ神話を知らないと解けない」といったナゾナゾ的な問題はマズイので、部屋のどこかにギリシャ神話に関するヒントを配置しておく必要があります。
RPGツクールのような見下ろし型のフィールドを探索するタイプ、もしくは Action-adventure game (アクション・アドベンチャーゲーム) であれば、Sokoban (倉庫番) のようにオブジェクトを押して、特定の位置まで移動させる、といった Puzzle game (パズルゲーム) 要素のものが考えられます。
![](http://2dgames.jp/wp-content/uploads/2021/10/picture_pc_fd6fa4ae3ab982f30c0696780baa37cc.gif)
パズルの例としては、古典的ですが、扉を開くスイッチの上まで箱を移動させるというものです。
![](https://2dgames.jp/wp-content/uploads/2022/08/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A_numbers-5.png)
オブジェクトを移動させることが可能なゲームで考えられるのが、「電力」「水の流れ」などをブロックに置き換えて、それを連結させるパズルです。
![](https://2dgames.jp/wp-content/uploads/2022/08/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A_numbers-6.png)
他には、「半径の範囲に電力を発生させる装置」を連結させるもの。(グリッド上の直線ではなく、オブジェクトの周囲に電力を発生させる装置を並べる)
電力が発生する半径の範囲に小さいものと大きいものがあると、障害物と組み合わせて、配置場所を考えて解くパズルとなりそうです。
![](https://2dgames.jp/wp-content/uploads/2022/08/thunder-1024x620.jpg)
床の上にプレイヤーが乗ると色が「赤→緑→青→赤→…」とループして変化する、というパズルも良いかもしれません。
![](https://2dgames.jp/wp-content/uploads/2022/08/Notification_Center-4.png)
または「水道管ゲーム」のように、水道管(パイプ)を「移動・回転」するパズルが考えられます。
![](https://2dgames.jp/wp-content/uploads/2022/08/https___www_takaratomy_co_jp_product_release_pdf_tomy_03_p2003_022_pdf.png)
![](https://2dgames.jp/wp-content/uploads/2022/08/water.jpg)
水道管(パイプ)を直接押して回転されたり、スイッチを押すと回転する、といったギミックが考えられ、それによりパイプを連結させると謎が解けるパズルとなります。
脱出ゲームではありませんが、BioShock ではハッキングを開始すると水道管を始点から終点までつなぐという謎のミニゲームが開始されます。
![](http://2dgames.jp/wp-content/uploads/2022/10/image-18-1024x576.png)
タイルをめくると水道管パネルが出現し、それを手札としてストックしながら入れ替えるパズルとなっています。
関連記事
今回紹介した謎解きやパズル要素は Horror game (ホラーゲーム) のような Adventure game (アドベンチャーゲーム) と相性が良いです。以下の記事はホラーゲームを作るときのゲームシステムや表現方法について書いています。
![](https://2dgames.jp/wp-content/uploads/2021/11/horror-game2-1-2-160x160.png)
脱出ゲームを作る上で、有益そうな記事をまとめてみました。脱出ゲームを作るメリットやデメリット、アイデア発想法や難易度の調整方法などの情報があります。
![脱出ゲームの記事まとめ](http://2dgames.jp/wp-content/uploads/2021/11/banner-2-160x160.png)
テキストを読むことを中心としたアドベンチャーゲーム、 Visual novel (ノベルゲーム) のシナリオの書き方については以下の記事にまとめています。
![](https://2dgames.jp/wp-content/uploads/2022/01/novel-160x160.png)