Cocos Creator经典游戏制作之：信使（The Messenger）

版权申明：

• 本文原创首发于以下网站：

1. 博客园『优梦创客』的空间：https://www.cnblogs.com/raymondking123
2. 优梦创客的官方博客：https://91make.top
3. 优梦创客的游戏讲堂：https://91make.ke.qq.com
4. 『优梦创客』的微信公众号：umaketop

• 您可以自由转载，但必须加入完整的版权声明！

游戏原图

游戏介绍

• 《信使（The Messenger）》是一款横版过关冒险游戏，此游戏在IGN上获得了8.0分的不错成绩，IGN编辑MITCHELL SALTZMAN认为《信使》拥有很多想带给玩家的内容。它是一款2D动作平台游戏，拥有华丽的美学，从8位风格无缝过渡到16位，游戏拥有一些搞笑的幽默场景，巧妙的对白，以及一个最佳的复古"芯片风”音乐。
• 《信使（The Messenger）》无论从哪一方面来看都是受到了FC时代《忍者龙剑传》的影响，这款游戏的发行商Devolver Digital还邀请到了FC《忍者龙剑传》初代的制作人吉沢秀雄进行体验。

游戏规则介绍

• 游戏的操作与FC上的忍龙基本一致，左右移动、跳、落（从平台上落下）、攻击

游戏开发过程

搭建游戏UI界面

• 在assets上创建一个文件夹名为Scence，这个文件夹用来存放场景，新建一个场景Scence改名为Game
• 在Canvas上建一个Background节点，在这个节点上插入Sprite（图片精灵）组件，把背景图片拖进去，调整大小，这个就是游戏的背景
• 在Canvas上新建节点Ground、Platform、Wall、Pitfall、Save、Lame,分别用来放置地面、平台、墙、陷阱、保存点、灯

创建主角

• 将一张忍者的图片拉至Canvas节点下，并重命名为Player

制作动画特效

• 在资源管理器的assets文件夹下创建一个子文件夹Animation,用来存放各种动画
• 选择Player，在动画编辑器中点击按钮《添加Animation组件》为Player节点添加动画组件
• 在点击按钮《新建Clip文件》为Player创建动画
• 单击动画编辑器左上角的书写图标按钮开始编辑动画
• 将主角的往右跑的4张图片组合成主角右跑动画（序列帧动画）
  
• 再创建主角左跑动画、攻击动画、爬墙动画······

写脚本

Player脚本

创建Player脚本

• 在资源管理器的assets文件夹下创建一个子文件夹Script,用来存放各种脚本
• 在资源管理器的Script文件夹下创建一个JavaScript脚本，重命名为Player
• 将脚本Player挂在Player对象上

编辑Player脚本

定义玩家属性

properties: {
    camera: { //摄像机
        type: cc.Node, //属性类型
        default: null, //默认值
    },
    jumpHeight: 200, //跳跃高度
    playerState: 2, //玩家状态 0站立 1跳 2落 3爬墙
    isRun: false,  //是否跑动
    playerDirection: 1, //玩家方向 0左 1右     
    mayJump: true, //能否跳跃
    speed: 0, //速度
    hp: 5, //生命值
    time: 0, //时间
    shinState: 0, //攀爬状态 0为不动 1为上爬 2为下滑     
    isAttack: false, //是攻击状态
    whetherSpringback: true, //是否回弹
},

给玩家创建各种能力（函数）

• 攻击

attack() {
    this.isAttack = true; //是攻击状态 
    if (this.playerDirection == 0) { //如果玩家方向为左
        this.getComponent(cc.Animation).play("主角左攻动画");
    } else { //否则
        this.getComponent(cc.Animation).play("主角右攻动画");
    }
    this.node.getComponent(cc.BoxCollider).size = cc.size(140, 87); //获取主角的碰撞器，并设置包围盒大小（扩大包围盒，因为攻击时人物的包围盒要把刀包围进去）
},

• 左移

leftMove() {
    this.node.x -= 10
},

• 右移

rightMove() {
    this.node.x += 10;
},

• 攀爬，触碰墙壁进入爬墙状态后可使用爬墙方法

shin() {
    if (this.shinState == 1) { //如果人物攀爬状态为上爬
        this.node.y += 3;
    } else if (this.shinState == 2) { //否则，就是人物状态为下滑
        this.node.y -= 9;
    }
},

• 跳跃，在平台、地面、空中时可执行

