Cocos Creator坐标系详解：从本地、世界到屏幕坐标的转换与实战

1. 从一次“诡异”的Bug说起：为什么我的精灵跑偏了？

那天下午，我正在调试一个简单的点击交互功能：玩家点击屏幕任意位置，一个角色精灵就会“闪现”到那个位置。逻辑看起来很简单，监听触摸事件，获取触摸点的坐标，然后把这个坐标赋值给精灵的position属性。我信心满满地运行起来，点击屏幕中央，结果角色“嗖”地一下飞到了屏幕右上角，差点飞出画布。我反复检查了触摸事件回调里的代码，event.getLocation()获取坐标，node.position = pos赋值，逻辑清晰，毫无问题。问题出在哪？这就是典型的坐标系认知混淆导致的“事故现场”。

在 Cocos Creator 里，一个简单的position属性背后，其实牵扯到至少三套不同的坐标系系统：节点本地坐标系、世界坐标系和屏幕坐标系。如果你没搞清楚它们之间的关系和转换规则，就会像我一样，遇到精灵位置飘忽不定、UI元素对不齐、点击检测失效等各种看似“诡异”的问题。很多新手开发者觉得坐标系抽象难懂，其实只要抓住几个核心概念和它们之间的转换关系，一切都会变得清晰。这篇文章，我就结合自己踩过的坑和项目经验，帮你彻底理清 Cocos Creator 中的坐标系，让你在开发中不再为此迷糊。

2. 坐标系家族：三位核心成员与它们的职责

要理解坐标系，我们可以把它想象成描述一个物体位置的“语言系统”。在不同的语境（坐标系）下，描述同一个位置的“说法”是完全不同的。在 Cocos Creator 的场景中，主要有三位核心成员。

2.1 节点本地坐标系：以父节点为原点的“家庭地址”

这是最基础、也最常用的一套坐标系。每个节点（Node）都有一个属于自己的本地坐标系。在这个坐标系里：

• 原点 (0, 0)：永远位于该节点的锚点（Anchor）所在的位置。这是理解本地坐标的关键！一个节点的position属性，描述的就是该节点的锚点在其父节点的本地坐标系中的坐标。
• 坐标轴：X轴向右为正，Y轴向上为正。这是 Cocos Creator 的默认设置，也是2D游戏领域的常见约定。

举个例子，假设我们有一个名为Player的精灵节点，它挂在一个名为GameLayer的节点下。如果Player的position是 (100, 50)，它的锚点是默认的 (0.5, 0.5) 即中心点。那么，它的含义是：Player精灵的中心点，位于其父节点GameLayer本地坐标系中的 (100, 50) 这个位置。

注意：节点的position属性永远是其锚点在父节点坐标系中的位置。改变锚点，节点的视觉位置不会变，但position值的含义变了。比如锚点从中心 (0.5,0.5) 改为左下角 (0,0)，那么同样的position(100,50) 表示的就是节点的左下角在父坐标系中的位置，节点整体会向右上方移动。

2.2 世界坐标系：绝对的“宇宙标准”

如果说本地坐标系是“家庭地址”（相对于父亲的家），那么世界坐标系就是“GPS经纬度”（相对于整个场景的绝对位置）。它是整个场景树的根节点（通常叫 Canvas 或一个顶层节点）的本地坐标系，被所有节点共享作为绝对参考。

• 原点 (0, 0)：位于场景根节点的锚点位置（通常是 Canvas 的中心或左下角，取决于 Canvas 的适配模式）。
• 作用：当我们需要知道一个节点在屏幕上的绝对位置，或者需要让两个没有直接父子关系的节点进行位置交互时，就必须使用世界坐标。

继续上面的例子，Player节点的世界坐标，描述的是Player的锚点在世界坐标系（即根坐标系）中的位置。这个值不能直接通过属性获取，需要通过计算或 API 转换得到。

2.3 屏幕坐标系：与设备窗口直接挂钩的“像素地图”

这是最贴近我们感知的坐标系，它直接对应着设备屏幕的像素网格。

