Cocos Creator：坐标系

在 Cocos Creator 3.8 中，节点坐标系统是游戏开发中的关键概念。它帮助开发者定位和排列场景中的各种元素。以下是关于节点坐标的使用详解：

坐标系

Cocos Creator 使用两种主要的坐标系：世界坐标系（World Coordinate）和本地坐标系（Local Coordinate）。

1. 世界坐标系：也被称为绝对坐标系，它是全局统一的坐标系统。所有节点的位置都是相对于这个坐标系的原点（通常位于屏幕左下角）。

2. 本地坐标系：也称为相对坐标系，是指每个节点相对于其父节点的坐标系。本地坐标系的原点通常是节点的锚点，方向取决于父节点的旋转角度，缩放则由父节点的缩放决定。

节点位置

每个节点都有一个 position 属性，用于表示该节点在其父节点坐标系中的位置。你可以通过以下方式设置或获取节点的位置：

// 设置节点的位置
node.setPosition(cc.v2(x, y));

// 获取节点的位置
const position = node.getPosition();
console.log("Node's position: ", position);

这里，cc.v2() 是创建一个新的二维向量的方法，接受两个参数：x 和 y 分别代表位置的 x 和 y 坐标。

坐标转换

在某些情况下，你可能需要将一个节点从一个坐标系转换到另一个坐标系。例如，如果你想要移动一个节点到另一个节点的位置，你需要先将目标节点的位置转换成世界坐标，然后再将其转换回源节点的本地坐标。

这里我们要注意convertToWorldSpaceAR已经在v3.8中弃用了。

v3.8 实现原理（不想了解可以直接跳过）

所以，在最新的版本中我们可以使用下面的方案：

    /**
     * @en Inversely transform a point from world coordinate system to local coordinate system.
     * @zh 逆向变换一个空间点，一般用于将世界坐标转换到本地坐标系中。
     * @param out The result point in local coordinate system will be stored in this vector
     * @param p A position in world coordinate system
     */
    public inverseTransformPoint (out: Vec3, p: Vec3): Vec3 {
        Vec3.copy(out, p);
        // we need to recursively iterate this
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        let cur = this;
        let i = 0;
        while (cur._parent) {
            dirtyNodes[i++] = cur;
            cur = cur._parent;
        }
        while (i >= 0) {
            Vec3.transformInverseRTS(out, out, cur._lrot, cur._lpos, cur._lscale);
            cur = dirtyNodes[--i];
        }
        return out;
    }

这是github上的关于node成员方法的源码。

这段代码是 Cocos Creator 中 Node 类的 inverseTransformPoint 方法的实现。下面是对这段代码的详细解释：

1. 函数接收两个参数：out 和 p。

   • out 是一个 Vec3 对象，用于存储转换后的本地坐标点。
   • p 是一个 Vec3 对象，表示要转换的世界坐标点。

2. 首先，将输入的世界坐标点 p 的值复制到输出变量 out 中。

3. 然后，初始化一个循环计数器 i 为 0，并将当前节点（即调用 inverseTransformPoint 方法的节点）赋值给 cur。

4. 接下来是一个 while 循环，当 cur._parent 存在时（意味着 cur 还有父节点），递归地遍历所有父节点。在这个过程中，我们将每个节点添加到 dirtyNodes 数组中，并更新 cur 为当前的父节点。

5. 当所有的父节点都被遍历后，我们开始从最后一个父节点向回迭代（通过减少 i 的值）。对于每个节点，我们使用 Vec3.transformInverseRTS 方法将 out 变量中的坐标逆向变换到当前节点的局部坐标系中。这个方法接受三个参数：目标坐标、源坐标和一个包含旋转、平移和缩放信息的对象。

6. 最后，函数返回 out 变量，它现在包含了输入世界坐标点相对于调用 inverseTransformPoint 方法的节点的本地坐标。

总的来说，inverseTransformPoint 方法通过递归地逆向应用每个父节点的变换，将一个世界坐标点转换为相对于调用该方法的节点的本地坐标点。

在 Cocos Creator 中，inverseTransformPoint 是 Node 类的一个成员方法，用于将一个世界坐标点转换为相对于节点的本地坐标点。这个方法对于处理父节点与子节点之间的坐标转换非常有用。

简单示例：（干货or解决方案在这里！）

以下是一个简单的例子来说明 inverseTransformPoint 的用法：

import { Node } from "cc";

class MyComponent extends Component {
  private parent: Node;
  private child: Node;

  onLoad() {
    this.parent = this.getComponent("Parent");
    this.child = this.getComponent("Child");
  }

  update() {
    // 获取一个世界坐标点（假设是鼠标点击的位置）
    const worldPos = cc.v3(100, 200, 0);

    // 将世界坐标点转换为相对于 child 节点的本地坐标点
    const localPos = this.child.inverseTransformPoint(worldPos);

    console.log(`Local position relative to child: ${localPos}`);
  }
}

在这个例子中，我们首先获取了一个世界坐标点（在这个例子中，我们使用了 (100, 200, 0) 作为示例）。然后，我们调用了 child.inverseTransformPoint() 方法，将这个世界坐标点转换为了相对于 child 节点的本地坐标点。最后，我们输出了转换后的本地坐标点。

请注意，inverseTransformPoint 方法接受一个 Vec3 对象作为参数，并返回一个新的 Vec3 对象，表示转换后的本地坐标点。

锚点

每个节点都有一个 anchor 属性，它是一个 Vector2 对象，表示节点的锚点相对于节点自身大小的位置。默认情况下，锚点位于节点的中心（即 (0.5, 0.5)）。可以通过修改锚点来改变节点的对齐方式。

// 设置节点的锚点
node.setAnchorPoint(cc.v2(x, y));

// 获取节点的锚点
const anchor = node.getAnchorPoint();
console.log("Node's anchor point: ", anchor);

缩放和旋转

除了位置之外，节点还有 scale 和 rotation 属性，分别控制节点的缩放比例和旋转角度。

// 设置节点的缩放比例
node.setScale(x, y); // 或者 node.setScale(cc.v2(x, y));

// 获取节点的缩放比例
const scale = node.getScale();
console.log("Node's scale: ", scale);

// 设置节点的旋转角度（单位：弧度）
node.setRotation(angleInRadians);

// 获取节点的旋转角度（单位：弧度）
const rotation = node.getRotation();
console.log("Node's rotation in radians: ", rotation);

请注意，在 Cocos Creator 中，所有的旋转都是以弧度为单位的，而不是度数。

总结

以上就是关于 Cocos Creator 3.8 中节点坐标的使用详解。理解并熟练掌握这些概念可以帮助你在游戏中准确地定位和排列各个元素。

心得

学习官方源码是最快的获取解决方案的途径，可以少走很多的弯路。
这里是API官方说明：inverseTransformPoint
这里是GitHub源码：inverseTransformPoint