JavaScript と HTML5 Canvas で Isometric Tile Map を試しています。タイル マップ データを JavaScript 2D 配列に格納しています。
// 0 - Grass
// 1 - Dirt
// ...
var mapData = [
[0, 0, 0, 0, 0],
[0, 0, 1, 0, 0,
...
]
そして描く
for(var i = 0; i < mapData.length; i++) {
for(var j = 0; j < mapData[i].length; j++) {
var p = iso2screen(i, j, 0); // X, Y, Z
context.drawImage(tileArray[mapData[i][j]], p.x, p.y);
}
}
ただし、この関数は、すべてのタイルの Z 軸がゼロに等しいことを意味します。
var p = iso2screen(i, j, 0);
mapData[0][0]
おそらく、 Z 軸が 3 に等しいなどのアイデアと方法を知っている人がいるかもしれません。mapData[5][5]
Z 軸は 5 に等しい。?
私には考えがあります:Grass、Dirtの関数を書き、この関数を2D Arrayに保存して、後で描画しmapData[0][0].setZ(3);
ます。しかし、タイルごとに関数を書くのは良い考えですか?