脱出ゲーム制作記 Flash AS3.0

カテゴリ: 脱出ゲーム作成 AS3.0

今回は少しASの書き方で苦戦しました。

1.AS2.0→AS3.0へ

今回もいつも通り本家様からスクリプトを拝借

・アクションレイヤー1フレーム
function display (a, b)
{
i = 0;
for (i = 1; i <= 1; i++)
{
_root[a + i]._visible = b;
}
}
display ("item", false);
keyhensuu=0;

・アクションレイヤー2フレーム
if(keyhensuu == 1)
{
key_mc._visible=false;
}

・鍵レイヤー2フレーム
_root.item1._visible=true;
_root.keyhensuu=1;
を取得時の操作に付け足す。

のこの3スクリプトですね。
下の2つは前回までに出てきているので
特筆する事はないのですが、
問題は一番上の部分です。 

ここの以下の2つの部分に大苦戦しました…。
 

function display (a, b)
display ("item", false);

まず①の部分は調べてみると、
どうやらa,bという要素を定義しているようなのですが、
上手い書き換え方が分からず、

var a =  "item";
var b = false;


と一つずつ定義しました。
function displayがただの定義では無さそうなので、
少し不安ですがとりあえずは正常に動作したので、
不具合が出るまでこのまま続けます。
※この辺り分かる方いらっしゃれば教えて頂けると嬉しいです。



_root[a + i]

そしてこの書き方に相当てこずりました…。
代入後の式が_root[item+i]となるのですが、
この状態でiに1が代入されると

_root.item1と変換されるようです。

もし2が代入されるとitem2になるようで、
item(文字列)+変数という形にする事で、
まとめてアイテムを管理する事ができます。

この書き方は要チェックですね!


そんな訳で全スクリプトを書き換えた結果が

・アクションレイヤー1フレーム
//鍵の変数を定義
var keyhensuu = 0;

//itemのアイコンの表示を管理
var a =  "item";
var b = false;
var i = 0; 
for (i = 1; i <= 1; i++)
{
MovieClip(root)[a + i].visible = b;
}

ピクチャ 1


・アクションレイヤー2フレーム
//鍵の変数が1の時落ちている鍵を非表示
if(keyhensuu == 1)
{
key_mc.visible=false;
}

ピクチャ 2

・鍵レイヤー2フレーム
//鍵を取得したときitem1を表示&鍵の変数が1に
MovieClip(root).item1.visible = true;
MovieClip(root).keyhensuu = 1;

ピクチャ 3

予めアイテムは全て非表示にしておいて、
鍵を取得した時に鍵の変数に1を与えて、
アイコンを表示、落ちている鍵を非表示にします。

ピクチャ 4

無事に落ちている鍵を選択すると、
画面から鍵が消えアイコン欄に鍵が表示できました。

次回はアイテム欄のアイテム選択についてです。

引き続きアイテムの取得についてです。

今回は取得したアイテムを
アイテム欄に表示させてみたいと思います。

1.アイテム欄の作成

1-1 ドキュメント幅の変更とレイヤー作成

まずはアイテム欄の作成です。
現状、画面内に作るスペースが無いので、
ドキュメントサイズを変更して余白を作ります。
※この作業は本当にどうしてもという時の対応です。
通常は最初からアイテム欄も考えて全体画面を作らないといけないですね。


ピクチャ 17

プロパティのドキュメント設定を作成し、
幅を50px拡張しました。

ピクチャ 18

これで右側に50px分余白ができました。
ここに入手したアイテムのアイコンを表示させます。

次にレイヤー構成を少し変更します。

ピクチャ 19

まず、タイムラインで現状のフレームを全て選択し、
1フレーム右へ移動させます。
※1フレーム目は軽くしておいた方がいいためです。
またデータを読み込んだり、全体で使う変数を定義したり、
ファイル全体の制御部分を管理する部分なので
1フレーム目に余分なものは置かないと私は解釈しました。


ピクチャ 20

これで何も表示されない状態になりました。
各レイヤーの1フレーム目には空のキーレイヤーがある状態です。

