首先找到酷跑资源包里的一个角色,用ShoeBox把图片拆分出来

cocos creator酷跑游戏制作02--定义一个跑酷动画

拆分后的样子:

cocos creator酷跑游戏制作02--定义一个跑酷动画

打开cocos Creator新建一个空白项目然后在资源管理器下的assets下

新建Texture 用于存放图片资源,
Animation用于存放动画clip,
Script用于存放JS代码,
Scene用于存放已制作好的游戏场景。
cocos creator酷跑游戏制作02--定义一个跑酷动画

使用TexturePackerGUI 合并分割后的精灵图,

cocos creator酷跑游戏制作02--定义一个跑酷动画
data file:存放在cocosCreator资源管理器中的新建好的Texture文件夹中
Texture file:路径和Datafile一致,此为合并后的照片集
设置好路径后点击Add Sprites下,添加需要合并的照片
最后点击Publish 进行合并
cocos creator酷跑游戏制作02--定义一个跑酷动画

在层级管理器中创建一个新的节点BaseView,把动画图1拉到BaseView层下更改名字为Hero,随后点击新建Clip文件,放到Animation下,取名为Run。

cocos creator酷跑游戏制作02--定义一个跑酷动画cocos creator酷跑游戏制作02--定义一个跑酷动画

接下来开始制作动漫,点击动画编辑器,打开编辑,点击Add Property,选择cc.Sprite.spriteFrame,然后将Texture-》Hero中的12张图片全部导入到编辑器中

cocos creator酷跑游戏制作02--定义一个跑酷动画

全部拖到红框中,Sample设置为12(因为是12张图),Speed设置为1.5(可按要求自定义),WrapMode设置为Loop(无限循环)

cocos creator酷跑游戏制作02--定义一个跑酷动画

cocos creator酷跑游戏制作02--定义一个跑酷动画

参数详解:

Normal:从左到右只循环一次
Loop:从左到右无限循环
PingPong:先从左到右,再从右到左无限循环
Reverse:从右到左 只循环一次
LoopReverse:从右到左无限循环
PingPongReverse:先从右到左,再从左到右无限循环
cocos creator酷跑游戏制作02--定义一个跑酷动画

随后保存Run文件, 将Run挂载到Hero—>Animation–>DefauitClip。 直接拖拉到DefauitClip框中即可

cocos creator酷跑游戏制作02--定义一个跑酷动画

完成后点击播放动画即可预览效果

cocos creator酷跑游戏制作02--定义一个跑酷动画

相关文章: