Cocos 2.x 摄像头跟随主角移动

需要做一个摄像头跟随主角移动的功能

1.搜索了论坛

参考 camera 移动 这么基本的 东西难道不应该写在 文档里?

网上有用 cc.follow的
有在 update 里 更新 camera 位置的
还有camera 当子节点 的
请问官方! 到底应该用什么 方法…让 camera 跟随
camera 移动 这么基本的 东西难道不应该写在 文档里?
官方在做什么?

2.官方文档

在https://docs.cocos.com/creator/manual/zh/getting-started/support.html中，确实看到了demo:

Camera Demo（GitHub | Gitee）：包含了 Camera 的使用示例

不过这个例子，版本估计是1.9的，有部分API失效了，写的也很复杂。
注：如果Global.js中的cc.director.getPhysicsManager().enabled = true;报错，可以移动到HeroControl.js的onload中。

3.范例集合example-cases

另外在范例集合（GitHub | Gitee）中也没找到想要的答案：

image.png

官方示例collider/platform中使用了cc.follow:

        var follow = cc.follow(this.target, cc.rect(0,0, 2000,2000));
        this.node.runAction(follow);

4.最终答案：

公众号 Cocos Creator 技术栈 Creator | 主角光环之摄像机跟随
可同时结合张晓衡 CreatorPrimer|飞机大战（一）一起学习。

一、官方文档中的cullingMask

参考官方文档：Camera 摄像机
cullingMask 将决定这个摄像机用来渲染场景的哪些部分。在 属性检查器 中的摄像机组件中的 cullingMask 会列出当前可以选择的 mask 选项，你可以通过勾选这些选项来组合生成 cullingMask。

例如下图中的 cullingMask 设置表示这个摄像机只用来渲染游戏中的 UI 部分，一般游戏中的 UI 部分都是不需要移动的，而游戏节点可能会往屏幕外移动，这时需要另外的一个摄像机去跟随这个游戏节点。

image.png

用户可以通过编辑器菜单栏中的 项目 -> 项目设置 -> 分组管理 来添加或者更改分组，这些分组即是对应的 mask。

image.png

二、飞机大战中的滚动背景

image.png

background这个节点的Group要改成自定义分组中的background，然后在里面放一个摄像机：

image.png

然后在update中，移动这个摄像机：

    //往下落
    update(dt) {
        //获取当前节点
        let current = this.loopGrounds[0];
        //计算当前节点在摄像机中的位置
        // let pt = this.camera.getWorldToCameraPoint(current.position);
        let pt = this.camera.getWorldToScreenPoint(current.position);
        //当前节点超出摄像机范围（摄像机可视范围就是屏幕大小）
        if (pt.y >= cc.winSize.height) {
            //取最后一个地图节点
            let last = this.loopGrounds[this.loopGrounds.length - 1];
            //将当前节点从数组中移除
            this.loopGrounds.shift();
            //将当前节点放到数组最后 
            this.loopGrounds.push(current);
            //将当前节点位置移动到最顶部位置
            current.y = last.y - (last.height + current.height) / 2;
        }
        this.node.y -= dt * this.speed;
    }

三、主角跟随

UI是不动的，所以先把UI分组到自定义的ui组，然后放一个UI摄像机只看这个分组。

image.png

然后主摄像机，主角全部用default分组即可。

    start() {
        // cc.macro.FIX_ARTIFACTS_BY_STRECHING_TEXEL_TMX = 1;
        cc.macro.ENABLE_TILEDMAP_CULLING = true;

        //摄像机边界
        this._cameraMaxX = this.tileMap.node.width / 2 - cc.winSize.width / 2;
        this._cameraMaxY = this.tileMap.node.height / 2 - cc.winSize.height / 2;

        this.updateCameraPosition(this.nodePlayer.position);
    }

    update(dt) {
        this.updateCameraPosition(this.nodePlayer.position);
    }
    updateCameraPosition(target: cc.Vec2) {
        if (target.x > this._cameraMaxX) {
            target.x = this._cameraMaxX;
        }
        if (target.x < -this._cameraMaxX) {
            target.x = -this._cameraMaxX;
        }
        if (target.y > this._cameraMaxY) {
            target.y = this._cameraMaxY;
        }
        if (target.y < -this._cameraMaxY) {
            target.y = -this._cameraMaxY;
        }

        this.mainCamera.node.position = target;
    }

摄像机跟随抖动问题——老问题曾修复过又出现
RPG角色跟随移动