CocosCreator让一个物体跟随鼠标移动(两种方式 本地坐标系和世界坐标系)

在 Cocos Creator 3.x 游戏运行时显示的画布大小就是屏幕区域,屏幕坐标是从画布的左下角为原点开始计算
在这里插入图片描述
在 Creator 3.x 里,屏幕和 UI 是完全区分开的,用户可以在没有 UI 的情况下点击屏幕获取触点信息。因此,获取屏幕触点,是通过 event.getLocation()。而希望同样按照 Creator 2D 的方式获取“屏幕触点”坐标,则可以通过 event.getUILocation() 的方式获取。

本地坐标系和世界坐标系的区别

  1. 世界坐标的中心点(也称之为原点)是节点在场景下创建的,位于节点树最外层并且它的 positon 属性值全部都是 0的节点所处的位置,就是世界坐标的中心点。
  2. 本地坐标是相对于父节点的偏移

event.getUILocation() 获取到的触点信息,也可以用来直接设置 UI 元素的世界坐标

  //动态设置图片
  @property({ type: Node })
  public moveImg: Node = null;
 
  let posx = event.getUILocation();
  console.log("xxsdds", posx);
  this.moveImg.setWorldPosition(posx.x, posx.y, 0);

根据本地坐标系设置位置:

  onLoad() {
    let imgW = this.moveImg.getComponent(UITransform).width / 2;
    let imgH = this.moveImg.getComponent(UITransform).height / 2;
    console.log("xxsddsrela", imgW, imgH);
    //首先获取鼠标的位置  如果想要监听到全局的鼠标移动,那么就应该把ts挂载到canvas上
    this.node.on(
      Node.EventType.MOUSE_MOVE,
      (event: EventTouch) => {
        //获取到鼠标的位置
        //拿到图片的节点
        //将鼠标位置挂载到节点上
        //获取鼠标的坐标系(全局鼠标事件)
        let posx = event.getLocation();
        let pos = new Vec3(posx.x - imgW, posx.y - imgH, 0);
        let uinode = this.node.getComponent(UITransform);
        // 鼠标的位置相对于图片的本地坐标
        //convertToNodeSpaceAR:将一个 UI 节点世界坐标系下点转换到另一个 UI 节点 (局部) 空间坐标系
        let rela = uinode.convertToNodeSpaceAR(pos);
        this.moveImg.position = rela;
      },
      this
    );
  }

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

mac M2 anaconda 解决装不了python3.7

今天发现一个很奇怪的问题 但是我一换成 conda create -n DCA python3.8.12就是成功的 这个就很奇怪, 解决如下 https://towardsdatascience.com/how-to-manage-conda-environments-on-an-apple-silicon-m1-mac-1e29cb3bad12 998 conda search pythonconda search python …

半导体(芯片)制造工艺流程简单说

半导体行业是国民经济支柱性行业之一,是信息技术产业的重要组成部分,是支撑经济社会发展和保障国家安全的战略性、基础性和先导性产业,其发展程度是衡量一个国家科技发展水平的核心指标之一,属于国家高度重视和鼓励发展的行业。 …

ant design pro of vue怎么使用阿里iconfont

一 使用离线iconfont 首先需要生成图所有图标对应的js文件。如下图所示,将生成的js代码复制,在项目中创建一个js文件,将代码粘贴进去。这里我将js文件放在了src/assets/iconfont下面 然后,在main.js中引入文件,并进…

Java代码是怎么运行的?

Java代码是怎么运行的? 运行流程 将Java程序转换成Java虚拟机所能识别的指令序列,也称Java字节码。之所以这么取名,是因为Java字节码指令的操作码(opcode)被固定为一个字节。 Java虚拟机可以由硬件实现,…

IP协议相关技术

文章目录 IP协议相关技术仅凭IP无法完成通信DNSARP IP协议相关技术 仅凭IP无法完成通信 人们在上网的时候其实很少直接输入某个具体的IP地址。 在访问Web站点和发送、接收电子邮件时,我们通常会直接输入Web网站的地址或电子邮件地址等那些由应用层提供的地址&…

麒麟v10 安装jenkins

1.想安装哪个版本? https://pkg.jenkins.io/redhat-stable/ 我们查看我们想要哪个版本: 4年前安装的是 Jenkins2.279 版本 现在在docker 上安装的是Version 2.425 版本 2.碰到到的问题 1.安装老版本的Jenkins,会出现安装的插件不兼容&…

