CocosCreator横版格斗游戏Demo（二）：环游地图

首先给主角做了三个基本动画，站立动画、行走动画、攻击动画。

如上图所示，给Player加上动画组件，并把创建的3个动画文件分别拖拽到动画组件中。给Player添加脚本组件，并把PlayerControl.ts脚本拖拽到脚本组件中。

在PlayerControl.ts脚本中添加上图所示代码。

效果如下图：

接下来就是监听键盘上下左右是个方向键让主角在地图中行走，并且监听X键让玩家攻击"空气"。直接上源码：

PlaySceneControl.ts

const {ccclass, property} = cc._decorator;

import PlayerControl from "./PlayerControl"
import {PlayerDirection} from "./PlayerControl"

@ccclass
export default class PlaySceneControl extends cc.Component {

    private m_player: PlayerControl = null;

    onLoad()
    {
        //监听键盘事件
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
        //获取脚本实例
        this.m_player = this.node.getChildByName("Player").getComponent("PlayerControl");
    }

    start () {
        // init logic
    }
    //按下
    private onKeyDown(event: cc.Event.EventKeyboard): void
    {
        this.dealKeyBoardEvent(event, true);
    }
    //释放
    private onKeyUp(event: cc.Event.EventKeyboard): void
    {
        this.dealKeyBoardEvent(event, false);
    }
    //键盘事件处理函数
    private dealKeyBoardEvent(event: cc.Event.EventKeyboard, isPress: boolean): void
    {
        if(event.keyCode == cc.macro.KEY.up)
        {
            this.m_player.setPlayerMoveDirectionByKeyBoard(PlayerDirection.E_Dir_Up, isPress);
        }
        else if(event.keyCode == cc.macro.KEY.down)
        {
            this.m_player.setPlayerMoveDirectionByKeyBoard(PlayerDirection.E_Dir_Down, isPress);
        }
        else if(event.keyCode == cc.macro.KEY.left)
        {
            this.m_player.setPlayerMoveDirectionByKeyBoard(PlayerDirection.E_Dir_Left, isPress);
        }
        else if(event.keyCode == cc.macro.KEY.right)
        {
            this.m_player.setPlayerMoveDirectionByKeyBoard(PlayerDirection.E_Dir_Right, isPress);
        }
        else if(event.keyCode == cc.macro.KEY.x)
        {
            this.m_player.setPlayerAttackByKeyBoard(isPress);
        }
    }
}

PlayerControl.ts

const {ccclass, property} = cc._decorator;

enum PlayerState
{
    E_State_Idle = 0,
    E_State_Walk,
    E_State_Attack,
}

export enum PlayerDirection
{
    E_Dir_Up = 0,
    E_Dir_Down,
    E_Dir_Left,
    E_Dir_Right
}


@ccclass
export default class PlayerControl extends cc.Component {

    private m_animation: cc.Animation = null;
    private m_camera: cc.Node = null;

    private m_state: PlayerState = PlayerState.E_State_Idle;
    //方向键是否被按下
    private m_dirUpIsPress: boolean = false;
    private m_dirDownIsPress: boolean = false;
    private m_dirLeftIsPress: boolean = false;
    private m_dirRightIsPress: boolean = false;
    //攻击键是否被按下（X键）
    private m_attackKeyIsPress: boolean = false;
    //速度
    private m_speed: number = 5;
    //主角所能行走的范围
    private m_minX: number = null;
    private m_maxX: number = null;
    private m_minY: number = null;
    private m_maxY: number = null;

    onLoad () 
    {
        //初始化数据
        this.m_animation = this.getComponent(cc.Animation);
        this.m_camera = cc.find("Canvas/Main Camera");
        let map: cc.Node = cc.find("Canvas/TiledMap");
        //计算范围
        let designSize = cc.view.getDesignResolutionSize();
        this.m_minX = -designSize.width/2;
        this.m_maxX = map.width*2 + this.m_minX;
        this.m_minY = -designSize.height/2 + this.node.height;
        this.m_maxY = map.getComponent(cc.TiledMap).getTileSize().height*2*3 + this.m_minY;
    }

    start () 
    {
        //设置初始状态
        this.setPlayerState(PlayerState.E_State_Idle);
    }

