スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

脱出ゲームの作り方<サイトマップ>

脱出ゲームの作り方
<サイトマップ>


「ちょっと休憩」と「ゲームアイデア」は、除いています。

はじめに

脱出ゲーム制作の経緯

脱出ゲーム一覧

アクションスクリプト(1)

アクションスクリプト(2)

アクションスクリプト(3)

アクションスクリプト(4)

アクションスクリプト(5)


アクションスクリプト(6)

アクションスクリプト(7)

脱出ゲームの作り方(画像付き)もくじ

部屋の移動をする。(画像付き)

本を取る。(画像付き)

本を取ってアイコンの表示(画像付き)

本をクリックした時に赤枠を表示・非表示させる(画像付き)

アイコンの本を拡大表示させる(画像付き)

ドアを作って脱出させる(画像付き)

鍵でドアを開けて脱出する(画像付き)

仕掛け(本を手にいれたらドアが出現する)をつくる(画像付き)

コメントをランダム表示させる(画像付き)

ドラッグアイテムを作る(画像付き)

番号入力装置をつくる1(画像付き)

音をつける(画像付き)

無断転載・直リンクを防止する

サイトマップ

リンク集

他のサイト様の脱出ゲーム集

スポンサーサイト

脱出ゲームの作り方<リンク集>

脱出ゲームの作り方
<リンク集>


<Adobe社のダウンロードセンター>

Adobe ダウンロードセンター

<脱出ゲームの作り方を紹介しているサイト様>

ちょこちゃいの脱出ゲームの作り方

・脱出ゲーム「コンサートにいきた~い」シリーズの作者様のサイトです。

WANPA's工房

・脱出ゲーム「WANPA QUEST」シリーズの作者様のサイトです。

<このブログのゲームを紹介して下さったサイト様>

・脱出ゲームにかぎらず、いろいろな楽しいゲームが揃っているサイト様です。
・ゲームを紹介して頂きありがとうございます。

脱出ゲーム大百科

フラシュ - 無料フラッシュゲーム

Escape Game

<管理人がお世話になっているサイト様>

・いろいろとお世話になっているサイト様です。

みうらくんのSmall_Home_Page

・「夢電」、「かぐや」などで、おなじみのみうらさんのホームページです。
・管理人のホームページのバナーなど、作って頂きました。
・いつかは、みうらさんのような綺麗な絵を扱えるようになりたいものです。

脱出ゲームの作り方<アクションスクリプト(1)>

脱出ゲームの作り方
<アクションスクリプト(1)>


管理人のゲームで使われているアクションスクリプトは、

(クリックすると各説明画面にいけます)

・_focusrect = false;

・Stage.showMenu = false;

・stop ();

・function(){}

・if (){}とelse if(){}とelse (){}

・on (release) {}

・gotoAndStop();とgotoAndPlay();

・_root.

・onClipEvent (enterFrame)

おそらくこんなもんです。忘れたのがあったら追記します。 

脱出ゲームの作り方<アクションスクリプト(2)>

脱出ゲームの作り方
<アクションスクリプト(2)>


・_focusrect = false;

・Stage.showMenu = false;

・stop ();

まず、この3つから説明します。

・_focusrect = false;

これを書くと、脱出ゲームにおける禁断のキー「TABキー」が使えなくなります。

フレームにかきます。

・Stage.showMenu = false;

これを書くと、フラッシュ上で右クリックしても、再生などのコマンドがでなくなります。

同じくフレームに書きます。

脱出ゲームが好きな管理人は、いろんなゲームをしてきて、つい「TABキー」や右クリックの再生をしてしまい、興ざめしてしまった経験から、この2つを先に覚えました。

・stop ();

これを書くことによって、フレームをストップすることができます。

フレームに書きます。

この3つは、1フレームに書きます。 

_focusrect = false;
Stage.showMenu = false;


は、1フレームの一番上のレイヤーに、

stop ();

は、1フレームの一番下のレイヤーに書きます。

一緒のフレームに3つ書いてもいいと思うのですが、以前、一緒のフレームに書いたときに反応しないことがありました。

いまだに、原因はわかりません。

脱出ゲームの作り方<アクションスクリプト(3)>

脱出ゲームの作り方
<アクションスクリプト(3)>


・function(){}

function(){}については、管理人も、じつはよく分かっていません。
Gotmailさんのサイトのものをそのまま使っています。
管理人の脱出ゲームでは、最初にfunction(引き数,引き数){実行する命令文}という形で、でてきています。

具体的には、
 
function display (a, b)
{
i = 0;
for (i = 1; i <= 18; i++)
{
_root[a + i]._visible = b;
}
}
display ("item", false);
display ("about", false);

という形で、1回だけでてきます。

上の、""でかこまれたitemとaboutというのは、itemがゲームの右にでてくるアイテム(アイコン)で、aboutというのが、拡大画面ででてくるアイテム類です。

上の文で、iが1から18まで繰り返され、itemとaboutの1から18まで(item1,item2・・・item18)(about1,abot2・・・about18)が、非表示(false)されます。

一応、アイコンと拡大のアイテムには、それぞれitem1,about1と順番に名前をつけています。

アイコンとアイテムは同じ数なのでこれを使うと便利です。

これを使わなかったら、item1._visible=false;,item2._visible=false;・・・item18._visible=false;と全部書いていかなければいけません。

もし、アイテムが10個だったら、i <= 18の18を10に変えればいいだけです。

