游戏开发中的矩阵与变换(1)

简介: 游戏开发中的矩阵与变换

介绍


阅读本教程之前,建议您通读并理解我之前发的向量数学教程,因为本教程需要向量知识。


本教程介绍了转换以及如何使用矩阵在Godot中表示它们。它不是有关矩阵的完整深入指南。变换在大多数情况下都以平移,旋转和缩放的形式应用,因此我们将重点介绍如何用矩阵表示那些变换。


本指南大部分内容都使用Transform2D和 Vector2进行2D方面的研究,但是3D中的工作方式却非常相似。


注意

正如前面提到的教程,一定要记住,在陀,Y轴点是很重要的倒在2D。这与大多数学校教线性代数的方法相反,Y轴指向上方。

注意

约定是X轴为红色,Y轴为绿色,Z轴为蓝色。本教程使用颜色编码以匹配这些约定,但我们还将用蓝色表示原始矢量。


矩阵组件和恒等矩阵


单位矩阵表示没有平移,旋转和缩放的变换。让我们从身份矩阵及其组成与视觉外观的关系开始。

image.png



矩阵具有行和列,并且转换矩阵具有关于每个函数的特定约定。


在上图中,我们可以看到红色的X向量由矩阵的第一列表示,绿色的Y向量同样由第二列表示。更改列将更改这些向量。在接下来的几个示例中,我们将看到如何对其进行操作。


您不必担心直接操作行,因为我们通常使用列。但是,您可以将矩阵的行视为显示哪些向量有助于沿给定方向移动。


当我们引用诸如txy的值时,这就是X列向量的Y分量。换句话说,矩阵的左下角。同样,txx在左上方,tyx在右上方,tyy 在右下方,其中t是Transform2D。


缩放转换矩阵


应用比例尺是最容易理解的操作之一。首先,将Godot徽标放置在矢量下方,以便我们可以直观地看到对象上的效果:

image.png



现在,要缩放矩阵,我们要做的就是将每个分量乘以所需的比例。让我们将其放大2。1乘2变为2,0乘2变为0,因此我们得出以下结论:


image.png


为此,我们可以简单地将每个向量相乘:


Transform2D t = Transform2D.Identity;

// Scale

t.x *= 2;

t.y *= 2;

Transform = t; // Change the node's transform to what we just calculated.


如果我们想将其恢复为原始比例,可以将每个分量乘以0.5。缩放转换矩阵几乎就是所有这些。


要从现有的转换矩阵计算对象的比例,可以在每个列向量上使用length()。


注意

在实际的项目中,可以使用scaled()方法执行缩放。


旋转变换矩阵


我们将以与之前相同的方式开始,在身份矩阵下方添加Godot徽标:


image.png


例如,假设我们要顺时针旋转Godot徽标90度。现在,X轴指向右侧,Y轴指向下方。如果我们在头部旋转这些按钮,则从逻辑上看,新的X轴应指向下方,新的Y轴应指向左侧。


您可以想象一下,您同时抓住了Godot徽标及其矢量,然后将其围绕中心旋转。无论您在哪里完成旋转,向量的方向都会确定矩阵是什么。


我们需要在法线坐标中表示“下”和“左”,所以这意味着我们将X设置为(0,1),将Y设置为(-1,0)。这些也是Vector2.DOWN和Vector2.LEFT的值。当我们这样做时,我们得到旋转对象的预期结果:


image.png


如果您在理解上述内容时遇到困难,请尝试以下练习:切一张纸,在其上方绘制X和Y向量,将其放在方格纸上,然后旋转并注意端点。


为了执行代码旋转,我们需要能够以编程方式计算值。此图显示了从旋转角度计算变换矩阵所需的公式。如果这部分看起来很复杂,请不要担心,我保证这是您需要了解的最难的事情。


目录
相关文章
|
3月前
|
PHP 计算机视觉
罗德里格斯公式推导,以及如何使用cv2.Rodrigues进行旋转矩阵和旋转向量之间的相互转化
罗德里格斯公式推导,以及如何使用cv2.Rodrigues进行旋转矩阵和旋转向量之间的相互转化
100 0
|
3月前
第4章-变换-4.1-基础变换
第4章-变换-4.1-基础变换
22 0
|
6月前
|
算法 图形学
【计算机图形学】实验四 二维图形的缩放、旋转,平移,组合变换
【计算机图形学】实验四 二维图形的缩放、旋转,平移,组合变换
160 2
|
6月前
|
计算机视觉
OpenCV(二十七):图像距离变换
OpenCV(二十七):图像距离变换
62 0
|
6月前
[Halcon&几何] 直线的垂线与延长线的计算
[Halcon&几何] 直线的垂线与延长线的计算
340 1
|
前端开发 数据可视化 图形学
【数学篇】09 # 如何用仿射变换对几何图形进行坐标变换?
【数学篇】09 # 如何用仿射变换对几何图形进行坐标变换?
151 0
【数学篇】09 # 如何用仿射变换对几何图形进行坐标变换?
|
前端开发 数据可视化 API
【数学篇】05 # 如何用向量和坐标系描述点和线段?
【数学篇】05 # 如何用向量和坐标系描述点和线段?
189 0
【数学篇】05 # 如何用向量和坐标系描述点和线段?
|
算法 图形学
【计算机图形学】实验三:二维图形变换
【计算机图形学】实验三:二维图形变换
245 0
【计算机图形学】实验三:二维图形变换
|
图形学
【计算机图形学】期末复习part2:二维与三维图形变换
【计算机图形学】期末复习part2:二维与三维图形变换
169 0
【计算机图形学】期末复习part2:二维与三维图形变换
|
计算机视觉
数字图像处理实验(二)|图像变换{离散傅里叶变换fft2,离散余弦变换dct2、频谱平移fftshift}(附实验代码和截图)
数字图像处理实验(二)|图像变换{离散傅里叶变换fft2,离散余弦变换dct2、频谱平移fftshift}(附实验代码和截图)
408 0
数字图像处理实验(二)|图像变换{离散傅里叶变换fft2,离散余弦变换dct2、频谱平移fftshift}(附实验代码和截图)