忍者ブログ
目標だった脱出ゲームサイトを作ってしまったので、ほぼゲーム日記になっているみずくらげの日記ブログです。
ぐだぐだな迷路作りの話をしてみる事。
たまにはブログでフラッシュの話でもしてみようという事で、作ってみたらとても疲れた迷路の話でもしてみます。
前の日記で書いている「こまろと迷路で遊ぼ」の制作話です。
素人の作る物ですので、熟練者から見たら突っ込みどころ満載なんじゃないかと思いますが、ダメ出しとアドバイスは大歓迎ですのでよろしくです。
なお、作成ソフトはParaFlaです。
使えるアクションスプリクトは
マウスクリック系[on(release),on(press),on(rollOver)]
if文
onClipEvent(enterFrame)と(Load)
gotoAndPlay("実行ラベル")
だけです。
その程度の知識しかない人間が行き当たりばったりで迷路を作ってみたぐだぐだな制作記録です。
書いてみたら長くなったので続きに格納する事にします。

ある日、無性に迷路が作りたくなったので、具体的な作り方は思いついてなかったけど取りあえず作り始めてみました。
まずは練習という事で、方眼紙に適当に小さい迷路を書いてみました。適当に書いて後でマスを数えたら縦11×横10でした。
10×10じゃないあたり計画性の無さがうかがえますね。
マスを数えてみたら68マスで出来ていました。
ポートピア連続殺人事件の地下迷路風の3Dな2D迷路をイメージし、取りあえず見えるのは3歩先ぐらいまでで良いかな?ぐらいの気持ちで壁パーツを考えます。
壁左1(自分の位置)壁左2(1歩先)壁左3(2歩先)壁左4(3歩先)
壁右1~4
壁正面1~4
壁正面左1~4
壁正面右1~4の20個の壁パーツがあれば何とかなりそうです。
こんな感じです。
迷路の壁パーツ図
取りあえずこれを1個づつスプライトに放り込んで必要なマスで表示すれば良いんじゃないかな?たぶん。とおぼろげに考えつつ、どのマスでどのパーツが必要か実際に紙に書いてみました。
全部で68マスですが、4方位いるから68×4で272カ所の風景を考えるのですね。
・・・。
・・・。
多いね。
まっすぐな通路の左右の壁って普通見ないですよね。見れなくっても大丈夫ですよね?大丈夫なはずだ!という考えのもと、直線通路の左右の壁を除外すると、188マスまで減りました。
こんな感じで番号をふりました。
迷路視点番号図

ちゃんと4方位作った方が良いとは思いますが、今回はただの壁の方向は見ないという事で考えます。
その188の番号を方眼紙の迷路のマスに実際に書き込み、それぞれの番号で必要な壁を書き出してみます。
同じ風景になる所はまとめて絵のパターンを数えたら49パターンになりました。

何となく疲れてきたなと思いつつ、いいかげん具体的な構造を考える事にします。
まずマップパーツを1個づつスプライトに放り込んで自分が識別しやすい名前をつけます。
k1(壁1)m(前)r(右)とかでいいと思います。
この20パーツある壁スプライトを重なり方を気にしつつ、まとめてマップ用のスプライトに放り込みます。
特定の番号で出したり消したりしたいので、番号に「ba」という名前を付ける事にします。
番号1ならba=1という感じです。
それで毎フレーム番号をチェックして特定の番号なら出現、そうじゃないなら消去という式を壁パーツスプライトに書いてしまえば何となく迷路っぽい物ができるんじゃないかな?と考えた所で、今必要なのはさっき作った「どの番号の時どの壁が必要か」ではなく「この壁を使うのはどの番号の時か」だという事に気づきました。
・・・。
画像パターン表見ながら書き出しなおしました。
あらためて壁パーツスプライトに式を書きます。


