手把手教你用 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

获取代码

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20191025A091AK00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券