• 原点 (0, 0)：在 Cocos Creator 中，默认位于屏幕的左下角。这一点非常重要，且与一些其他图形库（如某些原生UI系统原点在左上角）不同。
• 坐标轴：X轴向右为正，Y轴向上为正。
• 单位：像素（px）。它的范围取决于屏幕分辨率，例如一个 1920x1080 的设备，X轴范围是 0~1920，Y轴范围是 0~1080。

所有用户的输入事件，如触摸（Touch）、鼠标点击（Mouse），其位置信息最初都是以屏幕坐标的形式提供的。这就是我开头那个Bug的根源：我从触摸事件拿到的是屏幕坐标 (比如点击了屏幕中央 (960, 540))，却直接把它赋值给了节点的position。而position期望的是父节点本地坐标，两者数值和参考系天差地别，节点自然就“飞”了。

3. 坐标系间的“翻译官”：核心转换API详解

理解了三种坐标系的含义，下一步就是掌握它们之间互相转换的方法。Cocos Creator 在cc命名空间下提供了非常完善的转换API，它们就是你的“坐标翻译官”。

3.1 本地坐标 <=> 世界坐标

这是最频繁的转换之一。核心方法是节点实例上的convertToWorldSpaceAR和convertToNodeSpaceAR。我强烈推荐使用带AR（Anchor Relative）后缀的版本，因为它们以节点的锚点为参考点，更符合直觉。

• node.convertToWorldSpaceAR(localPos): 将相对于本节点锚点的本地坐标localPos，转换到世界坐标系。

  // 假设 player 是一个节点，锚点在中心 let localOffset = cc.v2(50, 0); // 表示在player自身坐标系中，其锚点右边50像素的位置 let worldPos = player.convertToWorldSpaceAR(localOffset); // worldPos 现在是一个世界坐标系下的坐标，表示player中心点右侧50像素的世界位置

  这个API常用于：计算一个节点特定点（如武器尖端）的世界位置，用于碰撞检测或特效生成。

• node.convertToNodeSpaceAR(worldPos): 将一个世界坐标worldPos，转换到本节点坐标系中（相对于本节点锚点）。

  let worldPos = cc.v2(200, 300); // 一个已知的世界坐标 let localPosInPlayer = player.convertToNodeSpaceAR(worldPos); // localPosInPlayer 表示 worldPos 这个点，在player节点坐标系中，位于其锚点的什么方位 // 如果结果是 (10, -20)，表示该点在player中心的右方10像素，下方20像素处。

  这个API常用于：判断一个世界空间中的点（如另一个物体的位置）相对于当前节点的方位。

实操心得：convertToWorldSpace和convertToNodeSpace（不带AR）是以节点本地坐标系原点（即节点位置position所描述的点）为参考进行转换的，容易产生混淆。在绝大多数涉及节点自身偏移的场景下，使用带AR的版本更不容易出错。记住：AR版本参考锚点，非AR版本参考本地坐标系原点。

3.2 世界坐标 <=> 屏幕坐标

由于屏幕坐标系与设备相关，而世界坐标系是逻辑坐标，它们之间的转换需要通过摄像机（Camera）来完成。在 Cocos Creator 中，通常主摄像机负责这个映射。

• 世界坐标转屏幕坐标：camera.getWorldToScreenPoint(worldPos)

  let worldPos = player.convertToWorldSpaceAR(cc.v2(0, 0)); // 获取player中心的世界坐标 let screenPos = this.camera.getWorldToScreenPoint(worldPos); // screenPos 现在是一个Vec3，其x和y分量就是对应的屏幕像素坐标。

  这个API常用于：在屏幕上绘制跟随物体的UI提示（如血条、名字），需要知道物体在屏幕上的像素位置。

