おまつりゲーム制作過程: 11月 2025

2025年11月30日日曜日

マップ制作過程（２：プログラムでのマップづくり）

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

今回は、おまつりゲームのマップの制作過程、第２弾！

色分けマップのマスごとの画像づくり

前回、Excelのマスを使い、視覚的に色分けマップを作るところまで紹介しました。その後は、ただの色ではなく、実際のゲーム画面に使用する画像を作ります。

僕は絵をスマートフォンで書いて、そのスクリーンショットを使うことにしました。

例えば、これはやぐらの絵の１マスですが、PNG形式で自分が分かりやすいファイル名にして保存しておきます。僕は、"kouhaku.png"にしました。このように画像を作っていきます。

画像ではなく単色で事足りるなら、画像を作らなくていいマスもあります。例えば下駄箱は色を指定するだけで、画像を使っていません。

色や画像と、番号を対応させる

ゲーム画面のマップを作るときは、起こしたい効果（例えば画像や色の表示、プレイヤーの移動など）と番号を結びつけて、マスごとに適切な番号を割り当てます。

おまつりゲームでは、木、下駄箱、テントなどの通過できないマスと、途中から上がれるようになる「やぐら」などのマスと、地面や人など、いつでも通過することのできるマスがあります。プレイヤーを移動させる関数を作るときの条件式が作りやすくなるように、移動のしかたによって番号をまとめておくと便利です。

▲１～１９は通過できないマス。

▲２０～３０はやぐら関係の、後から入れるようになるマス。

▲３０～５４は屋外の通過できるマス。

▲５５～５９は校舎の中の通過できるマス。

▲６０～はマップの切り替えなどを伴うことがあるマス。

コードで番号を並べる

番号ごとに何の画像・色にするかが決まったら、その番号を、色分けマップと番号表を見ながらコードに書きます。

▲使う画像素材も書く。

地図を描画する関数がなければプログラムで表示させることはできませんが、ひとまずこれで、どのようなマップの見た目にするかの情報ができました。

今回はここで終わりです。ありがとうございました！

＜参考文献＞

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

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

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

2025年11月6日木曜日

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

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

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

手描きのイメージ図

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

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

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

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

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

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

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

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

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

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

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

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