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

企业开发 2019-08-16 09:37:59 阅读次数: 0

版权声明：

  • 本文原创发布于博客园"优梦创客"的博客空间（网址：http://www.cnblogs.com/raymondking123/）以及微信公众号"优梦创客"
  • 您可以自由转载，但必须加入完整的版权声明！

游戏原图


游戏介绍

  • 《信使（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

猜你喜欢

转载自www.cnblogs.com/raymondking123/p/11361862.html
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022