もし、分かりにくかったら、Gotmailさんのサイトを参考にして下さい。

脱出ゲームの作り方<アクションスクリプト(4)>

脱出ゲームの作り方
<アクションスクリプト(4) >


・if (){}とelse if(){}とelse (){}

これは、かなり使います。

日本語で、覚えると楽です。

if・・・もしも、

()・・・()の中身だったら、

{}・・・{}の中身をする。

else if・・・そうじゃなくて、もし

以下同じ、

else・・・そうじゃなかったら

以下同じ。

です。

例えば、落ちてる本のアイテムを拾うとき、拾ったあとなどは、その場面にまた本が落ちていたらまずいので、以下のようにフレームに書いています。

本の名前(インスタンス名)を、book_mc、本の変数をbookhensuuとして、

if(bookhensuu==0){book_mc._visible=true;}
else if(bookhensuu==1){book_mc._visible=false;}

こう書きます。

本のムービークリップに、

on(release){
book_mc._visible=false;
_root.bookhensuu=1;
}

と書きます。

on(release){
book_mc._visible=false;
_root.bookhensuu=1;
}

本のムービークリップ(book_mc)をクリックした時(on(release))に、本(book_mc)の表示(_visible)を非表示(false)にして、本の変数に1をいれます(_root.bookhensuu=1)。

if(bookhensuu==0){book_mc._visible=true;}
else if(bookhensuu==1){book_mc._visible=false;}

もし(if)、本の変数が0(bookhensuu==0)なら、本の表示(book_mc._visible)を表示(true)して、そうじゃなくてもし(else if)、本の変数が1(bookhensuu==1)なら、本の表示(book_mc._visible)を非表示(false)にします。

こんな感じです。

実際には、本は何もしなくても表示されているので、フレームに書くのは、

if(bookhensuu==1){book_mc._visible=false;}

だけでもいいです。

また、今度いろいろ書きます。

脱出ゲームの作り方<アクションスクリプト>(5)

脱出ゲームの作り方
<アクションスクリプト(5)>


on (release) {}は、前回の、if文でも、書いたんですが、脱出ゲームにおいて、

物を拾うとか、クリックして調べたりする時に、この命令文を使います。

例)

本(ムービークリップ、名前はbook_mc)を、配置します。

ムービークリップのスクリプトに、

on (release) {_root.book_mc._visible=false;}

と書くと、本をクリックすると、その本が画面上からなくなります。

_root.book_mc._visible=false;は、this._visible=false;でもいいです。

on (release)(ムービークリップをクリックした時に)

_root.book_mc._visible=false;(メインのタイムライン上のbook_mcの表示を非表示にします。)

this._visible=false;(このムービークリップの表示を非表示にします。)

つけたして、ダイナミックテキストを配置しておいて、変数名をkomentoとして、

on (release) {
_root.book_mc._visible=false;
_root.komento="本を手にいれた。";
}

と書くと、上記の例+テキストに「本を手にいれた。」と表示されます。

実際には、本を取った時には、上記のこと以外に、アイコン(手に入れたアイテム欄)の

表示や、場面が切り替わったときに再び表示されないようにするために、

変数を指定するんですが、それは、また書いていきます。

脱出ゲームの作り方<アクションスクリプト(6)>

脱出ゲームの作り方
<アクションスクリプト(6)>


・gotoAndStop();とgotoAndPlay();

・_root.

まず、

・gotoAndStop();とgotoAndPlay();

ですが、これを書くことにによって、()内で指定したフレームに飛んでいきます。
gotoAndStop();だと、飛んだあとにフレームがストップして、gotoAndPlay();だと、飛んだあとにフレームが進んでいきます。

()内には、フレームの番号を書くか、フレームにラベル名をいれておいて、()内にさらに” ”をいれる(” ”)にすることで、” ”の中のラベルのフレームに飛びます。

・_root.は、

とりあえず命令文というより、管理人がよく書き忘れるので書いたのですが、「メインの」という意味です。
パスの絶対パス・相対パスの絶対パスの方です。
管理人は、相対パスがあまりうまく使えないので、この絶対パスをよく使います。

例として、
最初に説明したgotoAndStop();を、メインフレームの10フレームに飛ばしたいとして、メインのフレームにgotoAndStop(10);と書いた場合はいいんですが、例えば、ムービークリップの中で書いた場合は、そのムービークリップの10フレームに飛んでしまうので、その時には、 _root.gotoAndStop(10);と書かないといけません。

画像付きで、説明する機会があれば、また説明します。

脱出ゲームの作り方(画像付き)

脱出ゲームの作り方(画像付き)

ここでは、画像付きで脱出ゲームの作り方を説明します。 

<目次>より下の項目をクリックすると、それぞれの説明ページにいきます。

一応、アクションスクリプトのページを読み終えたあと、もしくは、読みながらの方が分かりやすいかもしれません。

ちなみに、上から順番に作っていってます。

<目次>
<基本編>

・on(Release){}を使って、本を手に入れる。

・gotoAndStop();を使って、部屋の移動をする。

・本を取った時に本のアイコンを表示させる。

・本をクリックした時に赤枠を表示・非表示させる。


・アイコンの本を拡大表示させる。

・ドアを作って脱出させる。

・鍵でドアを開けて脱出する。

・仕掛け(本を取ったらドアが現れる)をつくる。

<応用編>

・コメントをランダム表示させる。

・ドラッグ用のアイテムを作る。

