logo标签列表

等轴测引擎绘图问题

javascriptgame-engineisometric
6
我正在尝试用js(canvas)编写游戏引擎。到目前为止，一切都很好。但是我遇到了一个问题：我的世界呈菱形，我从上到下渲染瓦片。
问题在于，当我有一个大于1个瓷砖的瓷砖时（例如2x2），就会出现这种情况：
房子定义在(2,1)瓦片上。左边的岩石放置在(1,0)上。
先渲染(1,0)瓦片，接下来渲染(2,1)瓦片，因为它在同一行并且在右侧。
如何解决这个问题？
你不能按照屏幕上图形的y位置（暂时忽略瓷砖），以它们底部中心点的距离排序，然后按照顺序绘制它们吗？ - Marty
好的，岩石和房子的y位置是完全相同的，即使岩石的y位置更低（更靠近顶部），它也应该重叠在房子上方。此外，还应该可以有一个地图构建器，这样您就可以将房屋放在任何您想要的地方。确定哪些精灵应该在之前的精灵之前绘制会变得非常复杂。 - Sander Visser
2
如果你把房子分成两个部分，那么这将会变得简单得多。这样，分支出去的部分就可以被视为自己的图形并且在后面。 - Marty
是的，这也是我的想法，我应该将整个方块（2x2）垂直地分成3个笔画。一个表示1,1（左半笔画），一个表示2,1（全笔画），还有一个表示3,1（右半笔画）。而且我应该在游戏加载时执行这个操作。 - Sander Visser
听起来你已经掌握了它 - 我喜欢这样。祝你好运。 - Marty
这将是一个挑战，但我喜欢挑战，让它在场景管理器中完美展现。 - Sander Visser
4个回答
4
您可以将图形拆分为较小的部分-一个单元格上的一个瓷砖一部分，从而避免问题。一个好方法是这样的：如果您可以直接从上面查看网格，则每个角色精灵不应溢出其分配给它们的单元格的边缘。

例如，下面的单元格可能只包含由较小立方体显示的房子的前部：

enter image description here

在某些情况下，您可能还需要在同一单元格中微观管理多个角色精灵，但这是一个更小空间中的相同概念。
每个瓷砖上放一个图块，需要4个瓷砖。 还有一种可能：取(2,0)图块的左半部分，并将其扩展到整个图像的高度，然后是(2,1)的一个图块和(3,1)的右半部分。或者这种4个瓷砖的方法更好？ - Sander Visser
1
@SanderVisser 如果你愿意，我会选择每个瓷砖一个。我相信这样会得到最好和最一致的结果。 - Marty
把烟囱切开可能有些困难，因为这个瓦片只是一个PNG文件而且是方形的。将其分成三个垂直部分比分成更多部分要容易一些。或者我漏掉了什么？ - Sander Visser
@SanderVisser 我认为在这种情况下，你拥有的房子不适合你所拥有的网格。最近我一直在我的PSP上玩《Tactics Ogre》，所有的建筑物等都与网格完美匹配，这使得工作变得容易。 - Marty
但是，当我有一个2x3的瓷砖（一个稳定的瓷砖）时，如果从3D模型渲染到等角视图，它看起来会更好。如果我将其设置为1x1，并在旁边放置一个也是1x1的树，那么一切都会失去比例，这是我真正想要避免的。此外，高度可以超过瓷砖尺寸所覆盖的范围。 - Sander Visser
显示剩余2条评论
1
针对这个例子，有一个更简单的解决方案。
现在房子占据这些空间：2x0、3x0、2x1、3x1，并且您正在从2x1的位置绘制房子。
如果您改为从2x0的位置绘制房子（并仍然占据同样的4个瓷砖），所有瓷砖都将按正确的顺序绘制。
只要您在屏幕行中从上到下绘制瓷砖，您就可以轻松使用2x2、3x3、4x4或任何正方形大小的超大瓷砖而无需切割。只需沿其中间行位置绘制这些较大的瓷砖。我经常使用左上角作为这些大瓷砖的网格锚点。因为一旦您绘制了大等角正方形的最左侧（或右侧）角，您就将已经绘制的所有东西分离开来。
长方形的超大瓷砖（例如2x1、2x3、2x4、3x4、4x5）通常需要比仅按屏幕行从上到下的绘制顺序更复杂的绘制顺序算法。我选择将它们切成正方形瓷砖。
提醒一下，如果您想采用这种方式，中世纪房屋瓦片已经分成垂直的部分，可以使用（我的原件在OpenGameArt上）。
0

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

我可以将精灵切成下图所示的3个部分

第一部分绘制在坐标（2,0）上

第二部分绘制在坐标（2,1）上

第三部分绘制在坐标（3,1）上

因此，我们在底部瓷砖上垂直切割它（绘制的瓷砖形状像一个V形） 这对于每个4x4大小的瓷砖都适用。

我们可以忽略瓷砖（3,0）

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

线有点偏移，但这就是想法 我需要睡觉了（最后的2当然是3）

enter image description here

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

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这样的瓷砖。
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接