次に、新しくできたラベルレイヤーの
1フレーム目に名前をつけます。
今回は「start」としました。

そしてアイテム欄専用のレイヤーを作成します。
ここでレイヤー名は「アイコン」とします。 

これで準備は完了です。


1−2 アイコンの作成

1−1で作成したアイコンレイヤーに
鍵を入手時のアイコンを作ります。

ピクチャ 22

そして、ムービークリップにシンボル化後、
インスタンス名を設定します。
今回は「item1」としました。
これからitemは後ろの番号を増やしていく形で
管理していきます。

ピクチャ 23

もしも、取得時の画像とアイコン画像が
同一のものでいい場合はライブラリーから
ドラッグすると手間が省けます。

ただし、インスタンス名の変更を忘れないように!


ここからスクリプトについて書く予定でしたが、
長くなりそうなので次記事にします。

次は少し難しいです。


 

前回から引き続きアイテムの取得についてです。

今回はアイテム取得の際に、
コメントを表示させてみたいと思います。

1.コメント欄の作成

まずコメントを表示する欄を作ります。

ピクチャ 12

まず鍵レイヤーを選択し、
部屋の作成の時に描いた下部の枠から
はみ出さないように、テキストツールで
コメントの枠を作成します。

作成後、インスタンス名を設定します。
※プロパティ上部のテキストボックスです。
今回は「komento」と付けました。

ASを書く時に使うので分かりやすい名前がいいと思います。


2.ASの書き換え

今回もまずはスクリプトを拝借。

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

前回のAS2.0に赤文字の一文が足されていますが、
これがコメントを表示するためのスクリプトです。 

このスクリプトをAS3.0用に書き換えます。
書き換えたのがコチラ

key_mc.addEventListener(MouseEvent.CLICK, click_hundler);
function click_hundler(evt:MouseEvent):void {
MovieClip(root).key_mc.visible = false;
MovieClip(root).komento.text = "鍵を手に入れた";
}

赤文字の部分は1で設定したコメントボックスの
インスタンス名を記載します。
AS3.0では文字列の部分は""で囲わないと、
エラーが出るようなので注意して下さい。

※緑文字の部分です

また、AS3.0では予め文字列を定義する事で
次のように書く事もできます。

var str1:String = "鍵を手に入れた。"
MovieClip(root).komento.text = "str1";

定義の書き方は『var 変数:型 = α』です。
型が文字列の場合はString、数字の場合はintという具合です。
そして型の部分は文字列や数字の場合は、
いちいち記載しなくても大丈夫です。

そんな訳で最終的なスクリプトがこれです。

var str1 = "鍵を手に入れた。"
key_mc.addEventListener(MouseEvent.CLICK, click_hundler);
function click_hundler(evt:MouseEvent):void {
MovieClip(root).key_mc.visible = false;
MovieClip(root).komento.text = "str1";
}
 
文字列の定義はクリックした後に
する必要もないので先に定義しておきます。

この辺りは理解するのに少し苦労しました。


3.フレームに記載

それでは2で書いたスクリプトを
前回のスクリプトに付け足します。

ピクチャ 14

これで鍵をクリックすると、
「鍵を手に入れた。」というコメントを
表示する事ができるようになりました。

少しづつですがAS3.0が理解できてきたので、
ちょっとアレンジを加えてみました。

ピクチャ 13

予めstr1をコメント欄に表示しておいて、
鍵を取得時にコメントがstr2に切り替わるように変更しました。
またコメントの色も変化させてみました。

ピクチャ 15

                  ↓

ピクチャ 16

この辺りは関数の使い方さえ分かれば
色々と応用が効くようになりそうですね。

中々AS3.0面白くなってきました!

次回は取得したアイテムをアイテム欄に
表示してみようと思います。

第2回目ですね!

今回はついに部屋の遷移に挑戦です。
AS初挑戦なのでもっといい書き方や
注意点等があれば教えて頂けると本当に嬉しいです!

1.移動ボタンの作成

 ピクチャ 11

まずは移動させるための移動ボタンを
作る必要があるので、部屋レイヤーに
左右に長方形でボタンを作成します。
形は別に何でもいいです!

ピクチャ 13

