等轴测引擎绘图问题答案

【问题标题】：Isometric engine drawing issue等轴测引擎绘图问题
【发布时间】：2013-10-09 22:42:42
【问题描述】：

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

问题是当我有一个大于 1 个图块（例如 2x2）的图块时，会发生这种情况：

房子是在瓷砖 (2,1) 上定义的。左边的石头放在 (1,0)

首先渲染图块 (1,0)，下一个图块是 (2,1)，因为它位于同一行且位于右侧。

你怎么能解决这个问题？

【问题讨论】：

您不能按图形在屏幕上的 y 位置对图形进行排序（暂时忽略图块，从图形的底部中心点开始测量）并按顺序绘制它们。
好吧，岩石和房屋的 y 位置完全相同，即使岩石的 y 位置较低（因此更靠近顶部），它也应该与房屋重叠。还应该有一个地图生成器，所以你可以把你的房子放在你想要的任何地方。确定应该在前一个精灵之前绘制哪些精灵会变得非常复杂
如果你把你的房子分成两部分，事情会简单得多。这样，分支出来的部分将被视为自己的图形并落在后面。
是的，这也是我的想法，我应该将整个图块 (2x2) 分成垂直切割的 3 个笔划。一个用于 1,1（左半冲程），一个用于 2,1（全冲程），一个用于 3,1（右半冲程）。我应该在游戏加载时这样做
听上去你已经完完全全了——我喜欢这样。祝你好运。

标签： javascript game-engine isometric

【解决方案1】：

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

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

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

【讨论】：

每块一块是 4 块。还有什么可能的：取图块的左半部分 (2,0) 并将其带到图像的整个高度，而不是 (2,1) 的一部分和 (3,1) 的右半部分。或者这是 4 tile 方法更好？
@SanderVisser 如果你愿意的话，我会在每块瓷砖上放一个。我相信这会产生最好和最一致的结果。
烟囱很难切割，瓷砖只是一个png文件和正方形。将其切割成 3 个垂直部分会比切割更多部分更容易。或者我错过了什么
@SanderVisser 我认为在这种特殊情况下，您拥有的房子不太适合您拥有的网格。最近我每天在我的 PSP 上玩 Tactics Ogre 好几个小时，所有建筑物等都很好地匹配了网格，这很容易使用。
但是当我有一个 2 x 3 的瓷砖（马厩）时。如果将其从 3d 模型渲染到等距视图，它看起来会好很多。如果我把它做成 1x1 并且我在它旁边放一棵树，它也是 1x1，那么一切都会不成比例，我真的想防止。高度也可以超过瓷砖的大小

【解决方案2】：

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

现在房子占据了这些空间：2x0、3x0、2x1、3x1 你正在从位置 2x1 绘制房子

如果您改为从 2x0 位置绘制房子（并且仍然占据相同的原始 4 个瓷砖），所有瓷砖都会以正确的顺序绘制。

只要您在屏幕行中从上（后）到下（前）绘制图块，您就可以轻松使用 2x2、3x3、4x4 或任何正方形大小的超大图块，而无需切片。只需沿着它们的中间行位置绘制这些较大的瓷砖。我经常使用左角作为这些大瓷砖的网格锚点。这样在我的脑海中是有道理的，因为一旦你画出一个大等距正方形的最左（或右）角，你就会把它后面已经画的东西和它前面的东西分开。

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

我可以将精灵切成如下图所示的 3 块

第一部分绘制在坐标 (2, 0) 上

第二部分绘制在坐标 (2, 1) 上

第三部分绘制在坐标 (3, 1) 上

所以我们在底部的瓦片上垂直切片（绘制的瓦片就像一个 V 形）这应该适用于像 4x4 这样的每个图块大小

我们可以忘记 tile (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 等瓷砖

【讨论】：