viple入门(四)

(1)行打印 主要用于在运行窗口中显示数据,打印完成后,自动换行。 注意事项:不可同时打印两个数据,例如 解决方案1:使用或并,使得每次进入行打印的数据只有一个,缺点&am…

文件管理技巧:如何利用文件名关键字进行整理

在日常生活和工作中,我们经常需要处理大量的文件,这些文件可能包含各种类型的信息,如文本、图像、视频、音频等。如何有效地管理和整理这些文件,以便我们能够快速找到所需的文件,是一个非常重要的问题。本文将介绍一种…

Linux shell编程学习笔记22: () $() (()) 的用法小结

最近学习Linux Shell编程,对 () (()) [] [[]]等符号的用法还是有点分不太清楚,于是决定再梳理一下。今天先整理 () $() (()) 的用法。 1 单小括号() 1.1 子shell(命令组) 括号中的命令将会新开一个子shell顺序执行,所…

用vite搭建一个vue3 + ts项目

搭建项目 参考连接https://www.jianshu.com/p/1ce93c7e15a0 练手项目参考 https://www.xuexiluxian.cn/ 1.安装pina vue3 pinia的安装和使用 2.安装router npm install vue-router -S Vue3: Vue-router路由的使用

什么是跨境电商独立站?有什么优势和劣势?

你是否有过这样的经历:当你在网上浏览一些商品时,发现有些网站的域名很奇怪,比如.com、.net、.co等,而且网站的界面和设计也和国内的电商平台不太一样。 你可能会好奇,这些网站是什么?它们是怎么做的&…

学习笔记|Pearson皮尔逊相关系数|Spearman斯皮尔曼相关系数|和Kendall肯德尔tau-b相关系数|分析流程|-SPSS中双变量相关性分析系数

目录 学习目的软件版本原始文档基础概念皮尔逊相关系数基本假设(适用条件):系数的范围及意义实例1. 读数据:2.正态性检验:3.异常值检验(体重):4.分析: 斯皮尔曼相关系数基…

Git的入门详细教程

🏅我是默,一个在CSDN分享笔记的博主。📚📚 ​​ 🌟在这里,我要推荐给大家我的专栏《git》。🎯🎯 🚀无论你是编程小白,还是有一定基础的程序员,这…

企业级,搭建接口自动化测试框架思路分析,8年测试老鸟整理...

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 在选择接口测试自…

Vue3 学习笔记

vue3 官网:简介 | Vue.js (vuejs.org) 1. 环境搭建与启动 npm create vuelatest 这一指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具 之后,你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示: ✔ …

学习笔记|SPSS|描述变量|按照3倍标准差剔除异常值|标准化值另存为变量|剔除个案|Zscore|箱图|Zscore取值范围

目录 学习目的软件版本原始文档概述服从正态分布-按照3倍标准差剔除异常值读数据数据概览描述变量 正态性检验异常值检验及剔除 非正态分布-根据Zscore取值范围确定基础数据数据概览正态性检验Tips:箱图圆圈的含义 异常值检验及剔除描述变量,并将标准化值…

C语言C位出道心法(三):共用体|枚举

C语言C位出道心法(一):基础语法 C语言C位出道心法(二):结构体|结构体指针|链表 一: C语言共用体数据类型认知 二:C语言枚举基本数据类型认知 忙着去耍帅,后期补充完整.............

Verilog刷题[hdlbits] :Alwaysblock2

题目:Alwaysblock2 For hardware synthesis, there are two types of always blocks that are relevant: 对于硬件综合,有两种相关的always块: Combinational: always () 组合型:always ()Clocked: always (posedge clk) 时钟型…

Python实现图片与PDF互相转换

目录 图片转PDF文件夹所有图片转为1个PDF文件夹指定图片转为1个PDF文件夹所有图片分别转为PDF举例 PDF转图片指定PDF转为图片文件夹所有PDF转为图片举例 图片转PDF 之前的一篇博客《Python合并拼接图片》,可对图片进行合并拼接 使用前需要安装PyMuPDF库&#xff0c…

设置区块链节点输出等级为警告级,并把日志存储阈值位100MB并验证;

题目 获取指定区块链节点输出等级为警告级,并设置日志存储阈值位100MB并验证; 操作步骤 1.切换目录 cd nodes/127.0.0.1/node0 2.打开配置文件并修改 vim config.ini warn:警告