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

在 Cocos Creator 3.x 游戏运行时显示的画布大小就是屏幕区域,屏幕坐标是从画布的左下角为原点开始计算

在 Creator 3.x 里,屏幕和 UI 是完全区分开的,用户可以在没有 UI 的情况下点击屏幕获取触点信息。因此,获取屏幕触点,是通过 event.getLocation() 。而希望同样按照 Creator 2D 的方式获取"屏幕触点"坐标,则可以通过 event.getUILocation() 的方式获取。

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

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

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

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

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

javascript 复制代码
  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
    );
  }
相关推荐
国科安芯2 天前
商业航天与航空安全场景下抗辐射 MCU 选型、应用实践及发展趋势
单片机·嵌入式硬件·无人机·cocos2d·risc-v
国科安芯2 天前
空间辐射环境下抗辐射 MCU 可靠性机理及航空安全应用研究综述
单片机·嵌入式硬件·macos·无人机·cocos2d·risc-v
国科安芯2 天前
航空安全关键系统抗辐射 MCU 加固技术、工程实现与典型应用
单片机·嵌入式硬件·无人机·cocos2d·risc-v
洛阳吕工11 天前
从 micro-ROS 到 px4_ros2:ROS2 无人机集成开发实战指南
游戏引擎·无人机·cocos2d
SmartRadio15 天前
NRF52833 + MPU6050 室内定位跟随无人机
游戏引擎·无人机·cocos2d
howlet218 天前
AI生成cocos-creator打砖块游戏-跑通第1关(CodeBuddy)
人工智能·游戏·cocos2d
The森1 个月前
cocos2d-x棋牌项目-模块2:GameView、Node 与 zOrder
游戏引擎·cocos2d
十五年专注C++开发1 个月前
Cocos2d - x: 一款开源跨平台 2D 游戏框架
运维·c++·游戏·开源·游戏引擎·cocos2d
crazyJialin1 个月前
聊聊一个游戏是怎么做出来的
游戏·cocos2d
The森1 个月前
macOS 26(M芯片)部署 cocos2d-x(C++)全链路指南——Xcode + Rosetta
c++·经验分享·笔记·macos·xcode·cocos2d