onClipEvent(enterFrame){
 if(_root.ba==出現させる番号1||_root.ba==出現させる番号2・・・使う番号全部||でつなぐ){
  _visible=true;
 }else{
  _visible=false;
 }
}


毎フレームもしbaが出現させる番号1または2または・・・(使う番号全部)ならば画像を表示、そうでないなら画像を消去という命令です。
簡単な式ですが、このifの中身半端なく多いです。入力するだけで疲れました。
でもこれでbaの数値が変われば壁の画像も変わるはずです。たぶん。
今の段階では番号を変える命令がないので実際にちゃんと動くのかプレビューで見る事ができません。

壁パーツ側はとりあえず置いておいて次は移動ボタンを作ります。
マップの上下左右に矢印を配置し、押すと1歩先の番号に変わる、または左右か後ろを向くようにします。
方眼紙のマップを見ながら地道に入力しました。


on(release){
 if(_root.ba==1){
  _root.ba=移動先の番号;
 }else if(_root.ba==2){
  _root.ba=移動先の番号;
  <中略>
 }else if(_root.ba==188){
  _root.ba=移動先の番号;
 }
}


・・・こんな感じです。
ボタンを押したとき番号1なら番号を移動先の番号に、番号2なら・・・を188個の番号ごとに指定します。
番号は1~188までありますのですごい行数になりました。
ここで、前にめんどくさがってまっすぐな通路の左右の壁を見れない仕様にした事を思い出して多少後悔します。
特定の番号の時、移動ボタンを消す必要があるからです。
矢印をスプライトに放り込んでenterFrameで消す番号かどうかをチェックして出現か消去か割り振ります。式は壁の出現チェックとほぼ同じです。
これで迷路内を歩けるようになったはずです。
あ、初期化の所で初期位置の番号を入力しておかないとスタートできないので注意です。
試しにプレビューしてみると、入力ミスなのか、壁使用メモ自体が間違っていたのかけっこう間違った壁が表示されました。
マップ中を歩き回って間違った壁が出る、または必要な壁が出ない番号をチェックして修正します。
この作業が終わるころには、方眼紙を見なくても迷路の形を描けるぐらいまでマップを暗記していました。
練習で作った小さい迷路のはずがこの時点でかなり疲れています。

マップ内を歩き回れるようになったので次はイベントを配置します。
迷路の中の4匹のお友達です。脱出ゲームのアイテム入手と同じ感じで作ります。
いつもの脱出ゲームと違ってこの迷路は場所ごとにフレームで分かれていないので、アイテムの出現条件にbaの番号を使います。それ以外は普通に脱出ゲームのアイテム入手と同じです。

迷路とイベントを作り終わって、動作チェックをタイトルからエンディングまで通しでしてみると、所要時間が2分ほどでした。
さすがに短いと思ったのですが、マップを完全に暗記している人間と初見さんでは違うかもしれないので、妹にテストプレイを頼んでみました。
が、レイトンVS逆転裁判に夢中で相手をしてくれません。
・・・うん。レイトンかっこいいし、しかたないよね・・・

テストプレイをしてもらうことをあきらめて、まろだけ素直に捕まらないようにしてみたりしました。
所要時間はほとんど変わりませんが。

その後、セーブを追加したり、セーブうまく動かなかったり、原因がわかってみたらただのスペル間違いだったりしたのですが、長くなったのでこのあたりで終わろうと思います。
 

PR
COMMENT
Name:
Title:
URL:
Message:
Vodafone絵文字 i-mode絵文字 Ezweb絵文字
Pass:

迷路作成
こんにちは。脱出ゲームでいつも楽しませてもらっています。

多少プログラムが分かるので迷路の作り方について。

まずマップ情報を2次元配列で作成します。
方眼紙に書かれたマップをそのまま配列データにする感じです。

