【脱出ゲームの作り方】3.画面の遷移について

脱出ゲームの作り方：目次

目次

前回の記事

はじめに

さて、第3章の始まりです。
この章では、脱出ゲームでよくある、「○○をクリックしたらアップになった！！」
という仕組みの実現方法を解説していきます。

…実はといいますと、この仕組み、2章で解説した仕組みさえ理解していれば、
簡単に実装することが出来ます。
要するに、room1やroom2へ遷移した場合と同様に、
予めアップ画面専用のラベルを設定しておいて、gotoAndPlayで遷移すればいいわけですね。

画像を準備しよう！

それでは実際にFLASHを作成していきましょう。
ここでは、前回のFLASHに追加する形で機能を拡張していきます。
「前回作成した4つの部屋のうち、部屋1にベッドが設置してあって、
ベッドの下をクリックすると、アップ画面になる」というものを作ろうと思います。

今回、新たに追加する絵は以下の4種類です。
・bed.pdr（ベッドの画像）
・room1_under_bed.pdr（ベッド下の拡大画像）
・arrow3.pdr（下向き矢印）
・red.bmp（赤い正方形の画像、大きさは10px×10px）

ベッドの画像は、マカイモンが愛用しているベッドを流用することにします(笑)
ベッド下の拡大画像に関してですが、やろうと思えば、
部屋1の画像とベッドの画像を拡大することで再現することが出来ますが、
私は改めて拡大画面の画像を用意することが多いです。
下向き矢印ですが、これはアップ画面から通常画面に戻る際に使うボタンです。
最後に"red.bmp"。これは単なる赤い小さな正方形です。
これは、いわゆる「クリックポイント」として利用します。

実装しよう！

具体的な流れとしては以下の通り。

1.room1にベッドの画像を追加
2.さらにroom1にred.bmpをボタンとして追加
（このとき適宜大きさを変更しておく）
3.red.bmpの不透明度を0に設定
4.アップ画面用のラベル・画像・下向き矢印を追加
（ラベル名はroom1_under_bedとします。）
5.red.bmpのActionScroptを記述
（red.bpmをクリックしたら、ラベル：room1_under_bedに遷移するように設定）
6.下向き矢印にActionScroptを記述
（arrow3.pdrをクリックしたら、ラベル：room1に遷移するように設定）

今回のポイントは、
「アップ画面に遷移するためのボタンは、赤い画像を透明化することで実現する」
ということ、ただ1点です。
2章の内容・仕組みを理解していれば、難しくはないと思います。

実装完了！

…というわけで、実際に作成したFLASHは以下のようになります。

http://koubou.wanpa189.net/escape/sample_escape3.swf

上のFLASHはアップ画面遷移ボタンを実感してもらうために、
red.bmpの不透明度を50%にしてあります。
「赤い長方形をクリックすればアップ画面に遷移する」ということがお分かりいただけると思います。

余談ですが、赤い長方形のサイズを大きくすればするほど、
クリックポイントは甘くなり、ゲームの難易度は下がります。
逆に、長方形のサイズを小さくすればするほど、
クリックポイントはシビアになり、ゲームの難易度は上がります。
あまりにも長方形を小さくしすぎると、「これはクリックゲームだ！」
という不名誉な称号がついてしまうのでご注意を。
そういう管理人も、クリックポイントが厳しいと批判を受けつつ…(汗)

…というわけで、第3章は終了です。
次回の第4章は、「フラグについて」を説明していく予定です。
脱出ゲームには、「○○をしておいたから、□□ができるようになった！」ということがあります。
例えば「店長の電話番号を見つけることが出来たから、電話を掛けられるようになった」とか。
この仕組みについての解説していこうと思っております。

この章で作成したファイルはこちらから。
lzh形式
zip形式
※このファイルは使用・流用は自由としますが、そのままの転載は不可とします。
使用・流用した場合、強制ではありませんが、連絡・クレジット等をしていただければ幸いです。

次回の記事