CocosCreator中移动摄像机之后转世界坐标

引擎版本

CocosCreator v2.0.9

很多时候我们可能会做一个大地图游戏,而摄像机的移动是必须的。
但是摄像机移动后获取到的触点是基于屏幕的,而物体坐标是世界下的。
这时候就要求我们转化为世界坐标系。

世界坐标系也叫做绝对坐标系,在 CocosCreator 游戏开发中表示场景空间内的统一坐标体系,世界就用来表示我们的游戏场景。
在屏幕左下角为原点

本地坐标系也叫相对坐标系,是和节点相关联的坐标系。每个节点都有独立的坐标系,当节点移动或改变方向时,和该节点关联的坐标系将随之移动或改变方向。

代码演示

我将摄像机尺寸设置为 600 * 600 。
我将代码绑定在摄像机上,拖动会移动摄像机。
为了便于观测,我将坐标转为整形。

cc.Class({
    extends: cc.Component,

    properties: {
    },

    start () {
        this.node.on('touchstart', (e) => {
            let pos = e.getLocation();
            console.log('触摸坐标:' + parseInt(pos.x) + ',' + parseInt(pos.y));
            let out = cc.v2(0, 0);
            this.getComponent(cc.Camera).getCameraToWorldPoint(pos,out);
            console.log('世界坐标:' + parseInt(out.x) + ',' + parseInt(out.y));
            console.log('--------------------')
        }, this);

        this.node.on('touchmove', (e) => {
            // 摄像机按着拖动方向运动
            let delta = e.getDelta();
            this.node.x -= delta.x;
            this.node.y -= delta.y;
        }, this);
    }

});

效果

在这里插入图片描述
点击的位置我画了红叉,这是摄像机位置在 0,0 时。
然后,我们再看一下。
在这里插入图片描述
我在接近世界坐标系原点的位置点了下去。
值得注意一下的是,在设计时,屏幕的正中间是0,0位置,这不是世界坐标下的,正好差一半的画布宽高

好,然后我们把摄像机移动到300,300的位置。之前是0,0的位置,再点一下。
在这里插入图片描述
触摸点还是左下角0,0的位置。
但是因为摄像机移动了,世界坐标系下是300,300位置。这样转换过后,整个大世界的位置能确定下来,就可以处理物体了。

结论

所以对于移动摄像机的场景。

  • 我们处理物体最好转为世界坐标系。
  • 处理UI时最好通过摄像机的节点接收触摸事件,触点坐标固定。当然,最好是双摄像机,一个摄像机专门负责UI。

O(∩_∩)O~~
才学有限,如有不当欢迎指出。

猜你喜欢

转载自blog.csdn.net/kuokuo666/article/details/90046653