摘要:
此文主要记录cocos creator开发中如何实现人物在场景中的移动。移动视角为上帝视角,横版2D游戏人物移动方式类似。
记录缘故:
在实现人物移动时,我查阅很多资料都没能找到一个令我满意的解决方法,而且cocos creator的教程是实在是太少了(难受~)。刚开始我遇到的问题是人物在移动的时候动画是静止的,不过最终解决了这个问题,原因是我在每一次移动的时候调用了play()函数,使得动画相当于每次都刷新到初始播放位置,就没能展现出动画的效果。不过最终解决了这个问题,特此记录,以防再次踩坑。
使用工具:
cocos creator 2.0.10
使用语言:
JavaScript
效果图:
一、准备工作 :
1.将游戏的场景搭建好
2.添加人物节点,并添加Sprite组件,设置好初始人物图片
3.制作好人物行走动画,包括四个方向,上、下、左、右,WrapMode为Loop。
4.创建js脚本文件,如player.js,挂载在人物节点上。
二、实现:
前言:
本例中人物移动的四个动画文件分别为up、left、down、right。
js文件名为player。所以代码无法直接套用,需理解其移动思想。
步骤一:
首先将人物行走的四个动画添加到人物节点上。
如下图,
步骤二
打开player.js文件,进行人物行走控制。
具体实现代码如下:
onload方法:(实现方向变量和动画状态的初始化)
onLoad () {
this.up=false;
this.down=false;
this.left=false;
this.right=false;
this.moveSpeed=2;
//this.touch=false;
//初始化animState
var anime=this.node.getComponent(cc.Animation);
this.animState=anime.getAnimationState('up');
},
添加监听器,对输入按键进行监听
start () {
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN,this.on_key_down,this);
cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP,this.on_key_up,this);
},
on_key_down(e){
switch(e.keyCode){
case cc.macro.KEY.a:
this.left=true;
break;
case cc.macro.KEY.d:
this.right=true;
break;
case cc.macro.KEY.w:
this.up=true;
break;
case cc.macro.KEY.s:
this.down=true;
break;
case cc.macro.KEY.j:
this.touch=true;
break;
}
},
on_key_up(e){
switch(e.keyCode){
case cc.macro.KEY.j:
this.touch=false;
break;
case cc.macro.KEY.a:
this.left=false;
break;
case cc.macro.KEY.d:
this.right=false;
break;
case cc.macro.KEY.w:
this.up=false;
break;
case cc.macro.KEY.s:
this.down=false;
break;
}
},
使用函数控制人物行走节点的移动以及动画的播放
on_player_walk(){
var anime=this.node.getComponent(cc.Animation);
var playing=this.animState.isPlaying;//判断动画是否正在播放,如果是就不再调用播放函数,就能解决之前我遇到的问题
//注:world_pos变量是我为了后续开发便于判断人物与障碍物位置设计的,所以如果只是实现人物移动可以不用采用这种绕弯的方式,代码逻辑简单,可自行修改。
var world_pos=this.node.convertToWorldSpaceAR(cc.v2(0,0));//转换成世界坐标
/*以下代码可能有些人觉得使用这么多个if-else太麻烦了,但是可以通过这种方式可以实现控制人物斜着移动,即人物的移动方向有八个,符合正常游戏设计。
如果有更好的代码实现方式希望各位赐教。
*/
if(this.up){
if(!playing){
this.animState=anime.play('up');
}
pos.y+=this.moveSpeed;
world_pos.y+=this.moveSpeed;
}else{
anime.stop('up');
}
if(this.down){
if(!playing){
this.animState=anime.play("down");
}
pos.y-=this.moveSpeed;
world_pos.y-=this.moveSpeed;
}else{
anime.stop('down');
}
if(this.left){
if(!playing){
this.animState=anime.play("left");
}
pos.x-=this.moveSpeed;
world_pos.x-=this.moveSpeed;
}else{
anime.stop('left');
}
if(this.right){
if(!playing){
this.animState=anime.play("right");
}
pos.x+=this.moveSpeed;
world_pos.x+=this.moveSpeed;
}else{
anime.stop('right');
}
this.node.x=pos.x;
this.node.y=pos.y;
},
最后,在update方法中调用移动控制函数
update (dt) {
this.on_player_walk();
},