jumpAction: null,
jump() {
    this.jumpAction = cc.moveBy(0.5, cc.v2(0, this.jumpHeight)).easing(cc.easeCubicActionOut());
    this.node.runAction(this.jumpAction);
},

• 爬墙跳，此方法只有攀爬在墙壁上时可使用

jumpDistance: null,
wallJump: null,
WallJump() {
    if (this.playerDirection == 0) {
        this.jumpDistance = 200;
    } else {
        this.jumpDistance = -200;
    }
    this.wallJump = cc.moveBy(0.5, cc.v2(this.jumpDistance, this.jumpHeight)).easing(cc.easeCubicActionOut());
    this.node.runAction(this.wallJump);
},

• 翻跳上地面，当与墙壁结束碰撞时执行，用于结束攀爬进入站立状态

WallGroundJump() {
    if (this.playerDirection == 0) {
        this.jumpDistance = -100;
        this.getComponent(cc.Animation).play("主角左跳动画");
    } else {
        this.jumpDistance = 100;
        this.getComponent(cc.Animation).play("主角右跳动画");
    }
    var WallJump = cc.moveBy(0.25, cc.v2(this.jumpDistance, this.jumpHeight / 2));
    this.node.runAction(WallJump);
},

• 落下，这是一个被动方法，只要玩家在空中且没有上升力，此方法就一直执行

drop(speed) {
    this.node.y += speed;
},

主角的碰撞处理

• 碰撞开始

onCollisionEnter: function (other, self) { //处理碰撞的方法
    if (other.node.group == "Ground" || other.node.group == "Platform") { //如果玩家碰到的是节点分组中的地面,或平台
        this.otherObject = other; //获取另一个对象（玩家碰撞的对象）
        if (this.speed < -30) { //如果速度过快
            this.hp = 0; //摔死
        }
        if (self.node.getComponent("Player").playerState == 2 && other.node.y < self.node.y) { //如果玩家状态为下落
            self.node.getComponent("Player").playerState = 0; //玩家状态变为站立
            self.node.y = other.node.y + other.node.height / 2 + 42; //回弹，防止人物脚陷入地面
            if (this.isRun) { //如果是跑动状态
                if (this.playerDirection == 0) { //如果玩家方向为左
                    this.getComponent(cc.Animation).play("主角左跑动画");
                } else { //否则，就是玩家方向为右
                    this.getComponent(cc.Animation).play("主角右跑动画");
                }
            } else { //否则就是玩家不是跑动状态
                if (this.playerDirection == 0) { //如果玩家方向为左
                    this.getComponent(cc.Animation).play("主角左立动画");
                } else { //否则，就是玩家方向为右
                    this.getComponent(cc.Animation).play("主角右立动画");
                }
            }
        } else if (self.node.getComponent("Player").shinState == 2) {
            self.node.getComponent("Player").playerState = 0; //玩家状态变为站立
            if (self.node.getComponent("Player").playerDirection == 0) {
                self.node.x += 20;
                this.getComponent(cc.Animation).play("主角左立动画");
            } else {
                self.node.x -= 20;
                this.getComponent(cc.Animation).play("主角右立动画");
            }
        }
    } else if (other.node.group == "Wall") { //如果玩家碰到的是节点分组中的墙壁
        if (this.isAttack) { //如果是攻击状态
            this.isRun = false; //停止跑动
            if (this.playerDirection == 0) { //如果人物方向为左
                this.node.x += 50; //攻击到墙壁往右回弹
            } else { //否则（人物方向为右）
                this.node.x -= 50; //攻击到墙壁往左回弹
            }
        } else {
            if (self.node.getComponent("Player").playerState == 0) {
                self.node.y += 20;
            }
            this.node.stopAction(this.wallJump);
            self.node.getComponent("Player").playerState = 3; //玩家状态变为爬墙
            this.isRun = false;
            this.shinState = 0; //攀爬状态为不动
            if (this.playerDirection == 0) { //如果人物方向为左
                self.node.x = other.node.x + other.node.width / 2 + 25; //回弹，防止人物陷入墙壁
                this.getComponent(cc.Animation).play("主角左贴动画");
            } else { //否则，就是人物方向为右
                self.node.x = other.node.x - other.node.width / 2 - 25; //回弹，防止人物陷入墙壁
                this.getComponent(cc.Animation).play("主角右贴动画");
            }
        }
    } else if (other.node.group == "Pitfall") { //如果玩家碰到的是节点分组中的陷阱
        this.hp = 0;
        this.time = 0;
    } else if (other.node.group == "Save") { //如果玩家碰到的是节点分组中的保存点
        this.playerX = this.node.x;
        this.playerY = this.node.y;
    }
},

