javascript - 等轴测图中的Z轴

我正在JavaScript和HTML5画布上尝试等轴测平铺图。
我正在JavaScript 2D数组中存储Tile映射数据。

// 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；
我的想法是：为草、土编写函数，并将该函数存储到2D数组中，然后绘制mapData[0][0].setZ(3);。但是为每个tile编写函数是个好主意？

最佳答案

如果不知道Z如何影响平铺的位置，很难回答。
如果Z只是表示绘图顺序（并且由于HTML5 Canvas不支持Z索引），那么还应该将平铺数据存储在排序数组中，以便在绘制单个平铺时可以对其进行迭代。
对于等距瓷砖，最上面的瓷砖（位于(0,0)处）的Z阶为(- mapWidth - mapHeight)，而任何位于(x,y)处的瓷砖都具有( (-mapWidth + x) + (-mapHeight + y))。
等距平铺贴图的另一个概念是层。可以为图层指定一个高度特性，该特性将图层移到另一个图层之上。