どうも、東京経済大学のさいがやんです。
今回は、おまつりゲームのマップの制作過程、第２弾！
色分けマップのマスごとの画像づくり
前回、Excelのマスを使い、視覚的に色分けマップを作るところまで紹介しました。その後は、ただの色ではなく、実際のゲーム画面に使用する画像を作ります。
僕は絵をスマートフォンで書いて、そのスクリーンショットを使うことにしました。
画像ではなく単色で事足りるなら、画像を作らなくていいマスもあります。例えば下駄箱は色を指定するだけで、画像を使っていません。
色や画像と、番号を対応させる
ゲーム画面のマップを作るときは、起こしたい効果（例えば画像や色の表示、プレイヤーの移動など）と番号を結びつけて、マスごとに適切な番号を割り当てます。
おまつりゲームでは、木、下駄箱、テントなどの通過できないマスと、途中から上がれるようになる「やぐら」などのマスと、地面や人など、いつでも通過することのできるマスがあります。プレイヤーを移動させる関数を作るときの条件式が作りやすくなるように、移動のしかたによって番号をまとめておくと便利です。
▲３０～５４は屋外の通過できるマス。
コードで番号を並べる
番号ごとに何の画像・色にするかが決まったら、その番号を、色分けマップと番号表を見ながらコードに書きます。
▲使う画像素材も書く。
地図を描画する関数がなければプログラムで表示させることはできませんが、ひとまずこれで、どのようなマップの見た目にするかの情報ができました。今回はここで終わりです。ありがとうございました！
＜参考文献＞
・田中賢一郎『ゲームで学ぶ JavaScript 入門』インプレス、2015年
・田中賢一郎『ゲームを作りながら楽しく学べる HTML5+CSS+JavaScript』インプレス、2017年
・田中賢一郎『ゲームで学ぶ JavaScript 入門 増補改訂版～ブラウザゲームづくりでHTML&CSSも身につく！』インプレス、2022年