• 碰撞过程中

onCollisionStay: function (other, self) {
    if (other.node.group == "Lamp") {
        if (this.isAttack) {
            this.mayJump = true;
            this.node.getComponent(cc.BoxCollider).size = cc.size(55, 87); //获取主角的碰撞器，并设置包围盒大小（缩小包围盒，因为攻击到灯后结束攻击人物收刀后碰撞范围变小）
            this.isAttack = false;
            this.time = 0;
        }
    }
},

• 碰撞结束时

onCollisionExit: function (other, self) {
    if (this.hp > 0) {
        if (other.node.group == "Ground" || other.node.group == "Platform") { //如果玩家与地面或平台碰撞结束
            if (self.node.getComponent("Player").playerState == 0) { //如果玩家状态为站立
                self.node.getComponent("Player").playerState = 2; //玩家状态变为下落
                if (this.playerDirection == 0) { //如果玩家方向为左
                    this.getComponent(cc.Animation).play("主角左落动画");
                } else { //否则，就是玩家方向为右
                    this.getComponent(cc.Animation).play("主角右落动画");
                }
            }
        } else if (other.node.group == "Wall" && self.node.getComponent("Player").playerState == 3) {
            this.playerState = 1; //玩家状态设为跳
            this.WallGroundJump(); //玩家执行翻跳上地面
            this.speed = 100; //刚起跳时速度快
            this.mayJump = false; //能跳设为false
        }
    }
},

在update中刷新玩家

