等轴测图中的Z轴

Question

我正在用JavaScript和HTML5画布测试等轴测图。 我在JavaScript 2D数组中存储Tile Map数据。

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

Answer 1

如果不知道Z如何影响平铺的位置，很难回答。 如果Z仅仅意味着绘制顺序（并且由于HTML5 Canvas不支持Z索引），那么您还应该将瓦片数据存储在已排序的数组中，以便在绘制单个切片时对其进行迭代。

对于等距地砖是常见的最上面的片（位于(0,0)）具有一个(- mapWidth - mapHeight) Z次序和位于(x,y)任何瓦片具有((-mapWidth + x) + (-mapHeight + y))。

等距瓷砖贴图的另一个概念是图层。可以为图层分配一个高度属性，将其移至另一图层上方。