3

我已经创建了一个等距环境，全部使用 Javascript 和 HTML5（2D Canvas），大部分工作正常。我面临的问题是具有不同高度的图块，然后对图块上对象的索引进行排序（在这种情况下，同时在两个图块之间并排移动）。

例如，一个对象可能位于它前面的瓷砖后面，因为它所在的瓷砖的高度是 -1。我想出的解决方案是在绘制瓷砖之后直接绘制瓷砖的每个对象，从 0,0 开始并从那里绘制每一行和每一列。

这很有效，直到我需要在两个图块之间转换一个对象。此时，要么对象必须使用中间图块（这是在下图中实现的），要么在对象之后绘制图块时，图块将与对象重叠。使用中间图块也会产生问题，即同一“行”上的栅栏对象被绘制，因为立方体在 1,3 处使用了图块中更高的 z-index（这在图 1 中略微可见）。

http://i.stack.imgur.com/PQJ0H.png

http://i.stack.imgur.com/DupM7.png

我认为绘制等距环境的久经考验的方法只是为瓦片设置 1 层，为对象设置 1 层，然后对象永远不能位于瓦片后面，但这只是我不想遵守的限制。

所以我的问题是，当从上到下绘制整个环境（或任何其他可能的方式）时，依次绘制每个图块及其对象，是否有一种巧妙的方法来推迟对象的绘制或创建一个数组以正确的顺序绘制的对象？有没有其他人遇到过类似的问题，有没有其他人找到任何解决方案？

非常感谢所有帮助。

我的平铺代码示例：

// each column
for(y=0; y<totalColumns; y++){
    // each row
    for(x=0; x<totalRows; x++){
        tile = tiles[y][x];
        // draw tile
        drawTile(tile);
        objects = objects[y][x];
        // draw objects for that tile
        drawObjects(objects);
    }
}

编辑：

我想到的一个解决方案（在将问题读回给自己之后）是遍历所有瓷砖，获取一组瓷砖高度，对其进行排序，然后进行传统绘图。像这样：

var layers = [];

for(var y=0; y<cols; y++){
    for(var x=0; x<rows; x++){
        tile = tiles[y][x];
        if(!layers.indexOf(tile.height)) layers.push(tile.height);
    }
}

// sort layers
layers.sort(/*function here to sort layers*/);

for(l=0; l<layers.length; l++){
    // draw tiles for this layer

    // draw objects for this layer

}

还有其他可能的解决方案吗？

4

1 回答 1

0

您在解决方案中做正确的事情。您想对没有 alpha 的所有内容执行此操作。

至于其他解决方案，我建议使用插入排序而不是一次又一次地重建列表。在您的情况下，更改很少，因此只需更新需要它的更改。

于 2014-06-20T20:04:38.813 回答