Question

我正在尝试使用JavaScript和HTML5 Canvas中的Isometric Tile Map。我将Tile Map数据存储在JavaScript 2D Array中。

// 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数组并绘制后来的mapData[0][0].setZ(3);。但是为每个瓷砖编写函数是个好主意吗？

Answer 1

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

对于等距图块，通常最上面的图块（位于(0,0)）的Z顺序为(- mapWidth - mapHeight)，位于(x,y)的任何图块都为( (-mapWidth + x) + (-mapHeight + y))。< / p>

等距瓷砖地图的另一个概念是图层。可以为图层指定一个高度属性，将其移到另一个图层上方。

等轴线贴图中的Z轴

1 个答案: