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

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.Component,properties: {},onLoad () {var anim = this.getComponent(cc.Animation);anim.play();},
});

将脚本文件添加在场景中的精灵节点上，即选中精灵节点，在属性检查器中点击添加组件->用户脚本组件->脚本名称
此时在此运行，即可看到动画播放了。

4、添加帧动画处理器

上面已经成功创建了精灵帧动画，现在我要在佐助释放千鸟时，播放千鸟忍术的音效。
首先我们先将音效文件添加进资源管理器，并在脚本文件的properties中添加以下代码：

properties: {audio: {default: null,type: cc.AudioClip,}},

保存后，回调编辑器，选中精灵节点，并将音效文件拖动到脚本属性中音频位置，如下：
这样我们就可以在脚本中来播放音效了。

我们可以在脚本中播放动画的同时，播放音效，如下代码：

cc.Class({extends: cc.Component,properties: {audio: {default: null,type: cc.AudioClip,}},onLoad () {var anim = this.getComponent(cc.Animation);anim.play();cc.audioEngine.play(this.audio);},
});

这样我们发现，其实佐助在释放千鸟的前2张图片时，不应该播放音效，因为此时千鸟还没有启动，不会产生声音。。。因此，我们需要在播放到第3张图片时才开始播放音效。这时需要用到动画事件，即在序列帧的时间轴上添加事件，动画播放到指定为位置时，就会触发事件，并触发我们绑定的处理函数。
首先选择需要添加事件的位置，然后点击add event按钮，即可添加一个动画事件，如下：
双击白色的矩形打开事件编辑框：
Function编辑框中输入事件处理函数的名称，点击 + - 可添加或删除参数，记得点保存。坑的是这里的处理函数并不能指定到达是哪个脚本文件来处理，而是由引擎自动查找所有的脚本文件，找到匹配的就调用，也许后续版本会改进。我这里是这样设置的：
并把处理函数放置在精灵节点的脚本文件中：

cc.Class({extends: cc.Component,properties: {audio: {default: null,type: cc.AudioClip,}},onLoad () {var anim = this.getComponent(cc.Animation);anim.play();},playQianniao(){cc.audioEngine.play(this.audio);}
});

在此运行，可看到音效是从第3张图片开始播放的。

这里我还添加了一个boom音效，即模拟打中时的爆炸声。

cc.Class({extends: cc.Component,properties: {audio: {default: null,type: cc.AudioClip,},boom: {default: null,type: cc.AudioClip,}},onLoad () {var anim = this.getComponent(cc.Animation);anim.play();},playQianniao(){cc.audioEngine.play(this.audio);},playBoom(){cc.audioEngine.play(this.boom);}
});

代码：https://github.com/deverwh/CocosCreatorDemo/tree/master/SpriteFrameAnimation

PS：本人言拙，如有不明之处，请留言告知！定当逐步完善。

Cocos Creator - 制作精灵帧动画相关推荐

Cocos Creator 优化，帧动画优化
需求背景·:在游戏中使用了大量的帧动画,并且为了drawcall的优化使用了 cocos的自动合集功能,因为帧动画的动作效果需要统一所以图片会有大量空白部分,虽然cocos有自己的trim,但在自动 ...
计算机类说课比赛视频,全国“xx杯”计算机类说课大赛课件一等奖作品：制作逐帧动画说课课件...
<全国"xx杯"计算机类说课大赛课件一等奖作品:制作逐帧动画说课课件>由会员分享,可在线阅读,更多相关<全国"xx杯"计算机类说课大赛课件一等 ...
八年级使用计算机的教案,苏科版信息技术八年级1.2.2《用计算机制作逐帧动画》教案1.doc...
苏科版信息技术八年级1.2.2<用计算机制作逐帧动画>教案1.doc 文档编号:744523 文档页数:4 上传时间: 2019-09-18 文档级别: 文档类型:doc 文档大小:1.3 ...
App Store游戏付费榜前三，推荐一款Cocos Creator制作的文字类游戏
不靠怒刷,不喜宣传,这款基于Cocos Creator制作的文字类游戏「荒野求生」就这样默默无闻地一跃而上,取得了App Store游戏榜前十的好成绩.而且上周还一举挤入游戏付费榜第三.文字类游戏排行 ...
cocos creator制作游戏实战-Flak Cannon（一）
首先设定游戏设定游戏类垄:射击类游戏描述:玩家守卫战舰,发射炮弹防御来自飞机的自杀袭击玩家目标:不要让地方的飞机袭击战舰并消灭飞机敌人描述:飞机从屏幕上方随机位置飞向战舰,从下方飞出,它们的目 ...
cocos creator制作游戏实战-Flak Cannon（二）
上一文主要介绍了游戏的设计思想和一些cocos creator的基本操作,本文将继续讲述下游戏的具体制作. 本文所涉及的知识点包括,预制体(prefab)的制作,按角度移动物体等一.制作飞机,战舰, ...
进击3D游戏界!Cocos Creator快速实现骨骼动画交互!
文章目录前言一.Cocos Creator简介? 二.快速上手Cocos Creator 1.任何语言学习,先概览一遍文档 2.跟随官方Demo,进行游戏的制作三.如何自己实现骨骼模型和界面交互 ...
用 Cocos Creator 制作平台跳跃游戏
前言平台跳跃类游戏如<超级马里奥><Celeste蔚蓝>等,非常考验玩家的操作和判断,有着非常本真的游戏乐趣.这类游戏乍一看,挺容易做的,但是要做好却不太容易.今天,我将使用 ...
初学者使用cocos creator制作第一个小游戏以及脚本编辑器的选择
这是一个官方文档的补充版,以官方文档的快速上手:制作第一个游戏为基础,整合了其他文档内容,同时添加一下自己学习文档的理解,不仅能复习一下自己学到的知识,也帮助新人学习开发更加简单,好了,话不多说,进入 ...

Cocos Creator - 制作精灵帧动画

1、制作图集

3、编辑精灵帧动画

4、添加帧动画处理器

Cocos Creator - 制作精灵帧动画相关推荐

最新文章

热门文章