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