cocoscreator摄像机跟随玩家移动及地图边界的设置

摄像机是cocos creator中的一个重要的组件，负责显示游戏画面，同时，一个游戏里面可以存在多个摄像机。

一、摄像机的属性

1、摄像机的显示范围

以摄像机为中心，以屏幕大小为范围，绘制物体，然后成像到屏幕上面。

2、摄像机拍摄哪些物体

在cocos creator中每个节点都有一个group，这个类型可以自己编辑。

cullingMask:在当前摄像机下需要渲染的物体，在此选项下面有很多选项，如果想要在当前摄像机下渲染该物体，将其前面的选项勾选即可。 

3、摄像机渲染的顺序

Depth表示深度，即摄像机先渲染谁后渲染谁，depth小的先绘制，大的后绘制。 

4、其他

zoomRatio:指定摄像机的缩放比例，值越大显示的图像越大，默认值为1；

clearFlags:摄像机渲染时选择清除哪些背景色等，例如我们主摄像机渲染玩家时，要把color取消勾选，这样地图才会显示在玩家下面。

其他摄像机属性可以在官网上面看到。 

二、摄像机跟随玩家移动及地图边界的处理

有时候我们的地图是非常大的，但是窗口只有这么大，所以需要摄像机跟随玩家。

在这里，我使用了三个摄像机，一个是MainCamera，主要渲染地图中的各个部分；一个是UICamera，渲染UI按键；一个是playerCamera,渲染玩家。

在MainCamera中的cullingMask将UI和player取消勾选，同时，在UICamera和playerCamera中分别勾选UI和player。

将mainCamera和playerCamera作为属性序列化出来 

mainCamera:cc.Camera

playerCamera:cc.Camera

//摄像机边界
let viewSize = cc.view.getVisibleSize();
this.cameraMaxX = this.map.width - viewSize.width;
this.cameraMaxY = this.map.height - viewSize.height;
//设置摄像机边界，防止玩家在靠近地图边界的时候，会出现黑边。
//获取玩家的位置，玩家在0到地图最大宽之间，将玩家的x，y赋值给摄像机的x,y
let playerPos = this.node.position;
if(playerPos.x>0 && playerPos.x<this.cameraMaxX){
    this.mainCamera.node.x = this.node.x;
    this.playerCamera.node.x = this.node.x;
}
if(playerPos.y>0 && playerPos.y<this.cameraMaxY){
    this.mainCamera.node.y = this.node.y;
    this.playerCamera.node.y = this.node.y;
}
if (playerPos.x<0) {
    this.mainCamera.node.x = 0;
    this.playerCamera.node.x = 0;
}
if (playerPos.y<0) {
    this.mainCamera.node.y = 0;
    this.playerCamera.node.y = 0;
}
    if (playerPos.x>this.cameraMaxX) {
    this.mainCamera.node.x = this.cameraMaxX;
    this.playerCamera.node.x = this.cameraMaxX;
}
if (playerPos.y>this.cameraMaxY) {
    this.mainCamera.node.y = this.cameraMaxY;
    this.playerCamera.node.y = this.cameraMaxY;
}

然后在update中进行调用就可以了。

这里只是提供给大家一个思路，在具体的处理过程中还要看怎么设置地图和玩家、摄像机 。