【CocosCreator】摄像机移动碰到的一些问题

1.摄像机移动时&＃xff0c;GameOver图片不会移动&＃xff0c;导致GameOver半屏显示&＃xff0c;怎么办?

解决思路&＃xff1a;改变camera的culling mask&＃xff0c;使得主相机不渲染UI&＃xff0c;另外设置一个静止相机渲染UI。

步骤&＃xff1a;

• 将包括GameOver在内的所有不会移动的UI的Group设置为“UI”&＃xff08;自己命名&＃xff09;。
• 在main camera的culling mask中&＃xff0c;去掉“UI”层级。
• 新建一个camera&＃xff0c;命名“UI Camera”&＃xff0c;在它的culling mask中&＃xff0c;只勾选“UI”层级。

2.如何在一个脚本中调用另一个脚本中的函数&＃xff1f;&＃xff08;例&＃xff1a;我要在“shootControl”脚本中调用“cameraControl”的Init()方法&＃xff09;

解决思路&＃xff1a;在"shootControl"中获得"cameraControl"&＃xff0c;然后直接调用。

步骤&＃xff1a;

• 此时shootControl和cameraControl分别被绑定在两个不同的Node上&＃xff08;也可以在同一个node上啦&＃xff0c;看情况&＃xff09;。
•  导入cameraControl类&＃xff0c;使得shootControl可以识别cameraControl类型。

var cameraControl &＃61; require("cameraControl");

• 设置cameraControl类型的变量&＃xff0c;在属性检查器面板上&＃xff0c;将脚本拖拽上去。

cameraControl:{default:null,type:cameraControl},

• 可以直接调用cameraControl里面的函数了

this.cameraControl.SmoothCameraPos(this.startPos,this.correctPos); //更改相机位置


3.如何使得摄像机平滑移动到另一个位置&＃xff1f;

解决思路&＃xff1a;使用动作系统&＃xff0c;给定targetPos和时间&＃xff0c;调用API即可。

SmoothCameraPos(startPos){ var tartgetPos&＃61;cc.v2(startPos.x&＃43;this.addX,startPos.y&＃43;this.addY);var action &＃61; cc.moveTo(this.perMoveTime,tartgetPos);this.node.runAction(action);},

4.如何使得某物体始终处于摄像机的某个位置&＃xff08;非中央&＃xff09;&＃xff1f;

&＃xff08;1&＃xff09;已知该物体的世界坐标&＃xff1a;this.startPos

&＃xff08;2&＃xff09;已知摄像机的世界坐标为&＃xff08;0&＃xff0c;0&＃xff09;&＃xff0c;在属性检查器上改anchor值是没有用的。在场景中也看不出来摄像机的渲染平面有多大&＃xff0c;可以推测出width和height暂时和设计分辨率相同&＃xff0c;机型不同&＃xff0c;相应也会变化。而默认anchor在&＃xff08;0.5,0.5&＃xff09;。

&＃xff08;3&＃xff09;若直接将摄像机的position设置为该物体的position&＃xff0c;可以看到该物体为于相机正中央&＃xff08;1/2height、1/2width&＃xff09;&＃xff0c;好像是&＃xff08;0.5,0.5&＃xff09;锚点和该物体锚点重合了。

&＃xff08;4&＃xff09;我希望在外面暴露出来两个参数&＃xff1a;posRatioX、posRatioY&＃xff0c;分别代表该物体始终占据屏幕X轴、Y轴的比例位置。比如填写&＃xff08;0.5,0.25&＃xff09;时&＃xff0c;位置如图&＃xff1a;

onLoad(){this.addX&＃61;this.canvas.width*(0.5-this.posRatioX);this.addY&＃61;this.canvas.height*(0.5-this.posRatioY);},InitCameraPos(startPos,nextPos){this.node.x&＃61;startPos.x&＃43;this.addX;//若不加 add值&＃xff0c;则 起点处于相机正中央this.node.y&＃61;startPos.y&＃43;this.addY;},

老实说&＃xff0c;上面这个相加公式是我猜出来的。我们来看看&＃xff0c;设置posRatioY为x&＃xff0c;addY为y。则已知&＃xff0c;x&＃61;0.5&＃xff0c;y&＃61;0; x&＃61;0.25&＃xff0c;y&＃61;0.25*height&＃xff1b;x&＃61;0.75,y&＃61;-0.25*height。就这样&＃xff0c;根据这三组值&＃xff0c;我猜出了这个公式。&＃xff08;自己的几何比较差&＃xff0c;于是用代数解出了这道题的感觉。&＃xff09;

5.如何判断鼠标/触摸点和场景中物体的距离&＃xff1f;

解决思路&＃xff1a;先搞清楚触摸点的坐标系和场景中物体的坐标系之间的差异&＃xff0c;再将它们转换到同一个坐标系下。

具体解决步骤&＃xff1a;

&＃xff08;1&＃xff09;鼠标触摸点的坐标系&＃xff1a;看了官方关于摄像机的坐标转换的解释之后&＃xff0c;我发现&＃xff0c;触摸点所处的是摄像机坐标系&＃xff0c;即不管相机在场景中如何移动&＃xff0c;它的坐标系都是以屏幕左下角为原点。

&＃xff08;2&＃xff09;根节点的position是世界坐标。子节点的position是本地坐标&＃xff0c;以父节点的anchor位置为坐标原点。

&＃xff08;3&＃xff09;将鼠标触摸点和物体的坐标都统一到世界坐标下&＃xff1a;

A.触摸点&＃xff1a;

this.cameraControl.node.getComponent(cc.Camera).getCameraToWorldPoint(event.touch.getLocation(), this.mousePos);

B.物体坐标&＃xff1a;

将我要操作的物体的父物体的anchor设置在世界坐标系的原点处。