javascript - 等距引擎绘图问题

Question

我正在尝试用 js( Canvas )编写游戏引擎。到目前为止，一切都很好。但我遇到了一个问题，我的世界是菱形的，我从上到下渲染瓷砖。

问题是当我的图 block 大于 1 个图 block (例如 2x2)时，会发生这种情况:

房子定义在方 block (2,1) 上。左边的石头放在(1,0)上

瓦片 (1,0) 首先呈现，下一个瓦片是 (2,1)，因为它在同一行且在右侧。

你怎么解决这个问题？

Answer 1

您应该能够通过将图形分解成更小的部分来避免该问题 - 网格上的每个图 block 一个。一个很好的思考方式是这样的:如果您可以从正上方查看网格，则每个 Sprite 不应该溢出它们分配到的单元格的边缘。

例如，下面的这个单元格应该只包含较小立方体所示的房子的前部:

在某些时候，您可能还需要对同一单元格中的多个 Sprite 进行微观管理，但在更小的空间中这是相同的概念。