引擎版本
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~~
才学有限,如有不当欢迎指出。