    update (dt: number) 
    {
        if(this.m_state == PlayerState.E_State_Walk)
        {
            if(this.m_dirLeftIsPress) this.node.x -= this.m_speed;
            if(this.m_dirRightIsPress) this.node.x += this.m_speed;
            if(this.m_dirUpIsPress) this.node.y += this.m_speed/2;
            if(this.m_dirDownIsPress) this.node.y -= this.m_speed/2;

            //范围检测
            if(this.node.x < this.m_minX)this.node.x = this.m_minX;
            if(this.node.x > this.m_maxX)this.node.x = this.m_maxX;
            if(this.node.y < this.m_minY)this.node.y = this.m_minY;
            if(this.node.y > this.m_maxY)this.node.y = this.m_maxY;

            //摄像机跟着人物移动
            if(this.node.x > 0 && this.node.x < this.m_maxX - cc.view.getDesignResolutionSize().width/2)
            {
                this.m_camera.x = this.node.x;
            }
        }
    }

    //设置人物状态
    public setPlayerState(state: PlayerState): void
    {
        this.m_state = state;
        if(this.m_state == PlayerState.E_State_Idle)
        {
            this.m_animation.play("PlayerIdleAnim");
        }
        else if(this.m_state == PlayerState.E_State_Walk)
        {
            this.m_animation.play("PlayerWalkAnim");
        }
        else if(this.m_state == PlayerState.E_State_Attack)
        {
            this.m_animation.play("PlayerAttackAnim");
        }
    }
    //获取人物状态
    public getPlayerState(): PlayerState
    {
        return this.m_state;
    }

    //按下方向键的处理
    public setPlayerMoveDirectionByKeyBoard(direction: PlayerDirection, isPress: boolean): void
    {
        if(direction == PlayerDirection.E_Dir_Up)
        {
            this.m_dirUpIsPress = isPress;
        }else if(direction == PlayerDirection.E_Dir_Down){
            this.m_dirDownIsPress = isPress;
        }else if(direction == PlayerDirection.E_Dir_Left){
            this.m_dirLeftIsPress = isPress;
            if(this.m_dirLeftIsPress)this.node.scaleX = -Math.abs(this.node.scaleX);
        }else if(direction == PlayerDirection.E_Dir_Right){
            this.m_dirRightIsPress = isPress;
            if(this.m_dirRightIsPress)this.node.scaleX = Math.abs(this.node.scaleX);
        }

        //修改人物状态
        if(isPress)
        {
            if(this.m_state == PlayerState.E_State_Idle)
            {
                this.setPlayerState(PlayerState.E_State_Walk)
            }
        }else{
            if(this.m_state != PlayerState.E_State_Attack)
            {
                if((!this.m_dirUpIsPress) && (!this.m_dirDownIsPress) 
                && (!this.m_dirLeftIsPress) && (!this.m_dirRightIsPress))
                {
                    this.setPlayerState(PlayerState.E_State_Idle);
                }
            }
        }

    }

    //按下攻击键的处理
    public setPlayerAttackByKeyBoard(isPress: boolean): void
    {
        this.m_attackKeyIsPress = isPress;
        if(isPress)
        {
            if(this.m_state != PlayerState.E_State_Attack)
            {
                this.setPlayerState(PlayerState.E_State_Attack);
            }
        }
    }

    //攻击动画回调
    private attackAnimCallBack(eventName: string): void
    {
        if(eventName == "checkCrash")
        {
            //检测是否打到敌人
            cc.log("checkCrash");
        }else if(eventName == "animEnd"){
            //动画结束
            if(this.m_attackKeyIsPress) 
            {
                //如果攻击键还处于被按下的状态，继续播放攻击动画
                this.m_animation.play("PlayerAttackAnim");
            }else{
                //如果方向键有被按下，进入到行走状态，否则进入站立状态
                if(this.m_dirUpIsPress || this.m_dirDownIsPress 
                    || this.m_dirLeftIsPress || this.m_dirRightIsPress)
                {
                    this.setPlayerState(PlayerState.E_State_Walk)
                }else{
                    this.setPlayerState(PlayerState.E_State_Idle)
                }
            }
        }
    }

}

代码有点多，注释我都写好了，理解起来应该不难。

下面看下效果图：