update(dt) {
    if (this.hp == 0) { //如果玩家生命值为0，就是死了     
        if (this.time == 0) {
            this.getComponent(cc.Animation).play("主角爆炸动画");
        }
        if (this.time < 0.4) {
            this.time += dt;
        } else if (this.time >= 0.4) {
            this.node.x = this.playerX;
            this.node.y = this.playerY + 30;
            this.speed = 0;
            this.playerState = 2;
            this.time = 0;
            this.isRun = false;
            this.hp = 5;
        }
    } else { //否则，就是活着
        //this.camera.x = this.node.x; 
        //if (this.camera.x > this.node.x + 100) {
            this.camera.x = this.node.x //+ 100;
        //} else if (this.camera.x < this.node.x - 100) {
            this.camera.x = this.node.x //- 100;
        //}
        if (this.camera.y > this.node.y + 100) {
            this.camera.y = this.node.y + 100;
        } else if (this.camera.y < this.node.y - 100) {
            this.camera.y = this.node.y - 100;
        if (this.isAttack) { //是否是攻击状态
            this.time += dt; //计时
            if (this.time > 0.3) { //当时间大于0.3秒
                this.node.getComponent(cc.BoxCollider).size = cc.size(55, 87); //获取主角的碰撞器，并设置包围盒大小（缩小包围盒，因为攻击结束人物收刀后碰撞范围变小）
                this.isAttack = false; //将攻击状态变为false
                this.time = 0; //时间归零
                if (this.playerState == 0) { //如果玩家是站立状态
                    if (this.isRun) { //如果玩家是跑动的的
                        if (this.playerDirection == 0) { //如果玩家方向为左
                            this.getComponent(cc.Animation).play("主角左跑动画");
                        } else { //否则（就是玩家方向为右）
                            this.getComponent(cc.Animation).play("主角右跑动画");
                        }
                    } else { //否则（就是站在不动）
                        if (this.playerDirection == 0) { //如果玩家方向为左
                            this.getComponent(cc.Animation).play("主角左立动画");
                        } else { //否则（就是玩家方向为右）
                            this.getComponent(cc.Animation).play("主角右立动画");
                        }
                    }
                } else { //否则（就是在空中）
                    if (this.playerDirection == 0) { //如果玩家方向为左
                        this.getComponent(cc.Animation).play("主角左落动画");
                    } else { //否则（就是玩家方向为右）
                        this.getComponent(cc.Animation).play("主角右落动画");
                    }
                }
            }
        if (this.isRun) { //如果能跑动
            if (this.playerDirection == 0) { //如果玩家方向是左
                this.leftMove(); //向左跑
            } else { //否则
                this.rightMove(); //向右跑
            }
        if (this.playerState == 0) { //如果玩家状态为站立
            this.speed = 0; //速度归零
            this.mayJump = true; //能跳跃
        } else if (this.playerState == 1) { //如果玩家状态为跳
            this.speed -= dt * 400; //速度越来越慢
            if (this.speed <= 0) { //如果速度减少到小于等于0
                this.speed = 0; //速度归零
                this.node.stopAction(this.jumpAction); //停止跳
                this.playerState = 2; //玩家状态变为下落
            }
        } else if (this.playerState == 2) { //如果玩家状态为下落
            this.speed -= dt * 30; //下落状态下速度随时间变得越来越快
            this.drop(this.speed); //执行下落
        } else if (this.playerState == 3) { //如果玩家状态为爬墙
            this.speed = 0; //速度归零
            this.mayJump = true; //能跳跃
            this.shin(); //攀爬
        }
    }
},

Game脚本

创建Game脚本

• 在资源管理器的Script文件夹下创建一个JavaScript脚本，重命名为Game
• 将脚本Game挂在Canvas上

编辑Game脚本

在onLoad中开启碰撞监听、监听系统事件

onLoad() {
    var manager = cc.director.getCollisionManager(); //获取碰撞组件
    manager.enabled = true; //开启碰撞监听
    //manager.enabledDebugDraw = true; //开启碰撞组件Debug
    this.playerJS = this.Player.getComponent("Player"), //获取玩家脚本
    //系统事件，当键被按下时调用keyDown回调函数处理
    cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.keyDown, this);
    //系统事件，当键弹起时调用keyUp回调函数处理
    cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.keyUp, this);
},

创建keyDown于keyUp方法用来控制玩家

• keyDown方法

playerJS: null, //玩家脚本
keyDown(event) {
    if (this.playerJS.hp > 0) { //如果玩家hp大于0，就是玩家活着
        switch (event.keyCode) {
            case cc.macro.KEY.a:
                if (this.playerJS.isRun == false) { //如果能跑动是错误的
                    if (this.playerJS.playerState != 3) { //如果玩家不为爬墙
                        this.playerJS.isRun = true; //能跑动设为true
                        this.playerJS.playerDirection = 0; //玩家方向设为左
                        if (this.playerJS.playerState == 0) { //如果玩家狀態為站立
                            this.Player.getComponent(cc.Animation).play("主角左跑动画");
                        }
                    } else if (this.playerJS.playerDirection == 1) {
                        this.playerJS.playerState = 1; //玩家状态设为跳
                        this.playerJS.WallJump(); //玩家执行爬墙跳
                        this.playerJS.playerDirection = 0; //玩家方向设为左
                        this.playerJS.speed = 200; //刚起跳时速度快
                        this.playerJS.mayJump = false; //能跳设为false
                        this.Player.getComponent(cc.Animation).play("主角左跳动画");
                    }
                }
                break;
            case cc.macro.KEY.d:
                if (this.playerJS.isRun == false) { //如果能跑动是错误的
                    if (this.playerJS.playerState != 3) { //如果玩家不为爬墙
                        this.playerJS.isRun = true; //能跑动设为true
                        this.playerJS.playerDirection = 1; //玩家方向设为右
                        if (this.playerJS.playerState == 0) { //如果玩家狀態為站立
                            this.Player.getComponent(cc.Animation).play("主角右跑动画");
                        }
                    } else if (this.playerJS.playerDirection == 0) {
                        this.playerJS.playerState = 1; //玩家状态设为跳
                        this.playerJS.WallJump(); //玩家执行爬墙跳
                        this.playerJS.playerDirection = 1; //玩家方向设为右
                        this.playerJS.speed = 200; //刚起跳时速度快
                        this.playerJS.mayJump = false; //能跳设为false
                        this.Player.getComponent(cc.Animation).play("主角右跳动画");
                    }
                }
                break;
            case cc.macro.KEY.w:
                if (this.playerJS.playerState != 3) { //如果玩家状态不为爬墙
                    if (this.playerJS.mayJump) { //如果能跳                   
                        this.playerJS.playerState = 1; //玩家状态设为跳
                        this.playerJS.jump(); //玩家执行跳
                        this.playerJS.speed = 200; //刚起跳时速度快
                        this.playerJS.mayJump = false; //能跳设为false
                        if (this.playerJS.playerDirection == 0) { //如果玩家方向为左
                            this.Player.getComponent(cc.Animation).play("主角左跳动画");
                        } else { //否则，就是玩家方向为右
                            this.Player.getComponent(cc.Animation).play("主角右跳动画");
                        }
                    }
                } else { //否则，就是玩家为爬墙状态
                    this.playerJS.shinState = 1; //攀爬状态设为上爬
                    if (this.playerJS.playerDirection == 0) { //如果玩家方向为左
                        this.Player.getComponent(cc.Animation).play("主角左爬动画");
                    } else { //否则，就是玩家方向为右
                        this.Player.getComponent(cc.Animation).play("主角右爬动画");
                    }
                }
                break;
            case cc.macro.KEY.s:
                if (this.playerJS.playerState == 0) { //如果玩家状态为站立
                    if (this.playerJS.otherObject.node.group == "Ground") { //如果玩家依附在地面上
                        //蹲下
                    } else if (this.playerJS.otherObject.node.group == "Platform") { //如果玩家依附在平台上
                        //this.Player.y -= 30; //玩家y坐标减，为了快速从平台上落下（此语句可有可无）
                        this.playerJS.playerState = 2; //玩家状态变为下落状态
                        if (this.playerJS.playerDirection == 0) { //如果玩家方向为左
                            this.Player.getComponent(cc.Animation).play("主角左落动画");
                        } else { //否则，就是玩家方向为右
                            this.Player.getComponent(cc.Animation).play("主角右落动画");
                        }
                    }
                } else if (this.playerJS.playerState == 3) { //如果玩家状态为爬墙
                    this.playerJS.shinState = 2 //攀爬状态设为下滑
                    if (this.playerJS.playerDirection == 0) { //如果玩家方向为左
                        this.Player.getComponent(cc.Animation).play("主角左爬动画");
                    } else { //否则，就是玩家方向为右
                        this.Player.getComponent(cc.Animation).play("主角右爬动画");
                    }
                }
                break;
            case cc.macro.KEY.j:
                if (this.playerJS.isAttack == false) { //如果玩家攻击状态为false（已经是攻击状态不能再攻击，必须等攻击结束才能再次攻击）
                    if (this.playerJS.playerState != 3) //如果玩家不为爬墙状态（不能在爬墙时攻击）
                    {
                        this.playerJS.attack(); //玩家执行攻击
                    }
                }
                break;
        }
    }
},

• keyUp方法

keyUp(event) {
    if (this.playerJS.hp > 0) { //如果玩家hp大于0，就是玩家活着
        switch (event.keyCode) {
            case cc.macro.KEY.a:
                if (this.playerJS.isRun && this.playerJS.playerDirection == 0) { //如果在跑动,并且玩家方向朝左
                    this.playerJS.isRun = false; //能跑动设为false
                    if (this.playerJS.playerState == 0) { //如果玩家狀態為站立
                        this.Player.getComponent(cc.Animation).play("主角左立动画");
                    }
                }
                break;
            case cc.macro.KEY.d:
                if (this.playerJS.isRun && this.playerJS.playerDirection == 1) { //如果在跑动,并且玩家方向朝右
                    this.playerJS.isRun = false; //能跑动设为false
                    if (this.playerJS.playerState == 0) { //如果玩家狀態為站立
                        this.Player.getComponent(cc.Animation).play("主角右立动画");
                    }
                }
                break;
            case cc.macro.KEY.w:
                if (this.playerJS.playerState != 3) { //如果玩家状态不为爬墙
                    if (this.playerJS.playerState == 1) { //如果玩家状态为跳,并且速度大于100
                        if (this.playerJS.speed > 100) {
                            this.playerJS.speed = 50; //玩家速度变慢
                        }
                    }
                } else { //否则，就是玩家为爬墙状态
                    this.playerJS.shinState = 0; //攀爬状态设为不动
                    if (this.playerJS.playerDirection == 0) { //如果玩家方向为左
                        this.Player.getComponent(cc.Animation).play("主角左贴动画");
                    } else { //否则，就是玩家方向为右
                        this.Player.getComponent(cc.Animation).play("主角右贴动画");
                    }
                }
                break;
            case cc.macro.KEY.s:
                if (this.playerJS.playerState == 3) {
                    this.playerJS.shinState = 0; //攀爬状态设为不动
                    if (this.playerJS.playerDirection == 0) { //如果玩家方向为左
                        this.Player.getComponent(cc.Animation).play("主角左贴动画");
                    } else { //否则，就是玩家方向为右
                        this.Player.getComponent(cc.Animation).play("主角右贴动画");
                    }
                }
                break;
        }
    }
},

项目链接

https://github.com/VRVVR/ccz.git