Cocos Creator:坐标系

Cocos Creator:坐标系

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

在 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-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 方法的实现。下面是对这段代码的详细解释:

  1. 函数接收两个参数:outp

    • 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 中,inverseTransformPointNode 类的一个成员方法,用于将一个世界坐标点转换为相对于节点的本地坐标点。这个方法对于处理父节点与子节点之间的坐标转换非常有用。

简单示例:(干货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);

缩放和旋转

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

// 设置节点的缩放比例
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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/218169.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用入耳耳机对耳朵有损害吗?入耳耳机和骨传导耳机哪款更值得入手?

由于入耳式耳机的传声原理,长时间使用是会对耳朵造成损害的,骨传导耳机相比与入耳耳机,不用入耳佩戴,还能在一定程度上保护听力,所以骨传导耳机更值得入手。 一、入耳耳机和骨传导耳机有什么不同 人的听觉系统分为搜…

lammps编译(2Aug2023、intel2020、rtx4070ti)

说明: [rootnode101 ~]# cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core) [rootnode101 ~]# gcc -v Using built-in specs. COLLECT_GCCgcc COLLECT_LTO_WRAPPER/usr/libexec/gcc/x86_64-redhat-linux/4.8.5/lto-wrapper Target: x86_64-redhat-lin…

修复漏洞:Diffie-Hellman Key Agreement Protocol 资源管理错误漏洞(CVE-2002-20001)

1、背景 在安全检测流程中,发现爆出这个漏洞 2、修复方案 echo "kexalgorithms curve25519-sha256,curve25519-sha256libssh.org,ecdh-sha2-nistp256,ecdh-sha2-nistp384,ecdh-sha2-nistp521" >> /etc/ssh/sshd_configsystemctl restart sshd

Vmd+lstm代码详解 完整代码数据可直接运行

项目视频讲解:Vmd+lstm时间序列预测分类回归预测代码详解 完整代码可直接运行_哔哩哔哩_bilibili 项目演示效果: 代码详解: # -*- coding: utf-8 -*- # 导入库pip install openpyxl -i https://pypi.tuna.tsinghua.edu.cn/simple import pandas as pd import numpy as np fr…

QVTK 可视化

#ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow>#include <vtkNew.h> // 智能指针 #include <QVTKOpenGLNativeWidget.h> #include <vtkCylinderSource.h> // 圆柱#include <vtkPolyDataMapper.h&g…

OpenHarmony应用开发——在标准OpenHarmony上运行应用-标准OpenHarmony工程设置

一、前言 前面我们创建了一个工程并使其在HarmonyOS系统上运行&#xff0c;本文我们来阐述一下如何在标准的OpenHarmony开发板或系统上运行。 二、详细步骤 1.下载并配置OpenHarmony SDK 首先&#xff0c;打开Settings. 将SDK选择为OpenHarmony&#xff0c;第一次选择路径应该…

Modbus RTU和Modbus TCP的区别 深入篇

目录 1 传输方式不同 2 硬件接口不同 3 校验码不同 4 指令内容不同 4.1 Modbus RTU 4.1.1 功能码为03&#xff0c;表示读寄存器 4.1.2 功能码为10&#xff0c;表示写多个寄存器 4.2 Modbus TCP 4.2.1 功能码为03&#xff0c;表示读寄存器 4.2.2 回复异常报文 5 传输速…

【软考:系统集成项目管理】之 项目管理一般知识

文章目录 1. 项目1.1 项目定义1.2 项目目标 2. 信息系统集成项目3. 项目管理3.1 项目管理的定义 1. 项目 1.1 项目定义 项目是为达到特定的目的&#xff0c;使用一定资源&#xff0c;在确定的期间内&#xff0c;为特定发起人提供独特的产品、服务或成果而进行的一系列相关关联…

java SSM教师工作量管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM 教师工作量管理系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要…

2023年12月16日(星期六)骑行樱花谷

