Cocos Creator - 制作精灵帧动画

本文档主要根据官方文档上的图集资源、动画系统、音乐和音效等章节内容进行综合使用。

---

1、制作图集

制作图集有两种工具：

• TexturePacker
• Zwoptex（只能在Windows上使用）

我这里使用TexturePacker进行图集制作：

1.准备原始图片，如下图：
这些都是单张的图，按顺序播放的话，能看出是佐助在释放千鸟技能的一个动画，我们现在就是要将这些图做成图集，并使用动画系统让cocos creator播放出来，下面开始打包图集。

打开TexturePacker软件，并将以上图片全部拖入右侧空白区域，如下图：
中间部分就是拖进去的图片打包成一张图的示意图。
点击左侧的DataFile的选择文件夹按钮，选择一个本地电脑并输入文件名后点击保存：
最后点击工具栏上的Publish按钮，即可输出图集文件：
输出的图集文件如下：
# 2、导入图集 #
直接拖动以上两个文件到CocosCreator资源管理器的的assets节点上，即可将图集资源导入：
展开图集文件，并拖动第一个图片到场景编辑器中，并在层级管理器中调整父节点为Canvas，即可在场景中添加一个精灵节点，供后续编辑精灵帧动画使用。

3、编辑精灵帧动画

首先选中场景编辑器中的精灵节点，并切换下方的标签到动画编辑器，此时下方提示要制作动画，需要先为当前节点添加动画组件，并附带了一个按钮，点一下即可添加动画组件到当前节点。也可以在节点的属性检查器中，点击添加组件->其他组件->Animation来添加动画组件。
点了后又发现还有一个提示当前动画组件缺少动画Clip，就是动画剪辑，继续点击：

点了后要你输入一个动画剪辑的名称和选择保存路径，这里先随意…，点击保存，然后在资源管理器中将保存的动画剪辑文件拖动到Animation组件的DefaultClip中，如下图：
回到动画编辑器。根据提示点击左上角的打开/关闭编辑模式。
确保我们是在打开编辑模式下哈。。。。，下面开始制作动画：
点击属性列表中的Add Property 并选择cc.Sprite.spriteFrame，来添加精灵帧属性，理论知识请各自查询官方文档。
选择图集中的所有图片，并拖动第一张图片到属性列表右侧的序列帧窗口中，释放后，自动将所有图片作为关键帧添加到序列帧窗口中。点击播放，可查看动画效果。
如果觉得动画播放过快，可调整下方的Sample数据，进行速度控制。

完成后在点击动画编辑器左上角打开/关闭动画编辑按钮，并保存动画。
以上即在编辑器中完成了精灵帧动画的编辑，此时运行的话，动画并不能自动播放，还需要在脚本中启动动画播放。

在资源管理器的assets节点上右键，并添加JavaScript脚本文件。重命名为playQianniao(名称随意)，双击打开并添加以下代码：

cc.Class({
   
   
    extends: cc