はじめての脱出ゲームメーカー(前編)

初心者向け

シーンをつくろう

アイテムが完成したので、ここからは「シーン」を作っていきましょう!

「シーン」とはゲームの「場面」です。脱出ゲームメーカーでは、例えば、「リビングのシーン」や「寝室のシーン」など複数のシーンを紙芝居のように切り替えて表示させることで部屋から部屋へ移動しているように表現しています。

シーンを作ると一気に

ゲームっぽくなるよ!

今回のチュートリアルで必要なシーンは2つです。

  • 「部屋のシーン」
  • 「クリアのシーン」

では、この2つのシーンを作ってみましょう。

部屋のシーンをつくろう

まずはドアや鍵がある「部屋のシーン」を作りましょう!

下のメニュー画面赤枠「シーン管理」をタップしてください。

メニュー画面
メニュー画面

「シーン管理」画面では「シーン」を新規作成したり編集したりすることができます。

下の画面のように「scene001」が自動的に作成されていますので、赤枠「scene001」をタップしてください。

シーン管理画面
シーン管理画面

下は「scene001」の編集画面です。背景の画像がまだ何も指定されていないので真っ白ですね。

画面左下赤枠「背景選択」をタップしてください。

シーン編集画面
シーン編集画面

ここからは「鍵」の画像をスマホからアップロードした方法とそっくりだよ。

スマホ端末に保存してある背景の画像をアップロードしましょう。

下の画面赤枠「端末内画像」をタップしてください。

画像選択画面

スマホから背景画像を探し出して、下の画面赤枠「Ok」をタップしてください。

画像選択画面
画像選択画面

下の画像選択画面に「image002」として背景画像がアップロードされました。

ここでは画像がアップロードされただけで、まだ背景の画像に指定できていません。

下の画面赤枠「image002」をタップして背景画像を指定しましょう。

画像選択画面
画像選択画面

下の画面のように「scene001」に部屋の背景画像を指定することができました。

ここがゲームのメイン舞台となるわけです。

シーン編集画面
シーン編集画面

いったんここでシーンに名前を付けたいので画面左上の赤枠「戻る」をタップして「シーン管理画面」に戻りましょう。

アイテムに名前を付けた時を同じように「シーン管理画面」では「scene001」となっている個所を長押しして「シーン名変更画面」を開きましょう

シーン名変更画面
シーン名変更画面

ここでは「部屋のシーン」と名前を付けておきましょう。

シーン管理画面
シーン管理画面

上の画面のように表示されれば「部屋のシーン」の下地が完成です。

この「シーンの名前」もプレイヤーには見えないの?

うん。アイテムの名前と一緒で、プレイヤーには見えないから分かりやすい名前にしておくといいよ。

クリアのシーンをつくろう

「部屋のシーン」とは別に、もうひとつ「クリアのシーン」を作りましょう。

作り方は「部屋のシーン」と同じです。下の画面赤枠「シーン追加」をタップしてください。

シーン管理画面
シーン管理画面

ここから先は「部屋のシーン」作成と全く同じ手順です。

  1. 「背景選択」をタップ
  2. 「端末内画像」をタップ
  3. スマホから「クリアのシーン背景画像」を選択
  4. アップロードした画像をもう一度タップ

下の画面のようになれば「クリアのシーン」は完成です。このシーンにも名前を付けておきましょう。赤枠「戻る」をタップしてください。

シーン編集画面
シーン編集画面

下の画面のとおり「scene002」と自動で名前が付けられているので赤枠「scene002」を長押しして名前を「クリアのシーン」へ変更しましょう。

シーン管理画面
シーン管理画面

下の画面のように表示されればゲームに必要な2つのシーンの基礎が完成しました!

シーン管理画面
シーン管理画面

開始シーンと終了シーンを指定しよう

開始シーンと

終了シーン??

脱出ゲームメーカーでは、「開始」と「終了」のシーンを必ず1つずつ決めないといけないんだ。

どんな作品でも必ず

「開始シーン」からはじまって、プレイヤーが

「終了シーン」に移動した時点でゲームは終了となるんだ。

開始シーンはゲームのオープニング、

終了シーンはゲームのエンディングってこと?

うーん、まあ…

チュートリアルの段階ではそういった考えで大丈夫だよ。

ひっかかる言い方だなぁ…

「開始シーン」と「終了シーン」は簡単に指定することができます。

現時点で「シーン管理画面」は下のような状態です。

「部屋のシーン」左上に赤枠のような「開始」という表示が出ています。これは「開始シーン」に指定されている、というマークです。

シーン管理画面
シーン管理画面

今回のゲームでは「部屋のシーン」=「開始シーン」であっているので、このままにしておきましょう。

さて、「開始シーン」はすでに出来ているので、「終了シーン」を指定しましょう。

下の画面赤枠「クリアのシーン」を長押ししてみてください。

シーン管理画面
シーン管理画面

下の画面のようになるので、画面赤枠「終了シーンに指定」をタップしてください。

シーン管理画面
シーン管理画面

下の画面のように「クリアのシーン」右下に「終了」と表示されていれば「開始シーン」と「終了シーン」は正しく指定できました!

次の項目からは「部屋のシーン」にドアやテーブルの画像を貼っていきましょう!

画像を配置しよう

まだ背景しかない「部屋のシーン」にドアやテーブルを置こう!

「ドア」や「テーブル」を部屋に配置する作業は、具体的にはシーンに画像を貼り付ける作業になります。

まずは、「ドア」の画像から配置してみましょう!

下のシーン管理画面で赤枠「部屋のシーン」をタップしてください。

