手把手教你用 Cocos Creator 实现《大炮英雄》

个人简介

一枚小工，多年 Cocos2d-x 和 Cocos Creator 游戏开发工程师。现阶段，主要在 Cocos Creator 环境下用 JS 和 TS 进行项目开发。19 年 7 月份开始，想和其他开发者共同分享相关技术解决方案，于是以“一枚小工”的笔名创建了个人公众号，介绍一些完整游戏项目以及开发过程中使用到的技术要点。目前分享出来的几个完整游戏有左右跳、动物同化、重力球、大炮英雄、推箱子、打地鼠等游戏，提供技术讲解的同时，免费提供完整工程源码，希望对打算或从事 Cocos Creator 开发的伙伴有所帮助。如有兴趣，欢迎关注交流。

论坛分享链接：

https://forum.cocos.com/t/cocoscreator-1/80131

https://forum.cocos.com/t/cocoscreator-2/83015

01

游戏预览

02

开始场景

搭建开始场景

摆放一个背景图，在背景图上添加背景地面、开始按钮、4个角色选择按钮、游戏logo。

创建游戏脚本

1. 实现开始按钮的回调，点击开始按钮，跳转到游戏场景。跳转场景方法如下：

4. 游戏中音效必不可少，点击各个按钮时，都需要播放音效，方法如下：

开始场景和脚本关联

1. 将脚本拖到 start 场景的属性检查器中，并将脚本中声明的属性和组件关联起来，如下图：

2. 给开始按钮绑定回调事件，选中开始按钮，在属性检查器中，找到Button属性，将ClickEvents值改成1，表示有一个点击事件，再按照如下方式将函数和组件关联起来：

3. 给角色按钮绑定回调，方法和给开始按钮绑定回调完全一样，只是绑定的函数不同。

03

游戏场景

游戏玩法是控制我方英雄的发炮角度，如果打中敌方英雄就得分，否则会被敌方英雄的炮弹打中，如果我方英雄血量为 0 则游戏结束。

搭建游戏场景

1. 游戏主界面：包含背景，地面，我方英雄，分数文本，返回主界面按钮。

2. 结算界面：包含遮罩层，最高得分文本，当前得分文本，重新开始按钮，返回主界面按钮。

创建游戏脚本

gamePlay.js 脚本是游戏的核心，主要方法如下：

1. 开启物理系统：

2. 设置重力加速度：

3. 添加触摸监听，事件分为 TOUCH_START(开始)、TOUCH_MOVE(移动)、TOUCHCANCEL(取消)、TOUCH_END(结束)四个状态，方法如下：

4. 当开始触摸屏幕时，触发开始的回调 onEventStart()，回调中开启定时器，每隔 0.03 秒角度加 1，并改变炮台的角度，方法如下：

5. 当结束触摸时，触发结束的回调 onEventEnd()，回调中关闭定时器，方法如下：

6. 敌人开炮，需要先调整角度再发炮，炮的角度通过敌方子弹和我方英雄的坐标可计算出来，方法如下：

7. 更换纹理方法：

创建敌人脚本

敌人脚本包含敌人，柱子，敌方炮弹等信息，脚本中的主要方法有：

1. 随机设置柱子的高度：

2. 敌人进出场的动作：

3. 敌人开炮：

创建碰撞脚本

碰撞脚本是给需要做碰撞检测的刚体用的，在碰撞脚本中做碰撞监听，当触发监听后，再调用相应的回调。比如我方子弹需要监听与墙壁，敌人，柱子等物体的碰撞，那么我们先给子弹绑定好碰撞组件，如下图：

再在代码中实现碰撞的回调并保存下来，方法如下：

最后在碰撞开始的监听中调用回调，方法如下：

创建动画脚本

游戏中有英雄角色的等待和走路动作，敌人等待动作，如果在编辑器做动画，编辑的个数比较多，所以我的做法是通过修改纹理达到动画效果，用法是将这个脚本绑定到需要播放动画的节点上，并设置一张大图，方法如下：

使用方法：

参数分别是图片名称，图片张数，间隔时间，是否循环，调用方法：

04

获取代码