等軸測圖中的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))。

等距瓷磚貼圖的另一個概念是圖層。可以爲圖層分配一個高度屬性，將其移至另一圖層上方。