网站建设div可拖拽布局,wap浏览器,恒基建设集团网站,免费自学编程100例Cocos Creator#xff1a;坐标系 坐标系节点位置坐标转换v3.8 实现原理#xff08;不想了解可以直接跳过#xff09;简单示例#xff1a;#xff08;干货or解决方案在这里#xff01;#xff09; 锚点缩放和旋转 总结心得 在 Cocos Creator 3.8 中#xff0c;节点坐标系… 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(Nodes 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(Nodes anchor point: , anchor);缩放和旋转
除了位置之外节点还有 scale 和 rotation 属性分别控制节点的缩放比例和旋转角度。
// 设置节点的缩放比例
node.setScale(x, y); // 或者 node.setScale(cc.v2(x, y));// 获取节点的缩放比例
const scale node.getScale();
console.log(Nodes scale: , scale);// 设置节点的旋转角度单位弧度
node.setRotation(angleInRadians);// 获取节点的旋转角度单位弧度
const rotation node.getRotation();
console.log(Nodes rotation in radians: , rotation);请注意在 Cocos Creator 中所有的旋转都是以弧度为单位的而不是度数。
总结
以上就是关于 Cocos Creator 3.8 中节点坐标的使用详解。理解并熟练掌握这些概念可以帮助你在游戏中准确地定位和排列各个元素。
心得
学习官方源码是最快的获取解决方案的途径可以少走很多的弯路。 这里是API官方说明inverseTransformPoint 这里是GitHub源码inverseTransformPoint
