本文转载自:https://www.jianshu.com/p/7d9574f179eb
在CocosCreator中,想要播放序列帧动画,通常使用Animation来完成。
什么是序列帧动画?
如下图:
在游戏中,把上面这组图一张一张地播放,最后会形成动画的效果,如下:
上面的素材可以在这个链接下载:http://pan.baidu.com/s/1hrYMba8
下面开始制作。
1.我这里新建一个节点,命名为blast(爆炸)
2.选中这个节点,然后选择下面的动画编辑器选项卡
3.点击添加Animation组件
4.根据提示,继续点击新建AnimationClip
5.会提示保存,我们输入small作为他的文件名,并点击保存
6.根据提示,点击左上角按钮开始编辑
7.点击属性列表中的add property按钮,选择添加cc.Sprite.spriteFrame
点击之后,属性列表会多出来一条cc.Sprite.spriteFrame,就像上图那样
8.将序列帧图片一张一张地拖到时间轴上
由于CocosCreator本身的问题,这个操作可能需要多试两次才能成功,试一下
拖拽成功,图片上去了
9.把剩余图片也拖上去
10.再往右边的内容看不到怎么办?
按住空格,拖拽鼠标左键,就能移动时间轴
11.点第一个节点,准备预览效果
12.点击左边三角形播放箭头,进行预览
13.最终效果会在场景编辑器(就是整个屏幕中间部分的工作区)中显示出来
14,确认效果后,点击动画编辑器左上角的编辑按钮,结束编辑
15.提示保存,保存即可
至此,我们已经拥有一个动画文件small.anim,在我们的资源管理器中能够看到他
下面代码调用即可播放
对于新人来说总是有那么多的坑等着你。
新建动画节点的时候千万别【新建空节点】!!!
上面这个就是新建了空的节点,导致没有cc.Sprite.spriteFrame属性。
正确姿势:
粗略试了一下除了空节点,其他的应该都可以。【创建节点】-》【创建渲染节点】-》【Sprite(精灵)】
总结:经验就是踩坑积累的。很多播客写的教程并不全,所以新手操作起来也会有很多问题,自身多总结多实践就好。