CocosCreator中worldMatrix深入理解（中）

2024-01-18 22:57:45

前言

在上一篇博文中，我们推导了图形变换中位移、旋转、缩放对应的变换矩阵。在本文中，我们将运用推导的变换矩阵，一一验证代码中更新节点变换矩阵的代码背后的逻辑。

节点变换矩阵的更新

游戏场景中的节点都成树形的父子关系。当前节点的worldMatrix是通过父级节点对应的矩阵获取，所以当前场景中只有一个节点时，它的worldMatrix就是自身变换矩阵。当场景中有两个或多个节点时，父节点的worldMatrix就需要考虑子节点的变换矩阵。

父级节点的worldMatrix

父级节点的worldMatrix是通过自身变换矩阵和子节点的变换矩阵相乘得到的。如下图所示：

父子节点变换矩阵示意图

其中：

A是父级节点的变换矩阵
B是子节点的变换矩阵
C是父级节点的worldMatrix

可以看出，父级节点的worldMatrix是通过将自身变换矩阵和子节点的变换矩阵相乘得到的。

子级节点的worldMatrix

子级节点的worldMatrix是通过父级节点的worldMatrix和自身变换矩阵相乘得到的。如下图所示：

子级节点变换矩阵示意图

其中：

A是父级节点的worldMatrix
B是子节点的变换矩阵
C是子级节点的worldMatrix

可以看出，子级节点的worldMatrix是通过将父级节点的worldMatrix和自身变换矩阵相乘得到的。

代码验证

为了验证上述理论，我们可以在CocosCreator中编写代码进行验证。

父级节点的worldMatrix

const parentNode = new cc.Node();
const childNode = new cc.Node();

parentNode.addChild(childNode);

// 更新父级节点的变换矩阵
parentNode.updateWorldMatrix();

// 获取父级节点的worldMatrix
const parentWorldMatrix = parentNode.getWorldMatrix();

// 打印父级节点的worldMatrix
console.log(parentWorldMatrix);

运行这段代码，你会发现父级节点的worldMatrix就是自身变换矩阵。

子级节点的worldMatrix

const parentNode = new cc.Node();
const childNode = new cc.Node();

parentNode.addChild(childNode);

// 更新子级节点的变换矩阵
childNode.updateWorldMatrix();

// 获取子级节点的worldMatrix
const childWorldMatrix = childNode.getWorldMatrix();

// 打印子级节点的worldMatrix
console.log(childWorldMatrix);

运行这段代码，你会发现子级节点的worldMatrix是通过父级节点的worldMatrix和自身变换矩阵相乘得到的。