・暗証番号入力装置を作る。

・音をつける。

・無断転載・直リンクを防止する。

随時、追加していきます。

脱出ゲームの作り方<本を取る>

脱出ゲームの作り方
<本を取って本を手に入れたと表示させる>


まず、最初の画面。(説明1画面)
(一回拡大して、さらに大きくすると綺麗に見えます。)
レイヤーの追加と、レイヤーの名前の変更。
そして、大体の画面の大きさは、こんな感じです。

説明1画面

(クリックすると拡大表示されます。)

次に、背景を描きます。(説明2画面) 
背景などを描くとき、そのレイヤー以外はロックしておいた方がいいです。

説明2画面

(クリックすると拡大表示されます。)

次に、本を描いてムービークリップにします。(説明3画面)
本のインスタンス名は、book_mcとします。

説明3画面

(クリックすると拡大表示されます。)

次に、コメント欄を作ります。(説明4画面)
コメント欄の変数名は、komentoとします。

説明4画面

(クリックすると拡大表示されます。)

本のムービークリップにアクションスクリプトを書きます。(説明5画面)

on (release) {
_root.book_mc._visible=false;
_root.komento="本を手にいれた。";
}

と書きます。
説明画面で、;が1箇所抜けていました。

_root.komento="本を手にいれた。"は   
_root.komento="本を手にいれた。";が正しいです。

説明5画面

(クリックすると拡大表示されます。)

次に、ストップのレイヤーにストップのアクションスクリプトを書きます。(説明6画面)

stop();

と書きます。
説明画面の「ストップのレイヤーを選択して・・・」というのは、正しくは、「ストップレイヤーの1フレーム目の白丸(空白キーフレーム)を選択して・・・」です。

説明6画面

(クリックすると拡大表示されます。)

最後に、実際に動きを確認します。(説明7画面)
上の制御から、ムービープレビューを選択して、
実際に本をクリックしてみます。
本を手に入れた。と表示され、本が無くなればOKです。

説明7画面

(クリックすると拡大表示されます。)

やってみて、うまくいったでしょうか。
うまくいくことを祈っております。

脱出ゲームの作り方<部屋を移動する>

脱出ゲームの作り方
<部屋の移動>


本を取るの画面から続いてます。 まず、最初の画面。(説明1画面)
(一回拡大して、さらに大きくすると綺麗に見えます。)
部屋を4つ配置します。
コピーを使って簡単にできます。
わかりやすいように、部屋の色を変えていきます。

説明1画面

(クリックすると拡大表示されます。)

次に、移動用のレイヤーを作って、移動ボタンを作ります。(説明2画面) 

説明2画面

(クリックすると拡大表示されます。)

移動ボタンにアクションスクリプトを書きます。(説明3画面)

on (release) {
gotoAndStop(2);
}

と書きます。

説明3画面

(クリックすると拡大表示されます。)

次に、移動ボタンを4部屋に配置します。(説明4画面)
このとき、先に一部屋目で、左右に配置してからキーフレームの追加をしていきます。(①、②の順番でやる)

説明4画面

(クリックすると拡大表示されます。)

コピーのままだとボタンを押しても同じ部屋にしか行かないので、一つ一つ修正します。(説明5画面)

説明5画面

(クリックすると拡大表示されます。)

最後に、実際に動きを確認します。(説明6画面)
上の制御から、ムービープレビューを選択して、
実際に移動ボタンをクリックしてみます。
4部屋をぐるぐると周れれば成功です。

説明6画面

(クリックすると拡大表示されます。)

やってみて、うまくいったでしょうか。
うまくいくことを祈っております。

脱出ゲームの作り方<アクションスクリプト(7)>

脱出ゲームの作り方
<アクションスクリプト(7)>
・onClipEvent (enterFrame) {}

これは、functionの時と同じく、よく分かっていません。
Gotmailさんのものを、少し改造して使っています。
ただし、これは、下記のようにして、手に入れたアイテム(アイコン)をクリックした時に、選択(赤枠がついたり)・非選択にすることだけに使っているので、是非そのまま覚えてください。

アイコンのムービークリップに以下のように書きます。

アイコンのムービークリップのインスタンス名を・・・item1

そのアイコンの拡大画面にでてくるアイテムのムービークリップ名を・・・about1

アイコンのムービークリップ内タイムライン1フレーム目のラベル名を・・・nomal

アイコンのムービークリップ内タイムライン2フレーム目のラベル名を・・・sentaku

として

onClipEvent (enterFrame) {
if (_root.item !== "about1")
{
this.gotoAndStop ("nomal");
}
}
on (release) {
if (this._currentframe == 2)
{
this.gotoAndStop ("nomal");
_root.item = false;
}
else if (this._alpha == 100)
{
this.gotoAndStop ("sentaku");
_root.item = "about1";
}
}

このように書きます。

(説明)

onClipEvent (enterFrame) {
if (_root.item !== "about1")
{
this.gotoAndStop ("nomal");
}
}

もし、_root.itemがabout1以外だったら、アイコンの状態をnomal(非選択状態)にします。

こう覚えとけばいいと思います。

本などには、onClipEvent (enterFrame) は、「そのインスタンスのフレームが再生される度に・・・」とか書いてありますが、管理人もよく分からないまま、そのまま使っています。

on (release) {
if (this._currentframe == 2)
{
this.gotoAndStop ("nomal");
_root.item = false;
}
else if (this._alpha == 100)
{
this.gotoAndStop ("sentaku");
_root.item = "about1";
}
}