map = new Array(); //配列作成
map[0] = [0,0,0,0,0,0,0];
map[1] = [0,0,1,1,1,0,0];
map[2] = [0,0,1,0,1,1,0];
map[3] = [0,1,1,0,1,0,0];
map[4] = [0,0,0,0,1,0,0];
map[5] = [0,1,1,1,1,1,0];
map[6] = [0,0,0,0,0,0,0];

mapxmax = map[0].length-1; //x方向最大値
mapymax = map.length-1; //y方向最大値

上記でx方向7、y方向7のマップ、0が壁、1が通路(通れるところ)です。

プレイヤーの情報として
現在地(x、y)と視点の方向(マップで上下左右どちらを向いているか)を
変数で管理します。

x; //プレイヤーの現在位置x
y; //プレイヤーの現在位置y
s; //視点方向 0:マップ上方向 1:マップ右方向
// 2:マップ下方向 3:マップ左方向

壁パーツスプライトの表示・非表示を上記情報から計算して求めます。
各スプライトで異なるのは◎の行だけになると思います。

例:壁左3

//現在位置から判定位置
xoffset = -1; //x方向は-1(視点方向が上のとき)◎
yoffset = -2; //y方向は-2(視点方向が上のとき)◎

if( s == 0 ){ //視点:マップ上方向のとき
xx = x + xoffset; //判定位置のx
yy = y + yoffset; //判定位置のy
}else if( s == 1 ){ //視点:マップ右方向のとき
xx = x - yoffset; //判定位置のx
yy = y + xoffset; //判定位置のy
}else{
: //下、左の判定位置計算
:
}

if( get_mapdata(xx,yy) == 0 ){ //判定位置のマップ情報が壁なら表示
_visible = true;
}else{
_visible = false;
}

function get_mapdata(cx,cy){
//マップ情報取得
//return 0:壁 1:通路

if( cx < 0 || cx > mapxmax ||
cy < 0 || cy > mapymax ){
ret = 0; //マップ外は壁
}else{
ret = map[cy][cx];
}
return ret;
}

壁の手前が壁だったときが上手く行きませんがその辺はちょっと手を入れてもらって。。

という感じで作成されると、各スプライトのテストが完了してしまえば
マップ情報をいじるだけで経路変更やマップの広さの変更ができます。
テストもとても簡単になるし信頼度も高くなります。

移動の矢印表示も同じようにマップ参照と計算でできます。

参考にしていただければと思います。
配列は脱出ゲームでも色々使えるところがあると思います。

※一応簡単な動作確認はしましたが、ソースがおかしかったらすみません。
※判定位置の計算も関数にして各スプライトから使うようにした方がいいですね。。

またマロ達楽しみにさせていただきますっ
2012.12.23  19:11  Posted by 名無し | Edit
Re:迷路作成
丁寧に教えてくださってありがとうございます。
私にはわからない単語が色々出てきたのでちょっと勉強しないと解らないのですが、まずは配列について勉強する所から始めようと思います。
知識がなさ過ぎてせっかく教えていただいた内容が理解できなくて申し訳ないです。
まろ屋のゲームは記事上部に書かれた少ないスクリプトのみで作られているため、毎回(仕掛けにパズルが含まれると特に)作成工程自体がパズル気分という、作っている側は楽しいけどユーザーどうなんだ?というノリで作られています。
2012.12.24  12:04  From みずくらげ
| prev | top | next |
| 124 | 123 | 122 | 121 | 120 | 119 | 118 | 117 | 116 | 115 | 114 |
カレンダー
11 2017/12 01
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
カウンター
プロフィール
HN:
みずくらげ
性別:
女性
趣味:
ゲーム
ブログ内検索
最新CM
[12/09 エルメス激安]
[11/27 ルイヴィトン激安]
[11/21 パネライ偽物激安]
[11/13 クリスチャンルブタン 財布 コピー]
[11/12 BVLGARI 腕時計]
P R
フリーエリア
最新TB
バーコード
アクセス解析
忍者ブログ  [PR]
  /  Design by Lenny