使用菱形图块转换游戏的鼠标位置背后的数学原理是什么?



我正在开发一个基于轴测(等距,但具有倾斜视图)的图块游戏。

我的磁贴系统工作正常,现在我正在继续讨论输入问题。

磁贴在视觉上不匹配(未对齐/偏移的菱形)与其背后的逻辑(数组)。

在我用"google-fu"找到的许多方法之间,对输入应用转换("旋转")似乎是一种(代码量方面)易于实现且性能良好的方法。

问题是,对于我找到的所有来源,我无法真正掌握哪些数字来自哪里,也无法理解公式对它们的作用。

所以,我想解释一下"仿射变换"的数学公式(如果这是它的名字,因为我不确定......


@Yochai_Timmer 对这个问题的回答是我想用的,但我不明白这些值来自哪里(主要是*),也不明白对它们做了什么。

[大部分*]:"28"是半个磁贴的宽度和全高,"14"是半高,"56"是全宽......可能。。。但这几乎是我从中得到的全部,所以正确与否,无论如何我仍然被困住了。


如果它可以帮助您给我更清晰的答案,我自己的瓷砖是由46 height 80 width的,并且我使用相同的方法应用(渲染)它们(瓷砖1x2y的右上角位于瓷砖1x1y的中心,依此类推......

另外,我使用的是Java,API是Slick2D。因此,如果您知道任何有助于公式数学的隐藏函数/类(例如:Math.sen()Math.cos()、...)或一般问题,也欢迎您指出它们,因为它可能对我有很大帮助。

转换背后的关键思想是将磁贴视为经过线性转换的普通矩形。 为了理解这一点,假设你从一个普通正方形开始,就像这样:

  +-----+
  |     |
  |     |
  +-----+
给定这个正方形,

你可以想到两个向量,它们通过只取正方形的两条边来定义"向上"和"右"的含义:

  +-----+     ^
  |     |     |
  |     |     |
  +-----+     +----->

我们称这些向量为 i 和 j。 您可以想象通过旋转和倾斜正方形将这个正方形变成钻石。 如果你这样做,你可以考虑这两个向量 i 和 j 会发生什么:

   /          ^
  /          /
 /          /
     /      
    /        
   /          >

请注意 i 和 j 是如何旋转和缩放的。

确定投影下点的平方的数学背后的诀窍是尝试逆转这个过程。 不是从正常的 i 和 j 向量开始,以倾斜/旋转的向量结束,而是从偏斜/旋转的 i 和 j 向量开始,然后尝试在变换下将世界转换回一个漂亮的方形网格。 您执行的计算工作方法是说"假设鼠标位于投影中的位置 (x, y),如果我们撤消此转换,它将具有什么坐标 (x', y')? 这背后的所有数学都是在两个坐标空间之间进行转换的标准线性代数。 有关如何执行此操作的描述,请考虑阅读这篇关于转换矩阵的维基百科文章,其中描述了此过程的工作原理。

希望这有帮助!

相关内容

  • 没有找到相关文章

最新更新