マップ制作過程（１：手描き～Excel塗りつぶし）

 どうも、東京経済大学のさいがやんです。

今回は、おまつりゲームのマップの制作過程を紹介します！

手描きのイメージ図

僕はまず、行ったことのある盆踊り会場（学校）を参考に、ストーリーに沿うようなマップを手描きしました。

おまつりゲームは、みずほと一緒にトイレを目指すことから始まりますが、その間にクレープの誘惑を仕掛けなければなりません。そのため、クレープを食べているこどもを、トイレがある校舎の入口にスタンバイさせました。

また、クレープをぼくが買っている間に、みずほとこどもが陰に行ってバナナ鬼を始めるので、こどもとクレープ屋が同じ画面にならないようにしました。

マップが6分割と少なめなのは、（僕のような）方向音痴でも比較的迷わないようにするためです😊

Excelを塗りつぶして色分けマップ

手描きの次は、Excelで行と列を同じ長さに揃えていって、どのマスに何を置くか決めました。手描き段階では無かった物も追加したりしています。

▲校舎です。水色がドアです。黄色（チェーン）は越えられません。白い部分は壁です。紫はトイレマークをつけるマスです。左上の暗めの灰色は階段、下駄箱近くの1マスの灰色はかき氷を食べている人です。

▲校庭です。手描きから変わったのは、お茶屋さんができたのと、陰にバナナ鬼の鬼（暗い灰色）と捕まったみずほ（黄色）が来るためのマスを表示したことです。

ちなみに、１つのマップは２０×１１マスなのですが、校庭では隣同士のマップが長さ２マス分重なっています。その理由を説明させてください。

最初は、マップの範囲が重ならないような画面遷移をするつもりでした。マップ間の移動が一本道ならそれでいいのですが、校庭のような開放的な所で、マップ間の境界線に沿って移動しようとするとワープしてしまい、行先によっては抜け出せなくなることが分かりました😨

そこで、ワープしないようにこの画像のような画面遷移にして、マップが重なることになったのでした。

中途半端ですが今回は以上です。次は、マスに画像を当てはめるところから書こうと考えています！

＜参考文献＞

・田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス、2015年

・田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス、2017年

・田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版～ブラウザゲームづくりでHTML&CSSも身につく！』インプレス、2022年