2023年12月16日 (星期六) 骑行樱花谷(赏冬樱花&#xff09;&#xff0c;早8:30到9:00&#xff0c; 郊野公园西门集合&#xff0c;9:30准时出发 【因迟到者&#xff0c;骑行速度快者&#xff0c;可自行追赶偶遇。】 偶遇地点:郊野公园西门集合 &#xff0c;家住东&#xff0c;南…

vue实现自动打字效果(带光标效果)

代码介绍(其实就是通过字符串截取加定时拼接完成的,我相信有时间都能琢磨出来,来这里就是为了省事) 上vue页面代码: <template><div idApp><h2>{{text}}<span ref"fou" class"fousdis">{{_}}</span></h2></div>…

【数学建模】《实战数学建模:例题与讲解》第十二讲-因子分析、判别分析(含Matlab代码)

【数学建模】《实战数学建模&#xff1a;例题与讲解》第十二讲-因子分析、判别分析&#xff08;含Matlab代码&#xff09; 基本概念时间判别费歇判别贝叶斯判别 习题10.31. 题目要求2.解题过程3.程序4.结果 习题10.6&#xff08;1&#xff09;1. 题目要求2.解题过程——对应分析…

任意文件读取漏洞

使用方法php://filter/readconvert.base64-encode/resourcexxx 任意文件读取漏洞 php://filter/readconvert.base64-encode/resourceflag 在url后边接上 以base64的编码形式 读取flag里面的内容 php://filter/readconvert.base64encode/resourceflag 用kali来解码 创建一个文…

anaconda3 升级python版本

Anaconda 是一个流行的Python发行版本&#xff0c;它包括了科学计算常用的许多库。你可以使用 Anaconda 来管理和更新你的 Python 环境以及包。以下是通过 Anaconda 升级 Python 版本的基本步骤&#xff1a; 1. 更新 Anaconda: 打开命令行或Anaconda Prompt&#xff0c…

使用Python实现单链表

目录 一、引言 二、节点的定义 三、链表的创建 四、插入节点 五、删除节点 六、遍历链表 七、节点的查找 八、总结 一、引言 单链表是一种常用的数据结构&#xff0c;它由一系列节点组成&#xff0c;每个节点包含一个数据元素和指向下一个节点的指针。单链表可以用来存…

Qt 中文处理

windows下 Qt显示中文的几种方式&#xff1a; 1&#xff0c; 环境&#xff1a;Qt 5.15.2 vs2019 64位 win11系统 默认用Qt 创建的文件使用utf-8编码格式&#xff0c;此环境下 中文没有问题 ui->textEdit->append("中文测试"); 2&#xff0c; 某些 低于…

【MySQL备份】MySQL备份工具-MyDumper

目录 什么是MyDumper MyDumper优势有哪些 如何安装MyDumper 参数解释 1 mydumper参数解释 备份流程 一致性快照如何工作&#xff1f; 如何排除&#xff08;或包含&#xff09;数据库&#xff1f; 输出文件 Metadata文件 ​编辑 表数据 文件 表结构 文件 建库文件…

winserver 2019 根据表格自动导入dhcp 作用域

一、必要条件 1.winserver 2019 2.通外网&#xff0c;需要下载模版 3.一个名称叫dhcp_ip_list.xlsx的文件 1.附件为例子&#xff0c;修改其中的数据即可 4.默认租期为8小时 二、代码 Install-Module -Name ImportExcel# Read the xlsx file $data Import-Excel -Path "…

力扣labuladong——一刷day71

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、力扣109. 有序链表转换二叉搜索树二、力扣1382. 将二叉搜索树变平衡 前言 二叉树的递归分为「遍历」和「分解问题」两种思维模式&#xff0c;这道题需要用到…

【Unity学习笔记】光照简介

本节主要是简单介绍一些常见的光照组件和渲染设置。 文章目录 灯光类型平行光Directional Light点光源Point Light聚光灯Spot Light面积光 Area Light 阴影设置全局光照明光照模式直接光照与间接光照Mixed Lighting 光照探针Light Probe Group光照探针组 反射探针 灯光类型 在…