javascript - 等距图 block 图中的 Z 轴

Question

我正在 JavaScript 和 HTML5 Canvas 中试验等轴测图 block map 。我将 Tile Map 数据存储在 JavaScript 二维数组中。

// 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);。但是为每个图 block 编写函数是个好主意吗？

Answer 1

如果不知道 Z 如何影响 tile 的位置，则很难回答。如果 Z 仅表示绘制顺序(并且由于 HTML5 Canvas 不支持 Z 索引)，那么您还应该将图 block 数据存储在排序数组中，以便您可以在绘制单个图 block 时对其进行迭代。

对于等距图 block ，最上面的图 block (位于 (0,0))的 Z 顺序通常为 (- mapWidth - mapHeight) 并且任何图 block 位于 (x,y) 处有 ( (-mapWidth + x) + (-mapHeight + y))。

等距瓦片 map 的另一个概念是图层。可以为一个层分配一个高度属性，使其移动到另一层之上。