等距引擎绘图问题

Question

我正在尝试用js（canvas）编写游戏引擎。到现在为止还挺好。 但是我遇到了一个问题，我的世界是菱形的，我从上到下渲染瓷砖。

问题是当我的瓷砖大于1个瓷砖（例如2x2）时会发生这种情况：

房屋在瓷砖（2,1）上定义。 左边的岩石放在（1,0）

上

首先渲染图块（1,0），下一个图块为（2,1），因为它位于同一行和右侧。

你怎么解决这个问题？

Answer 1

你应该能够通过将图形分成更小的部分来避免这个问题 - 网格上每个图块一个。想一想的好方法是这样的：如果你可以从正上方查看网格，那么每个精灵都不应该溢出它们被分配到的单元格的边缘。

例如，下面的这个单元格可能只包含较小的立方体所示的房屋的前部：

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

Answer 2

对于这个具体的例子，有一个更简单的解决方案。

现在房子占据了这些空间：2x0,3x0,2x1,3x1 而你正在从2x1位置抽出房子

如果您改为从2x0位置画出房子（并且仍然占据相同的原始4个图块），则所有图块将以正确的顺序绘制。

只要您在屏幕行中绘制顶部（背面）到底部（正面）的瓷砖，就可以轻松使用2x2,3x3,4x4或任何方形尺寸的超大瓷砖而无需切片。只需沿着中间行位置绘制这些较大的瓷砖。我经常使用左角作为这些大型瓷砖的网格锚。这样做是有道理的，因为只要你画出一个大的等距方块的最左边（或右边）角，你就可以将它背后的所有东西与它前面的东西分开。

矩形超大瓷砖（例如2x1,2x3,2x4,3x4,4x5）通常需要比上下屏幕行更复杂的绘制顺序算法。我选择将它们切成方形瓷砖。

旁注，如果你想要去那条路线（我的原件在OpenGameArt上），中世纪的房屋瓷砖已经将原始部分拆分成垂直切片。

Answer 3

我认为这里最好的解决方案显然是使用预定义的指标（例如图块的宽度）来划分图形。 基于图块的系统广泛用于2D游戏，包括等距游戏。

示例：http://www.spriters-resource.com/pc_computer/fallouttactics/

Answer 4

我的解决方案（也感谢Marty Wallace！）

我可以将精灵切成3张图片，如下图所示

第一部分是在coord上绘制的（2,0）

第二部分是在coord上绘制的（2,1）

第三部分是在coord（3,1）上绘制的

所以我们在底部瓷砖上垂直切片（绘制的瓷砖就像V形） 这适用于每个瓷砖尺寸，如4x4

我们可以忘记瓷砖（3,0）

蓝色：实际的png 红色：切割线

线条有点偏，但这是关于这个想法 我需要一些睡眠（最后2个是3个课程）

这也给我们一个简单的计算：

sizeX - 1 = The number of sides on the right of the middle section (the big one)
sizeY - 1 = The number of sides on the left side of the middle section

每个切片都是切片宽度的一半，中间切片是整个切片宽度。 右侧切片仅包含切片的最右侧部分，左侧最左侧。

我们可以轻松使用3x1或1x4等瓷砖