• 屏幕坐标转世界坐标：camera.getScreenToWorldPoint(screenPos)

  let screenPos = cc.v2(touchX, touchY); // 触摸点的屏幕坐标 let worldPos = this.camera.getScreenToWorldPoint(screenPos, new cc.Vec3()); // worldPos 现在是一个世界坐标系下的坐标，表示这条从摄像机出发的射线，在游戏世界Z=0平面上的交点。

  这就是解决我开头那个Bug的关键！触摸事件给的坐标是屏幕坐标，必须通过摄像机转换成世界坐标，才能被游戏世界中的节点理解。

  // 正确的点击移动代码 onTouchMove(event: cc.Event.EventTouch) { let screenPos = event.getLocation(); // 获取屏幕坐标 let worldPos = this.mainCamera.getScreenToWorldPoint(screenPos, new cc.Vec3()); // 通常我们还需要将世界坐标转换到目标节点的父节点坐标系 let localPosInParent = this.player.parent.convertToNodeSpaceAR(worldPos); this.player.position = localPosInParent; }

注意事项：getScreenToWorldPoint返回的是一个三维向量 (Vec3)。在2D游戏中，我们通常只关心X和Y分量，Z分量默认为0。这个方法本质上是计算一条从摄像机出发穿过屏幕指定像素点的射线，与游戏世界中某个Z值平面（默认是Z=0）的交点。如果你的游戏节点不在Z=0的平面上，需要做进一步处理。

3.3 UI 节点坐标系：一个特殊的本地坐标系

对于挂在 Canvas 下的 UI 节点，情况有些特殊。Canvas 通常采用适配模式（如 FIT_WIDTH, FIT_HEIGHT），它的尺寸和锚点会影响其子节点的坐标系。

• UI节点的position：依然是其锚点在父节点（可能是Canvas或其他UI节点）本地坐标系中的位置。但这个坐标系的单位不是像素，而是设计分辨率下的单位。例如，你的设计分辨率是 1920x1080，一个UI节点的 position 是 (960, 540)，那么无论屏幕实际分辨率如何，它都会位于其父节点坐标系的正中央。
• UI节点与屏幕坐标：由于 Canvas 已经处理了屏幕适配，将 UI 节点坐标转换到屏幕坐标通常更简单。你可以直接使用node.parent.convertToWorldSpaceAR(node.position)获取该节点锚点的世界坐标（对于UI树，这个世界坐标的原点通常在Canvas中心或左下角，取决于设置），然后再用摄像机转换到屏幕坐标。但对于点击检测，Cocos Creator 的 UI 事件系统已经帮我们做好了转换，我们通常直接用event.getLocation()获取的屏幕坐标，与 UI 节点的包围盒进行比较即可。

4. 锚点：本地坐标系的“原点”与视觉控制的关键

前面多次提到锚点（Anchor），它是理解本地坐标系的钥匙。锚点是一个归一化的值 (Vec2)，范围是 [0, 1]，它定义了节点本地坐标系原点在其自身纹理或尺寸范围内的相对位置。

• (0, 0)：左下角
• (0.5, 0.5)：中心（默认值）
• (1, 1)：右上角

锚点的核心影响：

1. 决定position属性的参考点：node.position描述的是节点锚点在父坐标系中的位置。改变锚点，节点的position值虽然不变，但节点的视觉位置会瞬间改变，因为参考点变了。
2. 影响子节点的布局原点：一个节点的本地坐标系原点就在其锚点上。所有子节点的position都是相对于这个原点来定位的。如果你把锚点从中心改到左下角，那么所有子节点都会整体向右上方移动，因为它们的“爸爸的家”的原点挪到了左下角。
3. 简化布局与动画：
   • 定位：想让一个按钮始终贴在屏幕左下角？将它的锚点设为 (0, 0)，position设为 (0, 0) 即可。无论屏幕如何缩放，它都会牢牢钉在左下角。
   • 缩放与旋转：所有变换（缩放、旋转）都是围绕锚点进行的。将锚点设为 (0.5, 0.5)，缩放时节点会以其中心均匀放大缩小；将锚点设为 (0, 0)，缩放时节点会像从左下角“生长”或“收缩”一样。

避坑技巧：在编辑器中频繁调整节点位置时，如果发现节点“飘走”，首先检查是不是误点了锚点工具并移动了锚点。保持一个良好的习惯：先确定锚点（这个节点打算以哪个点作为定位和变换的参考），再设置位置。对于需要精细对齐的UI，使用锚点预设比手动调整position更可靠。