そして、ボタンの画像が完成後、
選択しシンボルに変更します。
画像選択し右クリックからシンボルに変換できます。
シンボル名はどんな名前でも大丈夫です。

ただし種類はボタンを選択して下さい!
※厳密にはムービークリップでもできるようなのですが、
まぁボタンなので素直にボタン選択します。


ピクチャ 15

これでプロパティを確認し画像のようになっていれば成功です。
最後にインスタンス名を変更します。

私の場合は

左:transbarL_btn
右:transbarR_btn

としました。
ここは、AS書く時に使うので分かりやすい名前を
使った方がいいと思います!

ピクチャ 16

最後に、部屋のレイヤーの1フレーム目を選択し、
F6キーで4フレーム目まで部屋画像をコピーします。

そして分かりやすいように各部屋の色を変更しました。
これで最低限の部屋画像が4面完成です笑


2.部屋の遷移のAS 

2-1 AS2.0用のコードをAS3.0用に書き換え 

さて、ついにASを書く時がきました!
AS2.0環境ではスクリプトを直接ボタンに
記載できるのですが、AS3.0は無理なので、
アクションレイヤーの1フレーム目に記載します。

そして遷移のAS2.0のスクリプトが

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

こちらなのですが、このスクリプトの
on(Release)という書き方もAS3.0では無理ため、
AS3.0用に書き換えなくてはなりません…。

これはいきなり詰みそうな感じがしましたが、
あれこれ調べてようやく書き方を発見!

どうやらこう書けばいいようです。

transbarL_btn.addEventListener(MouseEvent.CLICK,transClickL);
function transClickL(evt:MouseEvent):void{gotoAndStop("s2"); }
 
1行目でtransbarL_btnにマウスをクリックした時に
 transClickLというイベントを定義。

2行目でそのイベントの内容を記載する形ですね。
※:voidの意味がいまいち分からないのですが、
とりあえずは気にしなくてよさそうなのでこのまま行きます笑


ココで注意点はtransbarL_btnの部分は
先ほど記載したボタンのインスタンス名に
しないと上手く動作しないです。
完全一致なので注意ですね! 
 
また、transClickLの部分は自分で
好きに定義して大丈夫です! 


2-2 4部屋分のASを記載

2−1でボタン1つ分のASが分かったので
今度はこのASを4部屋分のボタンに適用させる必要があります。

以下最終のスクリプトです。
※もっと簡略に書く方法もあるかも知れませんが、
とりあえず一番分かりやすかったもので書いてみました。

transbarL_btn.addEventListener(MouseEvent.CLICK,transClickL);
transbarR_btn.addEventListener(MouseEvent.CLICK,transClickR);
function transClickL(evt:MouseEvent):void{
if (currentLabel == "s1"){ 
gotoAndStop("s2"); 
}else if(currentLabel == "s2"){
gotoAndStop("s3"); 
}else if(currentLabel == "s3"){
gotoAndStop("s4"); 
}else if(currentLabel == "s4"){
gotoAndStop("s1"); }
}

function transClickR(evt:MouseEvent):void{
if (currentLabel == "s1"){ 
gotoAndStop("s4"); 
}else if(currentLabel == "s2"){
gotoAndStop("s1"); 
}else if(currentLabel == "s3"){
gotoAndStop("s2"); 
}else if(currentLabel == "s4"){
gotoAndStop("s3"); }
}
 
ラベルを使って、場合分けしてみました。
currentLabelで現在のラベル名を取得できます!
※フレーム指定で移動する事もできるのですが、
どちらがいいのかは不明です…。
この辺りは試してみて検証するしか無さそうです…。
とりあえずは本家様の通りにやってみます。

注意点としてはASの条件式を書く際に
currentLabel == "s1"の==を=と間違いやすいです。
イコールは==と記載するようです。


それではこのASをアクションフレームの
1フレーム目に記載します! 

ピクチャ 17

ここまでを動作確認してみると、
各部屋の遷移ができるようになりました。

AS楽しいですが大変です…。
とりあえず今回はここまでにします。

次はアイテムの取得に挑戦します! 

このページのトップヘ