Cocos creator开发笔记之上帝视角下的人物移动

摘要：

此文主要记录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();
        
    },