这是我关于Cocos Creator的小教程的第3部分。 在第1部分中，我们安装了加农炮。 在第2部分中，我们开始生成流星并向其射击以摧毁它们。 在第3部分中，我们将通过以下方式完善我们的项目：
- 添加很酷的背景图片
- 在我们的流星上添加一条粒子轨迹
- 拍摄流星时添加爆炸动画
- 拍摄流星时增加声音效果
让我们开始吧！
添加一个很酷的背景图像非常重要，但是就像它变得简单一样。 只是给自己一个很酷的形象（我是从Opengameart获得的。实际上，这里使用的所有资源都来自Opengameart）。 然后将其移动到图像中，并将其拖动到节点树中。 这就是您要做的一切：
更新我们的流星预制件
首先，我们将修改流星预制件-好，我们将创建一个新的流星预制件-这样我们以后就可以在其上添加粒子轨迹了。 我们新的预制件不仅会成为流星的形象； 取而代之的是，它将是一个以流星图像和质点轨迹作为其子节点的节点。 让我们做到：
- 打开游戏预制件后，创建一个空节点 。 您可以通过顶部菜单栏中的“节点预设>创建空节点”来执行此操作。 该节点将成为我们的新预制件。
- 然后，将“流星”图像（以前是整个预制件）拖到新节点上，使其成为其子元素
- 将我们的新节点（以流星图像作为子元素）向下拖动到文件导航器，以创建一个新的预制件。 这将是我们的新流星
- 最后，为新节点提供与旧流星节点相同的组件（脚本，RigidBody和对撞机），然后删除旧的预制件
就是这样！ 将游戏的“流星”属性设置为我们的新流星，并且如果您返回游戏，则所有外观和行为均应相同。
添加粒子追踪
Cocos Creator方便地带有内置方法来制作粒子跟踪。 如果您想多花一点钱，Apparticle也可以很好地工作，但是对于本教程，我将使用内置版本。
要创建“ ParticleSystem”节点，请在顶部菜单栏中选择“节点预设>创建渲染器节点>粒子系统节点”。 确保它是我们根节点的子节点，并且它的位置为（0，0），所以它就在我们节点的中间。 另外，请确保它出现在节点树中的流星图像上方 ，以使粒子不会覆盖我们的流星。
这就是制作粒子所需要做的！ 您应该能够打开您的项目并看到它们的运行情况：
太酷了吧？ 现在，您可以根据需要随意修饰粒子。 如果选中自定义框，则会为您的粒子提供很多选择。 这就是我想出的给流星一条粉红色/紫色的轨迹的方法（以配合爆炸动画，这就是我现在要做的）
创建动画预制件
现在，让我们添加一个爆炸动画，以了解子弹与流星碰撞的情况。 同样，只需转到Opengameart并抓住其中一个即可。
我这样做的方式是购买使用从Opengameart获得的单个图像来创建Cocos动画的方法。 这是一个漫长且手动的过程，但是它帮助我学习了如何创建Cocos动画，因此我将带您逐步完成整个过程。
因此，您已经获得了图像：
为了制作动画，请转到Cocos编辑器中的“时间轴”窗格。 您可以在场景编辑器下方的窗口中的“控制台”旁边找到此功能。 当您按“添加新的AnimClip”时，系统将提示您创建一个.anim文件。 这将成为我们的动画。
现在创建您的预制件。 制作一个空节点并将其拖到您的文件导航器中以制作预制件。 然后，将动画组件添加到新的预制件中，并检查加载时的播放 。
现在，在动画时间轴中，您应该能够编辑爆炸动画。 在时间轴窗格中选择“添加属性”，然后选择“ cc.Sprite.spriteFrame”作为属性类型。 如果看不到该选项，请确保（1）已将Sprite组件添加到动画中，以及（2）您正在编辑正确的动画。
当您在时间轴中按下“ cc.Sprite.spriteFrame”属性旁边的“ +”时，您应该看到菱形如下所示：
现在，将菱形向右移动，以使红色条与它不在同一位置，然后再次按“ +”。 应该出现另一个菱形。
您可以将这些钻石视为我们动画的“状态”。 我们将为爆炸动画中的每个图像添加一个，每个图像具有不同的精灵，以便在顺序播放它们时出现该动画。
将精灵添加到钻石的方法非常简单。 只需在时间轴中选择菱形，使其变为白色，然后将图像拖到属性窗格中的“ Sprite Frame”属性中即可。 然后，该图像应出现在所选图像的下方。
并针对您拥有的每张图片执行此操作。 这有点乏味，如果我注意到您不需要创建钻石，可能会有所帮助。 只需将红线设置到某个位置（您可以通过拖动其上方的白色三角形来完成此操作），然后将图像拖动到“ SpriteFrame”属性。 确保事先知道动画将要播放多长时间！ 大约1/3秒的长度很长。
这是我完成的时间表如下所示：
通过按下左上角的“播放”按钮，我可以在场景编辑器中观察正在运行的动画。
就是这样！ 现在我们有了动画。
流星被破坏时显示爆炸
在屏幕上显示我们的动画涉及三个步骤。 在向我展示我的代码之前，请先查看是否可以自行完成：
- 在Game.ts中创建
explosion属性，并为其设置新的动画预制件 - 在Game.ts中创建一个函数
createExplosion()，以在某个位置显示爆炸信息 - 当在Meteor.ts中检测到碰撞时，请调用
createExplosion()来创建爆炸，其中流星曾经是
现在让我们看一下代码。 这就是我添加到Game.ts的内容 ：
我们要做的最后一件事是在流星被破坏时发出声音。 继续并获取声音文件，让我们开始吧。
完成此操作的方式仅是为声音文件创建属性并调用播放该属性的方法。 很简单的。 只需将一个属性添加到您的Game.ts文件中：
@property(cc.AudioClip) explosionSound: cc.AudioClip = null
然后将以下代码行添加到createExplosion() ：
cc.audioEngine.playEffect(this.explosionSound, false)
瞧！ 我们现在正在经历声音。
第三部分就是这样，我们通过添加背景，声音，爆炸和粒子来修饰我们的项目。 在第4部分中，我将介绍您必须担心的更高级的Cocos Creator东西，例如内存管理。
与往常一样，每个部分的完整代码都在Github上。
- 第1部分
- 第2部分
