25堂开发课|Cocos Creator 完美复刻经典款飞行射击游戏,能否击中你...-技术圈

去年年末，布道师放空通过25堂游戏开发课，带大家从零开始用 Cocos Creator 3.x 做出了一款 STG 游戏《鹰击长空》。今天，经过 Demo Team 小伙伴的深入优化，《鹰击长空》全套源码正式上线，大家可以在 Cocos Store 下载（源码和视频地址见文末）！

空战题材的飞行射击类游戏《鹰击长空》由 Cocos 官方 Demo Team 推出，游戏完美复刻了 STG 玩法，玩家通过操纵一个物体发射子弹击毁敌机，同时躲避敌机的子弹，并在满屏弹幕中杀出一条生路。

飞行射击向来是游戏市场的一大热门品类，很大原因就在于其玩法简单，同时又有很高的可塑性。《鹰击长空》在特效、美术、规则上做足了功夫，用流畅的战斗体验、酷炫的画面表现、出乎意料的游戏设定，将求生和探索完美融合在一起。接下来，放空将和大家扒一扒《鹰击长空》中的那些技术实现亮点。

酷炫的美术特效

为了营造更强的视觉冲击力，我们给游戏加入了满屏弹幕效果、道具吸附效果、各种爆炸以及爆炸后的烟雾效果，这些效果大量采用了粒子+Shader 的方式来实现。

子弹弹幕

游戏设计有多种子弹，每一个子弹都结合了面片+粒子特效/动画来实现。面片之间采用 GPU 合批选项，从而尽最大可能减少渲染 DrawCall；动画通常控制粒子的旋转，让粒子在移动发射的过程中不至于太生硬。

经典空战中雷电射击效果也必不可少。大家都知道，雷电光射击的过程中通常不会是一条笔直的光效，更多是会带有一定的扭曲或扰动。扭曲或扰动的效果通常有两种：

一种是跟鞭子一样，有轻微甩动的。论坛开发者「七七八八」通过 Line 组件里的多段拼接实现了这一效果，感兴趣的可以移步论坛查看详细方案。

如何实现飞行射击中的「激光鞭」：

https://forum.cocos.org/t/topic/116770

另一种是先设定一个笔直的面片，然后通过 Shader 在视觉上表现出激光扭曲来实现。为了减少碰撞检测上的开销，我们在《鹰击长空》中采用了这种方法。通过一张噪声纹理实现激光周边的泛光效果，利用运行时间与激光运动速度得到一个每帧动态变化的 UV，接着将 UV 应用到激光贴图与噪声纹理上，这样就实现了一个带扰动效果的周身泛光的激光效果。可以在项目里搜索 uvMove 查看实现方式。

爆炸与烟雾

敌机被击落或 Boss 中的某一个部件被销毁都需要用到大量的爆炸以及烟雾特效。在灯光无法影响到粒子以及没有粒子碰撞等功能的前提下，《鹰击长空》通过多个节点不断去拆分和细化细节，实现更炫酷的爆炸效果：

爆炸产生的火焰：粒子系统制作，利用粒子系统的 TextureAnimaionModule 功能播放火焰爆炸的序列帧图片。
机体爆炸的碎片：粒子系统制作，由于使用真实的模型去制作飞机碎片比较消耗资源，因此选择了用一些块状的贴图来模拟飞机碎片。
机体爆炸产生的黑烟：粒子系统制作，给烟雾粒子制作随机的大小、角度、透明度变化。
机体爆炸的光晕：粒子系统制作，机体爆炸所产生的范围性的曝光，也是用贴图来模拟，相比用真实灯光制作来说，减少消耗。
机体爆炸产生的火星颗粒：粒子系统制作，利用 VelocityOvertimeModule 使得粒子有个从高速喷射到减速的效果。
机体爆炸产生的冲击波：粒子系统制作，用贴图模拟爆炸产生的气浪。

流畅的操作体验

移动控制

作为一款飞行射击类游戏，玩家操纵飞机移动这一功能是基础中的基础。我们主要通过在游戏中监听 TOUCH_START、TOUCH_MOVE、TOUCH_END 来获得触摸事件，由于触摸事件的位移坐标是以屏幕坐标来计算，而飞机是在 3D 世界下，所以这里需要进行坐标映射。

在游戏中我们采用了一个叫「衰减系数」的值来完成两者之间的坐标转换，让飞机不至于在手指快速移动的过程中出现瞬间移动。

子弹与敌机的生成和回收机制

大家可以看到，在游戏的运行过程中，不论是子弹还是敌机始终是源源不断产出的。在技术实现上，我们会把每一个子弹以及敌机都单独做成一个预制体，并且挂载上一个控制脚本执行自身的生命控制。初期，我们会在需要的时候去创建预制，不需要的时候销毁预制。但是伴随着需要创建以及销毁的物体越来越多，我们会发现游戏变得越发卡顿。这是因为预制创建需要经历一个实例化的过程，而这个过程是有一定开销的，伴随着物体的增加，开销也在不断地累加。

因此，我们采用了一个叫做「节点池」的功能来缓存节点。制定一个物体生成和回收机制，每次在需要的时候去池子里取物体，不需要的时候放回池子里，省去了重复利用的物体实例化的时间，从而节约运行时的开销。

机制与玩法巧思

时间减缓

在《鹰击长空》中，我们加入了一个比较有意思的机制，就是「时间减缓」。当游戏途中玩家手指离开屏幕，子弹和敌机移动的速度都将变得缓慢，从而让玩家在令人眼花缭乱的弹幕和道具中快速找到移动的出路，任谁都无法影响那要展示骚操作的手速。

有趣的玩法实现起来往往很简单，通过一个全局变量 GameManager.gameSpeed，在所有使用到速度的地方都乘以或者除以这个值，当监听到玩家手指离开屏幕后，改变这个 GameManager.gameSpeed 的值，那就可以实现减缓的效果。

难度选择

自选难度，可以让不同玩家拥有各自的游戏体验，并在难度升级中获得变大变强的满足感。《鹰击长空》提供了三种难度选择，通过增加飞机的产出频率、改变飞机的组合、增加飞机的血量、改变飞机子弹发射模式，逐步提升难度，刺激玩家生存的渴望。

通过 enemyManager.ts 可以看到，在代码实现上，我们为每一个组合都创建了一套实现方案，只需要在难度模式选择下去配置不同组合列表即可。

资源链接

现在点击文末【阅读原文】至 Cocos Store、或前往 Cocos 官方旗舰店下载《鹰击长空》全套源码（含策划文档、美术资源、工程源码），限时优惠价 ¥9.9！

https://store.cocos.com/app/detail/3489

小伙伴们可以搭配放空的《鹰击长空》游戏开发视频教程了解学习，上手做自己的 STG 游戏吧！传送门：

http://live.bilibili.com/21811345

往期精彩