game-engine - 如何在不与其他图 block 重叠的情况下将等距对象从一个图 block 过渡到另一个图 block

Question

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

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

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

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

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

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

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

非常感谢所有帮助。

我的平铺代码示例:

// 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);
    }
}

编辑:

我想到的一个解决方案(在自己回读问题之后)是遍历所有图 block ，获取图 block 高度数组，对其进行排序，然后进行传统绘图。像这样:

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 的所有内容执行此操作。

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