CocosCreator做摄像机跟随主角移动

上一篇文章写到creator中rpg游戏摇杆的功能，而这类型游戏中主角的移动势必会带来地图位置的变化，今天我们就来完成摄像机跟随主角，从而使主角看起来是在地图中奔跑。

---

首先，在这种类型游戏的地图(地图很大)是使用瓦片地图

tiled是使用小地图在大地图的格子中一块一块拼起来，从而完成大地图的制作。

软件打开后首先新建一个地图，

在这里我准备好了我需要的素材以及将他们拖到了软件中的图块下。然后进行各种贴图的操作。在这里我已经完成了一个地图的制作，我就直接拿来用啦！

接下来打开cocos creator 然后将制作好的地图放入资源管理器(将原素材一起拖入)

在creator的层级管理器中添加一个tiledMap组件，，然后将地图资源添加到组件中

因为要完成摄像机跟随主角，所以需要再给游戏添加一个摄像机(camera)。添加完成后还需要进行分组，以完成场景中按钮能固定在场景中，而地图，玩家能进行移动，所以在项目设置的分组管理中将UI和地图，玩家放入两个不同的分组中。

将主摄像机分组勾选default

然后再UI摄像机将分组设置为UI分组，深度设置为100(ui要处于上层)

然后将节点拖拽到脚本中，接下来写入跟随的脚本文件，(player为主角)（this.area()为一主角控制函数，下面会讲，你也可以先试试不加这个会怎么样）

update(dt) {
        this._cameraMaxX = this.tilemap.node.width / 2 - cc.winSize.width / 2;
        this._cameraMaxY = this.tilemap.node.height / 2 - cc.winSize.height / 2;

        let playerPos = this.player.position;
        //区域
        //摄像头
        if (playerPos.x > this._cameraMaxX) {
            this.area();
            playerPos.x = this._cameraMaxX;
        }
        if (playerPos.x < -this._cameraMaxX) {
            playerPos.x = -this._cameraMaxX;
            this.area();
        }
        if (playerPos.y > this._cameraMaxY) {
            playerPos.y = this._cameraMaxY;
            this.area();
        }
        if (playerPos.y < -this._cameraMaxY) {
            playerPos.y = -this._cameraMaxY;
            this.area();
        }
        this.camera.node.position = playerPos;
    },

***重点来了，使用这种方法当主角移动到场景边上时会直接移出场景(下图我的小坦克已经移到屏幕外界了，但camera是不能超出tileMap的)

那么为了解决这一问题，小菜鸟，也就是我采用了一个非常简单的办法(嘿嘿嘿)，当然如果有更好的办法建议你们使用更好的哦

area() {
        let playerPos = this.player.position;
        let Px = playerPos.x;
        let Py = playerPos.y;
        //attention,注意数值
        let Tw = this.tilemap.node.width / 2;
        let Th = this.tilemap.node.height / 2;
        //区域
        if (Px < -Tw) {
            this.player.runAction(cc.moveTo(0,-Tw,Py));
            console.log('-x')
        }
        if (Px > Tw) {
            this.player.runAction(cc.moveTo(0,Tw,Py));
            console.log('x')
        }
        if (Py < -Th) {
            this.player.runAction(cc.moveTo(0,Px,-Th));
            console.log('-y')
        }
        if (Py > Th) {
            this.player.runAction(cc.moveTo(0,Px,Th));
            console.log('y')
        }
    }

这里相必大家都看出来了area函数的作用了，当玩家位置大于地图长/宽的一半时将玩家弹回来(效果不是很好，会有弹跳的效果，但聊胜于无，各位有更好的解决方案可以自行使用，并告诉我这个小菜鸟一声，谢谢)

---

那么完成后的效果就是这样啦