アイコンをクリックした時に、もし、アイコンが選択状態ならば、nomal(非選択状態)にし、そうじゃなくて、nomal(非選択状態)だったら、選択状態にする。

一応、どこで選択・非選択を判断しているかというと、this._currentframe == 2というのが、アイコンのムービークリップ内タイムラインが2フレーム目だったら(選択状態だったら)ということで判断し、this._alpha == 100で、アイコンのアルファ値が100 ならということで、非選択状態を判断しています。
使い終わったアイテムは、アルファ値を20にするので、使い終わったアイテムは反応しなくなります。

他に、いい方法があるかもしれませんが、これでも一応動くので、このまま使って下さい。

Gotmailさんのと違う点は、アイコンをクリックすると選択・非選択にできるようにできるようにしています。
一応、管理人のゲームで「味気ない部屋」では、アイコンをクリックすると、選択することはできますが、非選択にするには、一度、拡大表示をしなければいけなく、それが不評だったので、自分なりに改造しました。

脱出ゲームの作り方<本を取った時に本のアイコンを表示させる>

脱出ゲームの作り方
<本を取った時に本のアイコンを表示させる>

   
まず、最初の画面。(説明1画面)
(一回拡大して、さらに大きくすると綺麗に見えます。)
レイヤーの追加と、レイヤーの名前の変更。
部屋移動用のラベル用と、アイコン表示用、フレームアクション用の3つのレイヤーを準備します。

説明1画面

(クリックすると拡大表示されます。)

次に、部屋移動用のラベルの作成。(説明2画面) 
1フレーム目に・・・start

2フレーム目に・・・s1

3フレーム目に・・・s2

4フレーム目に・・・s3

5フレーム目に・・・s4

と書きます。

説明2画面

(クリックすると拡大表示されます。)

次に、コメントから下のレイヤーを全て右にひとつずらします。(説明3画面)
なぜずらすかについては、おいおい分かってきます。

説明3画面

(クリックすると拡大表示されます。)

次に、アイコンを表示するための幅を作ります。(説明4画面)

説明4画面

(クリックすると拡大表示されます。)

次に、アイコンの本を作成します。(説明5画面)

①から順番にやっていってください。

説明5画面

(クリックすると拡大表示されます。)

先ほど部屋のレイヤーをずらしたので、前回作った移動用のボタンのアクションスクリプトを書きかえます。(説明6画面)

on(Release){
gotoAndStop("s2");
}

部屋の移動する場所をフレーム番号ではなくて、先ほど作ったラベル名で指定します。
ラベル名で指定するときは、( )の中で、さらに””で囲って指定します。

説明6画面

(クリックすると拡大表示されます。)

ここまでやってみて一度、動きを確認します。
おそらく、どの部屋にも本が落ちている状態だと思います。、
これを、なくす為に本レイヤーの3フレーム目に空白キーフレームをいれます。 (説明7画面)

説明7画面

(クリックすると拡大表示されます。)

アクションフレームにアクションスクリプトを書きます。(説明8画面)

function display (a, b)
{
i = 0;
for (i = 1; i <= 1; i++)
{
_root[a + i]._visible = b;
}
}
display ("item", false);
bookhensuu=0;

と書きます。

画像では、i <= 7となっていますが、上のように1が正しいです。(アイテムが一個のため)
アイテムが増えてきたら、この数字もあがっていきます。

bookhensuuで、変数も作っておきます。

説明8画面

(クリックすると拡大表示されます。)

前に作った本のムービークリップのアクションスクリプトに、2行つけたします。(説明9画面)

_root.item1._visible=true;
_root.bookhensuu=1;

と書き加えます。

これで、本を取った時に、アイコン(item1)が表示され、bookhensuuに1がいれられます。

説明9画面

(クリックすると拡大表示されます。)

アクションレイヤーの2フレーム目に、アクションスクリプトを書きます。(説明10画面)

if(bookhensuu == 1)
{
book_mc._visible=false;
}

と書きます。

これで、もしbookhensuuが1なら本の表示を非表示にできます。
これを書かないと、ムービープレビューをやったらわかりますが、本を取った時には、本の表示が消えますが、移動して戻ってきたら、また本が表示されているという不具合がでます。

説明10画面

(クリックすると拡大表示されます。)

これで、完成なんですが、もうちょっと脱出ゲームらしくするために、説明6画面ででてきた移動ボタンに1行アクションスクリプトを加えて下さい。(説明11画面)

on(Release){
gotoAndStop("s2");
_root.komento="";
}

と書きます。

これで、本を取った時にでたコメントが、移動した時には、消えてなくなります。

説明11画面

(クリックすると拡大表示されます。)

最後にムービープレビューで確認です。
やってみて、うまくいったでしょうか。
うまくいくことを祈っております。
一応、サンプルが見たいとのメールを頂いたので、下にサンプルを置いておきます。

サンプルフラッシュ

脱出ゲームの作り方<本をクリックした時に赤枠を表示・非表示させる>

脱出ゲームの作り方
<本をクリックした時に赤枠を表示・非表示させる>

  
まず、最初の画面。(説明1画面)
(一回拡大して、さらに大きくすると綺麗に見えます。)
アイコンレイヤーの本のムービークリップの中にはいって レイヤーの追加と、レイヤーの名前の変更。
ラベル用と、ヒットポイント用、赤枠用、ストップ用、最初からあるレイヤー1の5つのレイヤーを準備します。