5. 实战演练：典型场景下的坐标系应用与问题排查

理论说再多，不如实际操练。下面我们通过几个典型场景，串联起坐标系知识的应用。

5.1 场景一：实现物体跟随鼠标（触摸）移动

这是开头Bug的正解。步骤分解：

1. 获取输入坐标：通过触摸/鼠标事件监听，使用event.getLocation()获得屏幕坐标。
2. 转换到世界坐标：使用主摄像机camera.getScreenToWorldPoint()将屏幕坐标转换为世界坐标。注意处理返回的 Vec3，我们通常取其 x, y。
3. 转换到目标父节点坐标：将世界坐标转换到移动目标节点其父节点的本地坐标系中。使用targetNode.parent.convertToNodeSpaceAR(worldPosVec2)。
4. 赋值：将上一步得到的本地坐标赋值给目标节点的position。

// 假设 this.node 是跟随鼠标的精灵，this.camera 是主摄像机 onMouseMove(event: cc.Event.EventMouse) { // 1. 获取屏幕坐标 let screenPos = cc.v2(event.getLocationX(), event.getLocationY()); // 2. 转换为世界坐标 (Vec3) let worldPosVec3 = this.camera.getScreenToWorldPoint(screenPos, new cc.Vec3()); let worldPosVec2 = cc.v2(worldPosVec3.x, worldPosVec3.y); // 3. 转换为父节点本地坐标 let localPosInParent = this.node.parent.convertToNodeSpaceAR(worldPosVec2); // 4. 更新位置 this.node.position = localPosInParent; }

5.2 场景二：在物体头顶生成一个世界UI（如伤害数字）

我们希望伤害数字飘在怪物头顶，但伤害数字本身是UI节点，可能挂在Canvas下。

1. 获取怪物头顶的世界坐标：先计算怪物头顶相对于其锚点的本地偏移（如cc.v2(0, 怪物身高/2 + 10)），然后使用monster.convertToWorldSpaceAR()转换为世界坐标。
2. 将世界坐标转换为UI坐标系：伤害数字的父节点可能是Canvas或某个UI层。使用uiParentNode.convertToNodeSpaceAR(worldPos)将世界坐标转换到该UI父节点的本地坐标系。
3. 设置伤害数字位置：将转换后的坐标赋值给伤害数字节点的position。

// 生成伤害数字 spawnDamageNumber(damage: number, monster: cc.Node) { // 1. 计算怪物头顶世界坐标 let localOffset = cc.v2(0, monster.height / 2 + 20); let worldPos = monster.convertToWorldSpaceAR(localOffset); // 2. 创建伤害数字节点（假设是预制体） let damageNode = cc.instantiate(this.damagePrefab); damageNode.getComponent(cc.Label).string = `-${damage}`; // 3. 将伤害数字添加到UI层（this.uiLayer 是Canvas下的一个节点） this.uiLayer.addChild(damageNode); // 4. 将世界坐标转换到UI层的坐标系 let uiLocalPos = this.uiLayer.convertToNodeSpaceAR(worldPos); damageNode.position = uiLocalPos; // 5. 添加一个上浮动画... }

5.3 场景三：判断点击是否落在某个精灵上（非UI节点）

Cocos Creator 的cc.Node有getBoundingBox()方法，但它返回的是节点在其父坐标系下的轴对齐包围盒（AABB）。不能直接用屏幕坐标和它比较。

