Tiled Map Editorとの出会い
相当銘打ったタイトルになってしまっていますが、そんな大それたたものじゃないです。
今回、マップ制作にあたり、マップチップという小さな画像サイズの部品をパズルのように組み合わせてフィールドを作る手法を選びました。
しかし、プログラム上だけで画像1つ1つを管理して一枚画を作るのは極めて大変ということで、あらかじめ外部ツールで作った画面を貼り付けていく方法をとりました。そこで使ったのが「Tiled Map Editor」です。
以下は実際の画面です。
ざっくりですが、このような感じで地面とその上でレイヤーを分けています。
始めに地面レイヤーをキャンバスに描画し、その次にプレイヤー、最後にその他の建築物を描画し、一枚の画面を作っています。
そうすることで地面の上にはプレイヤーが描画され、建築物の裏にプレイヤーが被さる様にしています。(今回は訳あって個別に描写しているタイルもありますが後々一枚にまとめる予定です。）
こんな感じ
以下は該当するコード部分です。
function fieldpaint() {
gc.fillStyle = "rgba(0, 0, 0, 1)";
gc.fillRect(0, 0, 864, 640);
var y, x;
for (y = 0 ; y < map.length ; y++) {
for (x = 0 ; x < map[y].length ; x++) {
{gc.drawImage(glass, x * 32, y * 32, 32, 32);
}
if (map[y][x] == 283) {
gc.drawImage(Rock1, x * 32, y * 32, 32, 32);
}
if (map[y][x] == 310) {
gc.drawImage(Rock2, x * 32, y * 32, 32, 32);
}
}
}
for (y = 15 ; y < 17 ; y++) {
for (x = 0 ; x < map[y].length ; x++) {
{gc.drawImage(Road_Rock, x * 32, y * 32, 32, 32);
}
}
}
gc.drawImage(imgOnion, px * 32, py * 32, 32, 32);
gc.drawImage(Map1, 0, 0, 864, 640);
}
しかし、このままではプレイヤーが所構わずすり抜けてしまうので、当たり判定を付けていく必要があります。家や木のように、当たり判定が必要な所とそうでない所で細かく分ける必要があるので、私なりの工夫をしています。
そのことについては次回に話そうと思います。
ということで、次回のタイトルは「当たり判定について」です。
参考文献
素材：
ドット絵世界 https://yms.main.jp/