説明1画面

(クリックすると拡大表示されます。)

次に、ラベルの作成とストップアクションの作成。(説明2画面) 

ラベルレイヤーで、

1フレーム目に・・・nomal

2フレーム目に・・・sentaku

と書きます。

ストップレイヤーで、1フレーム目のフレームに

stop();

と書きます。
以前に、メインのタイムラインに書いた時と同じです。

説明2画面

(クリックすると拡大表示されます。)

次に、クリックの時にでる赤枠を作ります。(説明3画面)
注意として、1フレーム目は白丸(空白キーフレーム)で、2フレーム目だけに表示させるようにします。

説明3画面

(クリックすると拡大表示されます。)

次に、ヒットポイント(クリックの有効範囲)を作ります。(説明4画面)

説明画面に、透明ムービークリップの作り方が書いてあります。
これは、同じようにして、透明ボタンも作れますので、是非、覚えて下さい。

説明4画面

(クリックすると拡大表示されます。)

最後に、メインのタイムラインに戻って、アイコンレイヤーの本のムービークリップにクリックした時に表示・非表示させるアクションスクリプトを書きます。(説明5画面)  

メインのタイムラインへは、左上のシーン1をクリックすると戻れます。

onClipEvent (enterFrame) {
if (_root.item !== "about1")
{
this.gotoAndStop ("nomal");
}
}
on (release) {
if (this._currentframe == 2)
{
this.gotoAndStop ("nomal");
_root.item = false;
}
else if (this._alpha == 100)
{
this.gotoAndStop ("sentaku");
_root.item = "about1";
}
}

と書きます。

詳しい説明は、アクションスクリプト(7)・onClipEvent (enterFrame)に書いてあります。

説明5画面

(クリックすると拡大表示されます。)

最後にムービープレビューで確認です。
本を取った後、アイコンの本をクリックして、赤枠が表示・非表示になれば成功です。 やってみて、うまくいったでしょうか。
うまくいくことを祈っております。
一応、サンプルが見たいとのメールを頂いたので、下にサンプルを置いておきます。

サンプルフラッシュ

脱出ゲームの作り方<アイコンの本を拡大表示させる>

脱出ゲームの作り方
<アイコンの本を拡大表示させる>


まず、最初の画面。(説明1画面)
(一回拡大して、さらに大きくすると綺麗に見えます。)
メインのタイムラインにレイヤーを2つ追加する。
追加の方法は、今までやった方法と同じです。
アバウトアイテム用とアバウトボタン用の2つのレイヤーを準備します。

説明1画面

(クリックすると拡大表示されます。)

次に、アバウトバックボタンの作成です。アバウトアイテムレイヤーに作成します。(説明2画面) 

アバウトバックボタンとは、アイテムを拡大した時の後ろの薄い背景です。
これをいれることで、拡大表示した時に移動や部屋の背景などの反応を無くすことができます。
ですので、部屋の背景を覆える大きさで作ってください。

アバウトバックボタンのインスタンス名は

about_back

とします。

本来、1フレーム目につくるのですが、1フレーム目には、部屋の背景がないので大きさが分かりません。とりあえず2フレーム目に作って後で、1フレーム目にずらします。

説明2画面

(クリックすると拡大表示されます。)

次に、先ほど作ったアバウトバックボタンを1フレーム目に移動させます。(説明3画面)

説明3画面

(クリックすると拡大表示されます。)

次に、閉じるボタンを作ります。アバウトアイテムレイヤーに作ります。(説明4画面)

閉じるボタンとは、文字通り、アバウトバック画面を閉じるためのボタンです。
詳しくは、説明画像に書いてありますが、閉じるボタンのインスタンス名は

close_btn

とします。

説明4画面

(クリックすると拡大表示されます。)

次に、閉じるボタンにアクションスクリプトを書きます。(説明5画面)  

アクションスクリプトは

on (release) {
about_back._visible = false;
close_btn._visible = false;
display ("about", false);
_root.komento = "";
item = false;
}

と書きます。

説明5画面

(クリックすると拡大表示されます。)

次に、アバウト本のムービークリップを作ります。アバウトアイテムレイヤーに作ります。(説明6画面)

アバウト本とは、アイコンを拡大表示した時に表示されるあれです。
作り方は、アイコンの本と同じですが、説明画像の注意をよく読んで作って下さい。
アバウト本のムービークリップのインスタンス名は

about1

とします。

説明6画面

(クリックすると拡大表示されます。)

次に、アバウト本のムービークリップにアクションスクリプトを書きます。 (説明7画面)

アクションスクリプトは

on (release) {
_root.komento = "赤い本だ。";
}

と書きます。

説明7画面

(クリックすると拡大表示されます。)

今度は、アバウトボタンを作ります。アバウトボタンレイヤーに作ります。(説明8画面)

アバウトボタンとは、アイコンを選択した時に押すとアバウト画面を表示させるボタンです。
作り方は、閉じるボタンと同じです。
アバウトボタンのインスタンス名は

aboutitem

とします。

説明8画面

(クリックすると拡大表示されます。)

次に、アバウトボタンにアクションスクリプトを書きます。(説明9画面)  

アクションスクリプトは

on (release) {
if (item !== false && itemNum == false)
{
_root.komento = "";
display ("about", false);
about_back._visible = true;
close_btn._visible = true;
_root[item]._visible = true;
_root.item = false;
}
}

と書きます。

