如何将等轴测对象从一个平铺过渡到另一个平铺，而不与其他平铺重叠

Question

我已经创建了一个等轴测环境，都是Javascript和HTML5（2D画布）的，基本上可以正常工作。我面临的问题是使用不同高度的平铺，然后对平铺上对象的索引进行排序（在本例中，在两个平铺之间并排移动）。

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

在我需要在两个平铺之间转换对象之前，这很有效。此时，要么对象必须使用中间平铺（这是在下图中实现的），要么平铺将与对象重叠，因为平铺是在对象之后绘制的。使用中间平铺还会出现一个问题，即同一“行”上的Geofence对象会被覆盖，因为立方体使用的z索引比1,3处的平铺高得多（这在图1中略微可见）。

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

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

我认为绘制等轴测环境的尝试和测试方法是，只有一层用于瓷砖，一层用于对象，然后对象永远不能位于瓷砖后面，但这只是我不想遵守的限制。

所以我的问题是，当从上到下绘制整个环境时（或者任何其他可能的方式），依次绘制每个磁贴和它的对象时，是否有一个聪明的方法可以推迟绘制对象或创建一个对象数组以正确的顺序绘制？其他人是否遇到过类似的问题，是否有人找到了解决方案？

非常感谢大家的帮助。

我的平铺代码示例：

// 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的东西都这样做。

至于其他解决方案，我建议使用插入排序，而不是一次又一次地重建列表。在您的情况下，几乎没有什么变化，所以只需更新需要的内容即可。