1. 获取触摸点的世界坐标：同场景一，camera.getScreenToWorldPoint(touchPos)。
2. 获取精灵的世界包围盒：先通过node.getBoundingBox()获取本地包围盒，这是一个矩形（cc.Rect）。但这个矩形的原点 (x, y) 是相对于节点本地坐标系原点的。我们需要的是这个矩形在世界坐标系中的表示。一个简单的方法是计算包围盒四个角的世界坐标。

   let localBox = node.getBoundingBox(); // 计算包围盒四个角的本地坐标（相对于节点原点） let bottomLeft = cc.v2(localBox.x, localBox.y); let topRight = cc.v2(localBox.x + localBox.width, localBox.y + localBox.height); // 将角点转换到世界坐标 let worldBottomLeft = node.convertToWorldSpaceAR(bottomLeft); let worldTopRight = node.convertToWorldSpaceAR(topRight); // 现在可以构造一个世界坐标系下的矩形 let worldBox = cc.rect(worldBottomLeft.x, worldBottomLeft.y, worldTopRight.x - worldBottomLeft.x, worldTopRight.y - worldBottomLeft.y);

3. 判断包含：使用worldBox.contains(worldTouchPos)判断触摸点世界坐标是否在矩形内。

更优方案：对于复杂形状或性能要求高的场景，可以使用物理引擎（如内置的Box2D）的碰撞检测，或者为精灵添加cc.PolygonCollider组件，使用cc.Intersection.pointInPolygon方法进行精确判断。但对于简单的矩形/圆形按钮，上述包围盒方法足够用。

6. 常见问题排查清单与调试技巧

当你遇到位置相关的问题时，可以按以下清单逐一排查：

问题：节点位置不对，或者点击没反应。

• [ ]检查锚点：确认节点的锚点设置是否符合你的预期。你是不是想以中心定位但锚点却在左下角？
• [ ]检查父节点：节点的position是相对于其直接父节点的。确认它的父节点是不是你想象的那一个。父节点的位置、缩放、旋转都会影响子节点。
• [ ]检查坐标系转换：如果你在处理输入（触摸/鼠标），是否忘记了将屏幕坐标转换为世界坐标？是否忘记了将世界坐标转换到正确的父节点本地坐标？
• [ ]检查摄像机：用于屏幕/世界坐标转换的摄像机引用是否正确？是否是渲染目标场景的主摄像机？
• [ ]使用调试绘制：在update中临时绘制调试信息是终极法宝。

  update(dt) { // 1. 绘制节点的世界包围盒 let worldBox = ...; // 计算方法见上文 this.drawRect(worldBox, cc.Color.RED); // 2. 绘制触摸点世界位置 if (this.lastTouchWorldPos) { this.drawDot(this.lastTouchWorldPos, cc.Color.GREEN); } }

  你可以写一个简单的调试脚本，用cc.Graphics组件来画线、画矩形、画点，直观地看到坐标系和边界。

问题：UI元素在不同分辨率下错位。

• [ ]检查Canvas适配模式：Canvas组件的Fit Height、Fit Width等设置会影响根节点的实际尺寸和子节点的坐标系缩放。
• [ ]使用锚点布局，而非硬编码位置：对于需要适配的UI，尽量使用锚点（Anchor）和边距（Left, Right, Top, Bottom）来定位，而不是设置固定的position值。
• [ ]确认设计分辨率：在Canvas上设置的设计分辨率，是所有UI节点本地坐标的参考。确保你的UI布局基于此分辨率设计。

问题：旋转或缩放后，子节点位置乱了。

• [ ]理解变换中心：记住，缩放和旋转是围绕节点的锚点进行的。如果子节点的布局依赖于父节点的尺寸，父节点缩放后，子节点的相对位置（position）虽然数值没变，但视觉距离会同比变化。如果需要子节点保持与父节点某条边的固定距离，应该使用锚点约束，而不是固定position。

坐标系是游戏开发空间思维的基石。初学时会觉得绕，但一旦理解了“本地坐标相对于父节点锚点”、“世界坐标是绝对参考”、“屏幕坐标来自输入且需摄像机转换”这三层关系，并通过convertToWorldSpaceAR、convertToNodeSpaceAR和摄像机的getScreenToWorldPoint这几个核心API进行串联，所有位置问题都能迎刃而解。多写调试代码，把看不见的坐标和边界用图形画出来，是加深理解最快的方式。当你下次再遇到精灵“乱飞”或者点击“失灵”时，希望你能淡定地打开这篇文章，按照清单一步步锁定问题所在。