Question

我已经创建了一个等距环境，所有这些都在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

}

可能有其他解决方案吗？

Answer 1

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

就其他解决方案而言，我建议使用插入排序，而不是一次又一次地重建列表。在你的情况下，几乎没有变化，所以只需更新需要它的那些。

如何将等距对象从一个图块转换为另一个图块而不重叠其他图块

1 个答案: