CocosCreator摄像机缩放移动后坐标转化
程序员文章站
2023-12-27 10:25:15
...
摘要
在 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 版本显示已经弃用。
学会了吧！O(∩_∩)O~~