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