2

我正在 JavaScript 和 HTML5 Canvas 中试验 Isometric Tile Map。我将 Tile Map 数据存储在 JavaScript 2D 数组中。

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

4

1 回答 1

1

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

对于等距图块，最上面的图块（位于(0,0)）的 Z 顺序为 ，(- mapWidth - mapHeight)而位于 的任何图块的 Z 顺序(x,y)为( (-mapWidth + x) + (-mapHeight + y))。

等距平铺地图的另一个概念是图层。可以为图层分配一个高度属性，将其移动到另一图层上方。

于 2012-09-24T07:36:08.083 回答