首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CocosCreator摄像机缩放移动后坐标转化

CocosCreator摄像机缩放移动后坐标转化

作者头像
张晓衡
发布2020-02-23 14:22:47
1.5K0
发布2020-02-23 14:22:47
举报

摘要

在 CocosCreator 的触摸事件中的坐标是以屏幕左下角为原点的,那么我们在摄像机做缩放移动后,坐标该如何处理呢?

正文

使用版本

CocosCreator 版本 v2.2.1

演示布局

一个主摄像机,一个 blocks 节点管理九个方块,且 blocks 节点大小为 600 * 600,只将事件绑定至 blocks 即可。

事件监听

我们写一个监听函数,打印坐标。

onLoad () {this.blocks.on(cc.Node.EventType.TOUCH_END, (event) => {const pos = event.getLocation()const x = Math.floor(pos.x / 200)const y = Math.floor(pos.y / 200)        cc.log(pos)        cc.log(x, y)}, this)}

如图,左下角为 0,0 那么每个方块都是 200 * 200 的大小,做除法后取整获得下标(我点击的是(2,2)区域)。

缩放改变

在 start 中改变主摄像机。

start () {this.mainCamera.zoomRatio = 2}

如图,虽然我点击了(1,1)的区域,但是显示的仍然是(2,2)的位置,因为点击的屏幕坐标没变。

屏幕坐标到世界坐标

很显然,我们需要坐标转化,而摄像机组件是有这个 API 的,我们修改一下事件代码。

this.blocks.on(cc.Node.EventType.TOUCH_END, (event) => {const pos = event.getLocation()// 转化let realPos = cc.v2(0, 0)this.mainCamera.getScreenToWorldPoint(pos, realPos)const x = Math.floor(realPos.x / 200)const y = Math.floor(realPos.y / 200)    cc.log(pos, realPos)    cc.log(x, y)}, this)

如图,虽然点击的位置在屏幕坐标下是(2,2),但是转化后就是基于游戏世界的坐标了,正常的(1,1)。

位置改变

如果我们改变摄像机位置呢?

start () {this.mainCamera.node.setPosition(cc.v2(100, 0))this.mainCamera.zoomRatio = 0.5}

还是正确的,因为转化的这个 API 都处理好了。

结语

有一点要注意,getScreenToWorldPoint 这个方法是 2.1 以上版本的新方法。用 getCameraToWorldPoint 这个旧方法时,在 2.2 版本显示已经弃用。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-02-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Creator星球游戏开发社区 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 正文
    • 使用版本
      • 演示布局
        • 事件监听
          • 缩放改变
            • 屏幕坐标到世界坐标
              • 位置改变
              • 结语
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档