当前位置：首页 > news >正文

Cocos Creator：坐标系

news 2025/8/2 17:50:34

Cocos Creator：坐标系

- 坐标系
- - 节点位置
  - 坐标转换
  - - v3.8 实现原理（不想了解可以直接跳过）
    - 简单示例：（干货or解决方案在这里！）
  - 锚点
  - 缩放和旋转
- 总结
- - 心得

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

坐标系

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

世界坐标系：也被称为绝对坐标系，它是全局统一的坐标系统。所有节点的位置都是相对于这个坐标系的原点（通常位于屏幕左下角）。
本地坐标系：也称为相对坐标系，是指每个节点相对于其父节点的坐标系。本地坐标系的原点通常是节点的锚点，方向取决于父节点的旋转角度，缩放则由父节点的缩放决定。

节点位置

每个节点都有一个 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-aliaslet 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 方法的实现。下面是对这段代码的详细解释：

函数接收两个参数：out 和 p。
- out 是一个 Vec3 对象，用于存储转换后的本地坐标点。
- p 是一个 Vec3 对象，表示要转换的世界坐标点。
首先，将输入的世界坐标点 p 的值复制到输出变量 out 中。
然后，初始化一个循环计数器 i 为 0，并将当前节点（即调用 inverseTransformPoint 方法的节点）赋值给 cur。
接下来是一个 while 循环，当 cur._parent 存在时（意味着 cur 还有父节点），递归地遍历所有父节点。在这个过程中，我们将每个节点添加到 dirtyNodes 数组中，并更新 cur 为当前的父节点。
当所有的父节点都被遍历后，我们开始从最后一个父节点向回迭代（通过减少 i 的值）。对于每个节点，我们使用 Vec3.transformInverseRTS 方法将 out 变量中的坐标逆向变换到当前节点的局部坐标系中。这个方法接受三个参数：目标坐标、源坐标和一个包含旋转、平移和缩放信息的对象。
最后，函数返回 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);