# 2. はじめての脱出ゲーム作成 \\ ## 新規ゲームの作成 さっそくはじめての脱出ゲームを作成してみましょう。アプリのトップ画面下部の「脱出ゲームを作る」をタップします。初回のみサンプルゲームのセットアップが行われます。 ※脱出ゲームメーカー Webサイトでは作成を行うことができません。作成は[iOS](https://apps.apple.com/jp/app/id1361925112?l=ja&ls=1)/[Android](https://play.google.com/store/apps/details?id=jp.co.springboard.sbescapegamemaker)アプリ版のみで行うことができます。 また、Android版については、以下の許可についての確認ダイアログが表示されます。作成に必要となりますので許可を選択してください。 * 端末上の写真、メディアファイルへのアクセス * 写真の作成とビデオの録画に関するアクセス 作成中ゲーム一覧で「新規作成」をタップ、ゲーム名を入力すると、メニュー画面に遷移します。「戻る」ボタンをタップして、前の画面に戻るとゲームが一覧に追加されています。 {{ ::help_helloworld1.png?nolink&600 |}} あらためて、作成したゲームをタップして、メニュー画面に進みます。 ## シーンの作成 {{ ::help_helloworld2.png?nolink&600 |}} 作成に関する機能が並んだメニュー画面です。まずは「シーン管理」をタップして表示します。 {{ ::help_helloworld3.png?nolink&600 |}} 「シーン追加」をタップするとシーン編集画面が表示されるので、一旦「戻る」ボタンをタップして前の画面に戻ると、scene2が追加されています。 scene2を長押しすると下記のようなメニューが表示されるので「終了シーンに指定」を選びます。 {{ ::help_helloworld10.png?nolink&600 |}} これでscene1は開始シーン、scene2が終了シーンとなりました。ゲームは開始シーンから始まり、終了シーンに到達するとクリアになります。 なお、scene1、2にシーン背景画像が設定されていないので真っ白になっています。 {{:outline_info_black_18dp.png?nolink|}}作成画面では画面右上に「ヒント」ボタンがあります。タップするとその画面に関する説明や操作方法についての案内が表示されますので、各画面のヒントをチェックしてみてください。 {{:outline_info_black_18dp.png?nolink|}}誤って不要なイベントを追加した場合は、当該のシーンを長押しするとメニューが表示されて削除を行うことができます。 {{ ::help_helloworld4.png?nolink&600 |}} scene1をタップして、シーン編集画面を表示します。 左下の「背景選択」をタップすると、画像選択画面が表示されます。こちらでシーンの背景画像を指定します。背景画像はスマホのカメラで撮影するか、または端末内画像（iOSのカメラロールやAndroidのギャラリーなどの画像選択画面が表示されます）から予め用意した画像や写真を選択して読み込みます。 撮影した画像を選択すると上記のようになります。 {{outline_info_black_18dp.png?nolink}}スマホから取り込まれた背景画像は450x579pxに変換されます。縦横いずれかの短い方を基準にしてサイズを合わせて、はみ出た部分については切り取られます。 {{ ::help_helloworld5.png?nolink&600 |}} scene2も同様に背景選択からカメラで撮影した画像を指定します。scene2は終了シーンなので、こちらがクリア時の画面表示になります。 ## イベントの作成 {{ :help_helloworld6.png?nolink&600 |}} scene1のシーン編集画面に戻ります。赤枠の表示が「イベント:追加編集」になっていることを確認して、画面のドアノブのあたりをタップします。当該箇所にタップイベントが追加されて、下記の左の画面に自動で遷移します（イベントは未追加の状態）。 {{ ::help_helloworld7.png?600 |}} ①「イベント追加」をタップすると、右のイベント選択画面が表示されます。 ②の「メッセージ表示」をタップしてテキスト入力欄に「ドアを開けてみよう」と入力してOKボタンを押すと、「メッセージ表示」イベントが追加されます。 再度、「イベント追加」をタップして、イベント選択画面で③の「移動」を選択します。シーン選択画面が表示されますので、secene2を選択すると上記左の画面のような状態になります。 {{:outline_info_black_18dp.png?nolink|}}誤って不要なイベントを追加した場合は、当該のイベントを長押しすると削除確認のダイアログが表示されて、削除を行うことができます。 これで、scene1のドアノブの付近にタップイベントが追加されて、タップされた場合にイベントが上から順番に実行されます。 プレイ画面でscene1のドアノブをタップすると、メッセージが表示されて、その後scene2に移動します。scene2は終了シーンに指定されていますので、ゲームクリアになります。 ## テストプレイとアップロード {{ ::help_helloworld8.png?600 |}} メニュー画面に戻り、「テストプレイ」をタップして実行してみましょう。上記の流れでクリアになれば２シーンのシンプルな脱出ゲームの完成です。 {{ ::help_helloworld9.png?600 |}} テストプレイをクリアすると、「アップロード・更新」が実行できるようになります。 OKボタンを押して、アップロードが成功すれば作成したゲームが脱出ゲームメーカーのアプリ、WEBサイトのトップ画面の新着に表示され、アプリとWEBサイトでプレイすることができるようになります。 複数のシーンや様々なイベント、フラグとIF分岐の条件式、シーン部品画像、アイテムを追加して、探索や謎解きをゲームに追加して、あなたのオリジナルの脱出ゲームを発表してください。\\ 「作成中ゲーム一覧」にある「サンプル脱出ゲーム1」や「脱出ゲームチュートリアル」を開くと、シーンやイベント、フラグやアイテムがどのように組み合わせられているかを見ることができるのでお試しください。 画面の詳しい使い方やイベントについては、[[start|目次]]から当該の項目を選んで参照してください。 ## 作成の役に立つサイトなど ### 素材サイト 脱出ゲームメーカーでの利用にぴったりなシーン背景、家具などのイラスト画像について[ふらぐらむOFFさん](https://twitter.com/OFF40601536)が画像を公開されていますのでご参照ください。\\ \\ [◇脱出ゲームで使うのにちょうどよい素材サイト◇](https://escape-material.sakura.ne.jp/top01.html)\\ サイト管理人 ふらぐらむOFF さん\\ \\ [素材紹介01](https://dasshutsu.games/game/-LyiyegnmlITC0Ie5IbD)\\ 作者: [ふらぐらむOFF さん](https://dasshutsu.games/author/-LjeKhDz67_scV9BDuwh)\\ \\ \\ \\ ブログサイトの「[カグア！毎日更新！生活に役立つレビューブログ](https://www.kagua.biz/)」様で脱出ゲームにぴったりの写真素材を配布されています。\\ \\ [ホラーゲームに使えそうな廃墟な画像素材206枚410MBを商用フリーで公開します](https://www.kagua.biz/seisaku/sozai/escape-game-free-image-material.html)\\ \\ \\ \\ 無料でも利用できるイラストとシルエットのサイトです。\\ \\ [シルエットAC](https://www.silhouette-ac.com/)\\ イラストが無料の「シルエットAC」は、フリーイラスト素材のダウンロードサイト。\\ \\ [イラストAC](https://www.ac-illust.com/)\\ 無料イラスト・アート・年賀状・年賀・画像などの素材がフリー。かわいいフリーイラストも豊富！\\ \\ \\ \\ \ ### 書籍 脱出ゲームについての総合的な作り方に関する参考としては以下の書籍が大変おすすめです。ストーリーや設定の考え方、謎の製作の方法について簡易な文章で解説されています。\\ \\ 田中一広 (著)\\ [テンプレート式 脱出ゲームの作り方](https://amzn.to/2S1tIH2)\\ \\ \\ \\ ### 参考サイトとチュートリアルゲーム ユーザーさんが作成された下記のブログ記事、チュートリアル作品のゲームでも基本機能の解説やテクニックが説明されていますのでご参照ください。 千同寺万里 さん(https://twitter.com/shingakosaka)の脱出ゲームメーカー解説ブログ [1 脱出ゲームメーカーとは](https://ameblo.jp/shingakosaka/entry-12417437672.html) [2 制作のはじめかた](https://ameblo.jp/shingakosaka/entry-12417442319.html) [3 タップイベントの使い方](https://ameblo.jp/shingakosaka/entry-12417461189.html) [4 普通のフラグの使い方・スイッチの作り方](https://ameblo.jp/shingakosaka/entry-12417474690.html) [5-1 数値フラグの使い方・ダイヤル錠の作り方1](https://ameblo.jp/shingakosaka/entry-12417645492.html) [5-2 数値フラグの使い方・ダイヤル錠の作り方2](https://ameblo.jp/shingakosaka/entry-12417654130.html) [6 アイテムの超基本](https://ameblo.jp/shingakosaka/entry-12418576491.html) [7 アイテムの状態変化](https://ameblo.jp/shingakosaka/entry-12422505848.html) ふらぐらむOFF さん(https://escape-material.com)の脱出ゲームメーカー解説ブログ [1-1 はじめての脱出ゲームメーカー（前編）](https://escape-material.com/2022/01/25/%e3%81%af%e3%81%98%e3%82%81%e3%81%a6%e3%81%ae%e8%84%b1%e5%87%ba%e3%82%b2%e3%83%bc%e3%83%a0%e3%83%a1%e3%83%bc%e3%82%ab%e3%83%bc%ef%bc%88%e5%89%8d%e7%b7%a8%ef%bc%89/) [1-2 はじめての脱出ゲームメーカー（後編）](https://escape-material.com/2022/01/25/%e3%81%af%e3%81%98%e3%82%81%e3%81%a6%e3%81%ae%e8%84%b1%e5%87%ba%e3%82%b2%e3%83%bc%e3%83%a0%e3%83%a1%e3%83%bc%e3%82%ab%e3%83%bc%ef%bc%88%e5%be%8c%e7%b7%a8%ef%bc%89/) [2 「選択肢」の使い方](https://escape-material.com/2022/02/09/sentaku/) [3 IF分岐（AND）と（OR）の違いを理解しよう](https://escape-material.com/2022/03/17/bunki01/) [4 合言葉やパスワードを入力させてみよう](https://escape-material.com/2022/04/29/moji/) [5-1 ゲームに音を付けてみよう（基礎編）](https://escape-material.com/2022/05/30/sound01/) [アイテム所持数に制限をもたせるチュートリアル](https://dasshutsu.games/game/-Ly3TDZpfPiaMxscAWCu)\\ 作者: アーモンドアイ さん \\ アイテム所持数を意図的に制限する方法について詳しく解説されています。 [未完成の脱出ゲームからの脱出](https://dasshutsu.games/game/-LsVwvB4I0SLBEH5JkmF) 作者: ふらぐらむOFF さん IF分岐やフラグの使い方について詳しく解説されています。 [文字入力の方法(知らない方向け)(非公式)](https://dasshutsu.games/game/-LlqFBvgoq_uxLxMExr4) 作者: ソーダ 文字入力イベントの使い方について詳しく解説されています。 [脱出ゲームの作り方（非公式）](https://dasshutsu.games/game/-Ldr6jAeIpRIO24zczpi) 作者: 千同寺 万里 仕掛け扉、ダイヤル錠、アイテム取得の作り方について詳しく解説されています。 [暗証番号キー(押した数字表示機能付)サンプル](https://dasshutsu.games/game/-LQ04oxrohCsJJfzJEHH) 作者: EsK 暗証番号キーの作り方について詳しく解説されています。 [チュートリアル:暗証番号キーの作り方](https://dasshutsu.games/game/-LMKDsC4ZaMmAukWaAMT) 作者: mackey 暗証番号キーの作り方について詳しく解説されています。 [テスト：マルチエンドのようなもの](https://dasshutsu.games/game/-LLIulOFjQVXSXV5CiV0) 作者: ミイズミ クリアシーンの画像を変更してマルチエンド風のクリアシーンの作り方について詳しく解説されています。 [マルチエンド風にする方法](https://dasshutsu.games/game/-LZ32jNSGk0Qjo5CNOBP) 作者: createKM ３パターンのマルチエンド風のクリアシーンの作り方について詳しく解説されています。 [チュートリアル:ダイヤル錠の作り方](https://dasshutsu.games/game/-LLEelufrMz0Gzvea-IY) 作者: Dark Hawaii ダイヤル錠の作り方について詳しく解説されています。 [基本的な鍵の作り方](https://dasshutsu.games/game/-LLAKyorns9lGeabY0Kk) 作者: Dark Hawaii 鍵アイテムと扉の作り方について詳しく解説されています。