gotmailさんのものを使わせて頂いているので、管理人もよく分かっていないのですが、説明を画像につけています。

説明9画面

(クリックすると拡大表示されます。)

アクションレイヤーの1フレーム目に、アクションスクリプトを5行追加します。(説明10画面)

アクションスクリプトは、

display ("about", false);
about_back._visible = false;
close_btn._visible = false;
_global.item = false;
_global.itemNum = false;


を追加します。

説明10画面

(クリックすると拡大表示されます。)

最後にムービープレビューで確認です。
本を取った後、アイコンの本をクリックして、赤枠を表示。
そのまま、aboutitemボタンをクリックした時、拡大した本が表示され(この時、アイコンの赤枠が消える)、拡大した本をクリックした時に赤い本だ。とコメント欄にでて、なおかつ、部屋の背景が無反応(移動ボタンを押しても移動しない)であれば、成功です。(長っ)
やってみて、うまくいったでしょうか。
うまくいくことを祈っております。
かなり脱出ゲームらしくなってきました。
あと2・3回くらいの画像付き説明で、作れるようになると思います。
一応、サンプルが見たいとのメールを頂いたので、下にサンプルを置いておきます。

サンプルフラッシュ

脱出ゲームの作り方<ドアを作って脱出させる>

脱出ゲームの作り方
<ドアを作って脱出させる>


まず、最初の画面。(説明1画面)
(一回拡大して、さらに大きくすると綺麗に見えます。) 

エンディング画面を作成します。
ラベルレイヤー6フレーム目を選択、右クリック空白キーフレームの挿入で空白キーフレームを作る。
ラベルレイヤーの6フレーム目にラベル名・・・endを追加する。
そのままだと、他のレイヤーが5フレーム目と同じになるので、ストップレイヤー以外にそれぞれ空白キーフレームを挿入する。

説明1画面

(クリックすると拡大表示されます。)

次に、背景レイヤー・ラベル名endに脱出成功の画面を作成します。(説明2画面) 

説明2画面

(クリックすると拡大表示されます。)

次に、移動ボタンレイヤー・ラベル名endにスタートボタンを作ります。(説明3画面)

今までに何回か作ったボタン類と作り方は一緒です。

説明3画面

(クリックすると拡大表示されます。)

次に、作ったスタートボタンにアクションスクリプトを書きます。(説明4画面)

on (release) {
gotoAndPlay ("start");
_root.komento = "";
}

と書きます。

gotoAndStopではなくて、gotoAndPlayということに注意して下さい。

説明4画面

(クリックすると拡大表示されます。)

次に、脱出用のドアを作る前に作りやすいように、アバウトアイテムの表示を非表示にします。(説明5画面)  

説明画像の場所をクリックすることで、非表示にできます。

説明5画面

(クリックすると拡大表示されます。)

次に、移動ボタンレイヤーのラベル名s3にドアのムービークリップを作ります。(説明6画面)

ドアのムービークリップのインスタンス名は

doa_mc

とします。

説明6画面

(クリックすると拡大表示されます。)

最後に、作ったドアのムービークリップにアクションスクリプトを書きます。 (説明7画面)

アクションスクリプトは

on (release) {
_root.gotoAndStop ("end");
_root.komento = "";
}

と書きます。

説明7画面

(クリックすると拡大表示されます。)

最後にムービープレビューで確認です。
ドアの部屋に移動して、ドアをクリックしてエンディング画面にいく、エンディング画面のスタートボタンを押したら再スタートできる。
以上ができれば成功です。
やってみて、うまくいったでしょうか。
うまくいくことを祈っております。
ほぼ脱出ゲームの完成です。
一応、サンプルが見たいとのメールを頂いたので、下にサンプルを置いておきます。

サンプルフラッシュ

脱出ゲームの作り方<鍵でドアを開けて脱出する>

脱出ゲームの作り方
<鍵でドアを開けて脱出する>


今回は、今までやってきたことの繰り返しが多いので、コピーなどして手間を省く方法などを中心に説明しています。
ちょっと、説明は長いですが、これができれば応用で、いろいろできます。基本編もあと1回ですので頑張って下さい。

まず、最初の画面。(説明1画面)
(一回拡大して、さらに大きくすると綺麗に見えます。)

アバウトアイテムやアイコン、落ちているアイテムのムービークリップのもととなるグラフィックを作成します。
ここでは、鍵を作りますので、鍵のグラフィックを作成します。
今後、アイテムを増やす時には、先にグラフィックを作ると覚えておいてください。

カギグラフィックを作成したら、ライブラリにカギのグラフィックがあるか確認して下さい。 説明1画面

(クリックすると拡大表示されます。)

とりあえず、今描いたカギのグラフィックを削除します。(説明2画面) 
(ライブラリから削除するわけではありませんので注意)

説明画面のようにやって下さい。

説明2画面

(クリックすると拡大表示されます。)

次に、カギを配置する部屋を決めて、カギを配置します。(説明3画面)

ここでは、ラベルs4に配置することとして、そこにライブラリからカギをドロップしてムービークリップに変換します。
カギのムービークリップ・インスタンス名は

kagi_mc

とします。

説明3画面

(クリックすると拡大表示されます。)

次に、カギをクリックした時にどうするのかを、今配置したカギ(kagi_mc)にアクションスクリプトを書いていきます。(説明4画面)

on (release) {
_root.kagi_mc._visible = false;
_root.komento = "カギを手にいれた。";
_root.item2._visible = true;
_root.kagihensuu = 1;
}

