【CocosCreator入门】Animation动画的制作和使用(上)

原文地址:https://www.jianshu.com/p/7d9574f179eb

在CocosCreator中,想要播放序列帧动画,通常使用Animation来完成。

什么是序列帧动画?

如下图:


【CocosCreator入门】Animation动画的制作和使用(上)

在游戏中,把上面这组图一张一张地播放,最后会形成动画的效果,如下:

【CocosCreator入门】Animation动画的制作和使用(上)

上面的素材可以在这个链接下载:http://pan.baidu.com/s/1hrYMba8

下面开始制作。

1.我这里新建一个节点,命名为blast(爆炸)

【CocosCreator入门】Animation动画的制作和使用(上)

2.选中这个节点,然后选择下面的动画编辑器选项卡


【CocosCreator入门】Animation动画的制作和使用(上)

3.点击添加Animation组件


【CocosCreator入门】Animation动画的制作和使用(上)

4.根据提示,继续点击新建AnimationClip


【CocosCreator入门】Animation动画的制作和使用(上)

5.会提示保存,我们输入small作为他的文件名,并点击保存


【CocosCreator入门】Animation动画的制作和使用(上)

6.根据提示,点击左上角按钮开始编辑


【CocosCreator入门】Animation动画的制作和使用(上)

7.点击属性列表中的add property按钮,选择添加cc.Sprite.spriteFrame

【CocosCreator入门】Animation动画的制作和使用(上)
点击之后,属性列表会多出来一条cc.Sprite.spriteFrame,就像上图那样

8.将序列帧图片一张一张地拖到时间轴上

【CocosCreator入门】Animation动画的制作和使用(上)
由于CocosCreator本身的问题,这个操作可能需要多试两次才能成功,试一下


【CocosCreator入门】Animation动画的制作和使用(上)
拖拽成功,图片上去了

9.把剩余图片也拖上去


【CocosCreator入门】Animation动画的制作和使用(上)

10.再往右边的内容看不到怎么办?

按住空格,拖拽鼠标左键,就能移动时间轴


【CocosCreator入门】Animation动画的制作和使用(上)
       
【CocosCreator入门】Animation动画的制作和使用(上)

11.点第一个节点,准备预览效果


【CocosCreator入门】Animation动画的制作和使用(上)

12.点击左边三角形播放箭头,进行预览


【CocosCreator入门】Animation动画的制作和使用(上)

13.最终效果会在场景编辑器(就是整个屏幕中间部分的工作区)中显示出来


【CocosCreator入门】Animation动画的制作和使用(上)

14,确认效果后,点击动画编辑器左上角的编辑按钮,结束编辑


【CocosCreator入门】Animation动画的制作和使用(上)

15.提示保存,保存即可

至此,我们已经拥有一个动画文件small.anim,在我们的资源管理器中能够看到他


【CocosCreator入门】Animation动画的制作和使用(上)

下一章我们将讲解如何使用它,感谢阅读!

喜欢这篇文章吗?可以关注作者微信公众号(独立游戏开发笔记):


【CocosCreator入门】Animation动画的制作和使用(上)