シーン管理画面
シーン管理画面

「部屋のシーン」編集画面が開いたら画面下側にある赤枠「画像」を何度か連続してタップしてみてください。

「画像」をタップするたびに、画面上部の「追加編集」という表示が「追加編集→拡大縮小→移動」と変化することを確認してください。

シーン編集画面
シーン編集画面

まずは、「ドア」の画像を部屋に追加したいので、「画像:追加編集」と表示されている状態で、画面の真ん中あたりを一度タップしてください。

すると次のような画面になります。

画像選択画面
画像選択画面

アイテムや背景の時と同じように画像を選択する画面になりました。

今までと違うところは「シーン部品」という表示がされている箇所です。

シーン部品??

シーンの中に貼り付ける画像、つまりシーンを組み立てる部品という意味で「シーン部品」と呼ばれているよ。

テーブルとかの家具や、部屋に落ちているアイテムが「シーン部品」になることが多いよ。

では、上の画面赤枠「端末内画像」をタップしてください。すると次のようになります。

画像選択画面
画像選択画面

赤枠「Ok」をタップしたら次の画像のようにドアの画像がアップロードされたことを確認してください。

画像選択画面
画像選択画面

アップロードされたドアの画像をもう一度タップして画像を指定しましょう。

すると次の画面のようになるのですが…

シーン編集画面
シーン編集画面

うわ!

ドアの画像が大きすぎて画面がほとんど見えない!

ここが少し不便なところで、画像を追加するとなぜか目いっぱい大きく表示されてしまうんだ。

これじゃあ作業しづらいので、いいやり方を紹介するね。

上の画面のようになったら「画像:追加編集」となっている状態で、画面の真ん中あたりを長押ししてみてください。

次のような画面が表示されます。

画面編集画面
画像編集画面

この画面では画像の位置やサイズを数値で指定することができます。

とにかくこのままではドアの画像が大きすぎてはみ出しているので、とりあえず小さくしてすみっこに寄せてみましょう。

以下のように数値を入れなおしてみてください。

  • X→100
  • Y→100
  • 幅→80
  • 高さ→145

Xは横、Yは縦の位置を表しているよ。

幅と高さはとりあえず、初期値の10分の1にしておいたよ。

このように入力したら「Ok」をタップしましょう。次のようなります。

シーン編集画面
シーン編集画面

画面は見やすくなったけど、

今度はドアが小さくなりすぎて、位置も全然違うね…

ここからは指で簡単に位置を調整していくよ

ここで画面下の「画像」ボタンを何度かタップして画面上の表示を「画像:移動」に変更しましょう。

「画像:移動」の状態では指で直接画像を移動させることができます。

ドアの画像を指でドラッグして部屋の右下に移動させましょう。だいたい次の画面のような位置に移動させてください。

シーン編集画面
シーン編集画面

ここでまた「画像」ボタンをタップして画面上の表示を「画像:拡大縮小」にしてください。

この状態では、指で直接画像の大きさを変えることができます。

画像の角や辺の部分をタップしながら動かし、ちょうどよい大きさにしてみてください。

位置がずれてしまったら、また「画像:移動」モードにして位置も直していきましょう。

だいたい下のような感じでドアが置けたら、ドアの作成は完了です。

シーン編集画面
シーン編集画面

シーンに配置した画像を削除したいときは、削除したい画像を長押しするとメニューが出てくるのでそこから「削除」を選ぶと削除することができます。

ここまでドアを例にして画像の配置の仕方を説明してきました。

残り2つの画像「テーブル」と「鍵」も全く同じ方法で部屋に配置してみましょう。

あれ?「テーブル」は確かに新しく追加しなきゃだけど、

「鍵」はさっき作ったよね?

確かに「アイテム」としての鍵はもう作ってあるけれど、シーンに配置する部品、つまり「シーン部品」としての鍵は全く別物なんだ

じゃあテーブルに置いてある「鍵」も、また画像をアップロードして、大きさと位置を整えて…って作業をするのか…

練習だと思ってやってみよう!

下の画面のようになればゲームの画像はすべて整えることができました!

シーン編集画面
シーン編集画面

最後に、画像を配置するときの最大の注意点!!

画像の重なり順は先に配置したものが一番奥側になります!

え?どうゆうこと??

下の画像は「鍵」の画像を先に配置した後、「テーブル」の画像を配置したときの画面だよ。

シーン編集画面
シーン編集画面

あ!「鍵」が「テーブル」の

下になっちゃってる!

複数の画像をシーンに配置するときは、奥に表示されるものから順に追加していこう!

これ、間違えちゃったらどうやって直すの?

…誠に残念ながら、いったん画像を削除して、もう一度順番に画像を入れなおすしかないんだ。

ひいい!

聞いておいて良かった…

まとめ

ここまでお読みいただき誠にありがとうございます!

さて、ここまででシーンやアイテムの作り方、それに伴う画像の取り込み方や調整方法を解説してきました。

これでチュートリアル前編は終了になります。

ゲームをロボットに例えるのであれば、前編を終了した現時点で、ロボットの体が組み立てられた状態です。

後編ではいよいよロボットの頭脳(プログラム)を作っていきましょう!

前編だけで結構疲れてきちゃったよ…

じゃあいったんここで区切りが良いから休憩しよう。

ゲーム作りは長い旅路。

休憩しながら進めよう!

慣れてくれば今ご紹介した前編の内容はあっという間にできるようになるのですが、はじめてのことは何をするにも時間がかかるものです。

セーブポイントのつもりで一息入れてから後編へ進みましょう!

コメント

タイトルとURLをコピーしました