Cocos Creator:坐标系
- 坐标系
- 节点位置
- 坐标转换
- 锚点
- 缩放和旋转
- 总结
在 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 坐标。
坐标转换
在某些情况下,你可能需要将一个节点从一个坐标系转换到另一个坐标系。例如,如果你想要移动一个节点到另一个节点的位置,你需要先将目标节点的位置转换成世界坐标,然后再将其转换回源节点的本地坐标。
// 将节点 B 的位置转换为世界坐标
const worldPos = b.parent.convertToWorldSpaceAR(b.position);// 将世界坐标转换为节点 A 的本地坐标
const localPos = a.parent.convertToNodeSpaceAR(worldPos);// 将节点 A 移动到节点 B 的位置
a.setPosition(localPos);
这里的 convertToWorldSpaceAR()
和 convertToNodeSpaceAR()
方法分别用于将节点的位置从本地坐标系转换到世界坐标系,以及从世界坐标系转换到本地坐标系。“AR” 表示 “Anchor Relative”,这意味着这些方法会考虑到节点的锚点。
锚点
每个节点都有一个 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 中节点坐标的使用详解。理解并熟练掌握这些概念可以帮助你在游戏中准确地定位和排列各个元素。