と書きます。

説明4画面

(クリックすると拡大表示されます。)

次に、取ったカギが再びあらわれないように、アクションレイヤーのラベルs4にアクションスクリプトを書きます。(説明5画面)  

アクションスクリプトは

if (kagihensuu == 1)
{
kagi_mc._visible = false;
}


と書きます。

説明5画面

(クリックすると拡大表示されます。)

次に、アイコンカギを作ります。(説明6画面)

アイコン類、アバウトアイテム類は、1フレーム目に作ります。

アイコンカギのムービークリップのインスタンス名は

item2

とします。

説明6画面

(クリックすると拡大表示されます。)

次に、アイコンカギのムービークリップにアクションスクリプトを書きます。 (説明7画面)

アクションスクリプトは

onClipEvent (enterFrame) {
if (_root.item !== "about2")
{
this.gotoAndStop ("nomal");
}
}
on (release) {
if (this._currentframe == 2)
{
this.gotoAndStop ("nomal");
_root.item = false;
}
else if (this._alpha == 100)
{
this.gotoAndStop ("sentaku");
_root.item = "about2";
}
}

と書きます。

説明画像で、簡単に書く方法を書いています。

説明7画面

(クリックすると拡大表示されます。)

今度は、アイコンカギをクリックした時の赤枠の表示・非表示を作ります。(説明8画面)

作り方は、「アイコン本の赤枠の表示・非表示」で説明した通りです。
ここでは、アイコン本で作ったものをコピーする方法を説明しています。

コピーしたあとは、アイコン本・アイコンカギとも、レイヤーの上下関係をもどしているか必ず確認して下さい。

訂正:画像内、5番目の説明。コピーは、ペーストの間違いです。(失礼しました)

説明8画面

(クリックすると拡大表示されます。) 

次に、アイコンカギが、コピーしたままだと赤枠・ヒットポイントの表示がおかしいので、それを修正します。(説明9画面)  

説明画像にも書いてありますが、修正するところ以外のレイヤーは、ロックしておいて下さい。

説明9画面

(クリックすると拡大表示されます。)

次に、アバウトカギを作ります。(説明10画面)  

アバウトカギのインスタンス名は、

about2

とします。

説明10画面

(クリックすると拡大表示されます。)

次に、アバウトカギのムービークリップにアクションスクリプトを書きます。 (説明11画面)

アクションスクリプトは

on (release) {
_root.komento = "ドアのカギだ。";
}

と書きます。

説明11画面

(クリックすると拡大表示されます。)

次に、アクションレイヤーのラベルstartのフレームのアクションスクリプトを書きかえます。 (説明12画面)

function display (a, b)
{
i = 0;
for (i = 1; i <= 2; i++)
{
_root[a + i]._visible = b;
}
}
display ("item", false);
bookhensuu = 0;
kagihensuu = 0;
display ("about", false);
about_back._visible = false;
close_btn._visible = false;
_global.item = false;
_global.itemNum = false;

i <= 1からi <= 2への書きかえと、kagihensuu = 0;の1行が足されています。

説明12画面

(クリックすると拡大表示されます。)

最後に、移動ボタンレイヤーのラベルs3、ドア(doa_mc)のムービークリップのアクションスクリプトを書きかえます。 (説明13画面)

on (release) {
if (_root.item2._currentframe == 2)
{
_root.item = false;
_root.item2._alpha = 20;
_root.itemNum = false;
_root.komento = "";
_root.gotoAndStop ("end");
}
else
{
_root.komento = "鍵がかかっている。";
}
}

と書きかえます。

詳しくは、説明画像に書いてあります。

説明13画面

(クリックすると拡大表示されます。)

最後にムービープレビューで確認です。
ドアがそのままだと開かず、鍵を取った後、鍵を選択して赤枠を表示した状態でエンディング画面にいきます。
そのまま、再スタートして、同じことができるかためしてみて、できれようであれば成功です。
やってみて、うまくいったでしょうか。
うまくいくことを祈っております。
次の回で、基本編は終わりです。頑張りましょう。
一応、サンプルが見たいとのメールを頂いたので、下にサンプルを置いておきます。

サンプルフラッシュ

脱出ゲームの作り方<仕掛けをつくる>

脱出ゲームの作り方
<仕掛けをつくる>


今までに作ったものを利用して、ちょっとした仕掛けを作ります。
ここでは、ドアがはじめは無くて、本を取ったらドアが現れるというものを作ります。
前回が長かった分、今回はすぐ終わります。

まず、最初の画面。(説明1画面)
(一回拡大して、さらに大きくすると綺麗に見えます。)

本を取った時にドアが現れるように、アクションレイヤー・ラベルs3のフレームにアクションスクリプトを書きます。

if (bookhensuu == 0)
{
doa_mc._visible = false;
}
else if (bookhensuu == 1)
{
doa_mc._visible = true;
}

と書きます。

本を取った時の変数を利用しています。

説明1画面

(クリックすると拡大表示されます。)

次に、本を取った時のコメントをちょっと変えます。(説明2画面)

(一回拡大して、さらに大きくすると綺麗に見えます。)

反応アイテムレイヤー・ラベルs1の本のムービークリップ(book_mc)のアクションスクリプトを次のように書きかえます。

on (release) {
_root.book_mc._visible = false;
_root.komento = "本を手にいれた。・・・どこかで物音がした。";
_root.item1._visible = true;
_root.bookhensuu = 1;
}

