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

2013年11月

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

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

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面白くなってきました!

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

さて日は空きましたが、
第3回目ですね!

今回はアイテムの取得に挑戦です!

1.鍵の絵を描く

ピクチャ 7

新規レイヤーを作成しそこに鍵の絵を描きます。

次に、鍵を選択しシンボル化を行って、
ムービークリップを作成します。
その後インスタンス名を変更します。
今回は「key_mc」としました。
※本番ではFlash上では鍵を書かず、部屋画像作成時に書く事になります。
そのため、Flash上に鍵が存在しないので透明の選択範囲を作成し、それをシンボル化しインスタンス名を付ければOKです。



2.AS3.0に書き換え

まず、本家様からスクリプトを拝借。

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

AS2.0では前記事でも紹介したように、
シンボルにスクリプトを直接記載できたので
たったこれだけで本を取得し、取得した後に
見えなくする事ができます。

ただし、AS3.0ではon(release)や_root.
という書き方が使えないので書き換える必要があります。

key_mc.addEventListener(MouseEvent.CLICK, click_hundler);
function click_hundler(evt:MouseEvent):void {
MovieClip(root).key_mc.visible = false;

書き換えたスクリプトです。
前回同様、addEventListenerを使って、
クリックした時の動作を定義します。

また_rootの部分はMovieClip(root)と書き換えれば大丈夫です。
※MovieClip(root)の部分はパス指定の部分に当たります。
同クラス内のインスタンスなので無くても正常に動きました?が、
付けておいた方がいいと思います。


3.アクションフレームに記載


ピクチャ 8

鍵レイヤーの最初のキーフレームを選択し 
先ほどのスクリプトを記載します。
この時、インスタンス名が間違っていないか注意です。

これで動作確認すると、鍵をクリックすると消えます。

ピクチャ 9

動作確認時の画像です。
分かりやすいように鍵の周囲をふち取ってみました。
このふちはkey_mcではないのでそのまま残っています。

次は鍵の取得時にコメントを表示させてみます。

第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楽しいですが大変です…。
とりあえず今回はここまでにします。

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

ついに記念すべき第1回目です!

今回はまず元となる部屋の作成と遷移を
頑張って作っていきたいと思います!

とりあえず、前記事で予告した通り、
『世界一わかりにくい脱出ゲームの作り方』様や
 http://hakuhin.jp/様を参考に作っていきます。

ピクチャ 4

早速AS3.0で新規ファイルを作成しスタートです!


1.レイヤーの追加

BlogPaint

とりあえず、まず用意するレイヤーは、
・部屋(部屋の背景)
・アクション(ここに制御スクリプトを記載)
・ラベル(フレームの名前、遷移させる時の名前に使用)
・ストップ(stop();の制御のみ)

ピクチャ 7

レイヤーを作成後、
ストップレイヤーの1フレーム目に

stop();

アクションスクリプトを記載します。
※これを書かないと制御できません。


2.ラベルの設定 

ラベルレイヤーの4フレーム目までキーフレームを挿入し
右上のプロパティの名前欄でラベル名を入力します。

フレーム1〜4まで一つずつ選択し、
それぞれs1、s2、s3、s4と設定しました。

ラベルが上手くつけれると画像のようにペナントが付きます。

※果たしてラベルレイヤーを分ける必要はあるのか?
部屋のレイヤーに直接書いてもいい気がする…。



3.部屋の作成

本番では3Dのレンダリングソフト等を使って、
きれいな部屋の画像を用意したいところですが、
今回はAS3.0の練習がメインなので、
簡単な部屋の図を4面書きます。

ピクチャ 8

部屋レイヤーの1フレーム目を選択し、
右端のツールを使って部屋の絵を描きます。
※他のレイヤーに書いてしまわないように、
ロックしておいた方が作業がしやすいです。

上段が部屋、下段の長方形はコメント欄用です。


次はようやく本格的なASを書いていきます。

このページのトップヘ