CocosCreator做摄像机跟随主角移动

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


首先,在这种类型游戏的地图(地图很大)是使用瓦片地图CocosCreator做摄像机跟随主角移动_第1张图片

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

CocosCreator做摄像机跟随主角移动_第2张图片

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

CocosCreator做摄像机跟随主角移动_第3张图片CocosCreator做摄像机跟随主角移动_第4张图片

在这里我准备好了我需要的素材以及将他们拖到了软件中的图块下。然后进行各种贴图的操作。在这里我已经完成了一个地图的制作,我就直接拿来用啦!CocosCreator做摄像机跟随主角移动_第5张图片

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

CocosCreator做摄像机跟随主角移动_第6张图片

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

CocosCreator做摄像机跟随主角移动_第7张图片

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

CocosCreator做摄像机跟随主角移动_第8张图片

CocosCreator做摄像机跟随主角移动_第9张图片

将主摄像机分组勾选default

CocosCreator做摄像机跟随主角移动_第10张图片

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

CocosCreator做摄像机跟随主角移动_第11张图片

然后将节点拖拽到脚本中,接下来写入跟随的脚本文件,(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的)

CocosCreator做摄像机跟随主角移动_第12张图片

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

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函数的作用了,当玩家位置大于地图长/宽的一半时将玩家弹回来(效果不是很好,会有弹跳的效果,但聊胜于无,各位有更好的解决方案可以自行使用,并告诉我这个小菜鸟一声,谢谢)


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

你可能感兴趣的:(cocos,creator学习日记)