と、書きかえます。

説明2画面

(クリックすると拡大表示されます。)

最後にムービープレビューで確認です。

本を取らずに部屋を移動してください。ドアがありません。本を取って下さい。ドアが現れます。
そのまま、再スタートして、同じことができるかためしてみて、できれようであれば成功です。
やってみて、うまくいったでしょうか。
うまくいくことを祈っております。
これで、基本編は終わりです。
この繰り返しをやれば、アイテムを探すタイプの脱出ゲームは、簡単に作れると思います。

一応、サンプルが見たいとのメールを頂いたので、下にサンプルを置いておきます。

サンプルフラッシュ

脱出ゲームの作り方<コメントをランダム表示させる>

脱出ゲームの作り方
<コメントをランダム表示させる>


今回から応用編です。

まず、最初の画面。(説明1画面)
(一回拡大して、さらに大きくすると綺麗に見えます。)

とりあえず、基本編からの続きで、現在、レイヤーはこのようになっているはずです。

脱出ゲームの作り方 説明1画面

(クリックすると拡大表示されます。)

次に、本を拡大して調べた時のコメントをランダム表示にするためにアバウトレイヤーの本のムービークリップ(about1)のアクションスクリプトを次のように書きかえます。(説明2画面)

on (release) {
k = Math.floor (Math.random () * 3) + 1;
if (k == 1)
{
_root.komento = "赤い本だ。";
}
else if (k == 2)
{
_root.komento = "かなり分厚い。";
}
else if (k == 3)
{
_root.komento = "中身はなんだろう。";
}
}


と、書きかえます。

Math.floor (Math.random () * 3) + 1;

は、そのまま覚えてください。

これは、ランダムに数字を取得するということです。

ここでは、1~3の間からの取得ですが、3の数字を5にすると1~5に、100にすると1~100の間で取得するという風にかわります。

上のアクションスクリプトでは、1~3の間で取得した数字をとりあえず、変数kに代入して、kが1なら"赤い本だ。"と表示する。kが2なら・・・kが3なら・・・もう、説明はいらないですね。
ということです。

脱出ゲームの作り方 説明2画面

(クリックすると拡大表示されます。)

同じように、アバウトレイヤーのカギのムービークリップ(about2)のアクションスクリプトを次のように書きかえます。(説明3画面)

on (release) {
k = Math.floor (Math.random () * 3) + 1;
if (k == 1)
{
_root.komento = "カギだ。";
}
else if (k == 2)
{
_root.komento = "赤いカギだ。";
}
else if (k == 3)
{
_root.komento = "どこのカギだろう。";
}
}

と書きます。

後の説明は、本の時とおなじです。

脱出ゲームの作り方 説明3画面

(クリックすると拡大表示されます。)

最後にムービープレビューで確認です。

本やカギを取った後に、拡大して何回か調べて下さい。コメントが変わっているはずです。
やってみて、うまくいったでしょうか。
うまくいくことを祈っております。
一応、サンプルが見たいとのメールを頂いたので、下にサンプルを置いておきます。

サンプルフラッシュ

«  | HOME |  »

おしろのしろの他サイト

ブログ内検索

最近のエントリ

カテゴリー

リンク

このブログをリンクに追加する

メールフォーム

名前:
メール:
件名:
本文:

本ウェブサイトのプライバシーポリシー

当サイトでは、第三者配信による広告サービスを利用しています。このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報 (氏名、住所、メール アドレス、電話番号は含まれません) を使用することがあります。

<クッキー・Webビーコンについて>

本ウェブサイトにおいては、クッキー(Cookie)又はWebビーコンと呼ばれる技術を使用しているページがあります。
クッキーとは、Webサイトが皆様のコンピュータのハードディスク上に置かれたブラウザのクッキー・ファイルに転送する文字のみの情報の連なりであり、これによりWebサイトは利用者を識別できるようになります。
クッキーには通常、クッキーの送信元ドメインの名称、クッキーの「寿命」に加え、1つの値が格納されています。通常、この値はランダムに生成されたユニークな数です。
クッキーの使用は業界の標準となっており、多くのサイトで、カスタマーに有益な機能を提供する目的でクッキーが使用されています。
クッキーにより、カスタマーの使用するコンピュータは特定されますが、カスタマー個人を特定できるわけではありません。
また、Webビーコン(クリアGIFと呼ばれることもあります。)は、特定のページに何回のアクセスがなされたかを知るための技術です。
当サイトにおいて、以下のような場合にクッキーを使用することがあります。
利用者ごとにカスタマイズされたサービスを提供するにあたり、利用者の利便性を考慮しクッキーを使用することがあります。
このクッキーは、利用者がカスタマイズされたページへアクセスしたとき、またはログインするときに設定されます。
本サイトを利用する利用者数を計るために使用する場合があります。
掲載された広告についてもクッキーを使用する場合があります。

<クッキーの無効化と有効化>

ブラウザの設定を変更すると、クッキーの受け入れ可否を選択できます。
また、ブラウザのクッキー・フォルダに保存されているクッキーを削除することもできます。
ただし、クッキーを無効化したり削除すると、当社サイトで一部の機能が使用できなくなることがあります。
ご利用のブラウザでクッキーを無効化したり削除する方法がご不明な場合は、ブラウザのヘルプ機能で「クッキー」を選択し、詳細を確認してください。

RSSフィード

アクセス解析

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。