简单粗暴能动态创建帧动画的组件

Creator 2.x
#1

最近要做帧动画，因为有几千张碎图，几百个动画，如果用动画编辑器一个一个的编辑，一张图片一张图片的拖动，不知道要拖到后年马月，而且资源管理器排序也不友好，找图片不方便，而且做好的动画基本不能更改，有一百个动画就要创建一百个animationClip，所以自己用了个笨办法做了个可以动态创建和更改的动画组件，原理很简单，计时器 + spriteFrame，但是我不知道这样做会不会对性能有影响？因为播放动画的时候计时器一直运行，而且要重绘sprite，会不会降低性能，还有就是有没有这个必要？或者有没有其他更好的办法动态创建和更改animation？

粘贴的图像382×593 21.2 KB

这是我做的，大概就是是一个动画数组，可以有很多个动画，每个动画有名称，还有前、后缀（比如帧图片名称是： anim(1).png anim(2).png anim(3).png…等等这种，前缀就是: “anim(” 后缀就是")",中间的数字就是帧编号，没有拓展名），动画的起始帧的编号，结束帧的编号，帧间隔时间（小于1就是帧间隔时间，大于等于1就是动画播放一次所需要的总时间），重复次数（为-1时就是一直重复），还有动画播放速度，现在实现的功能有播放、停止、暂停、恢复、加速、减速（可以在动画播放的时候加快和减慢播放速度，并且不会停止动画也不会重新开始播放），动态更改动画

虽然和官方的animation差不多，但是因为是脚本写的，所以可以动态创建，动态更改（官方的只能创建好所有动画，然后播放不同的动画，我这个可以不用预先创建好，要用的时候再创建），而且一个组件可以通过修改atlas，帧名称前后缀，起始帧编号，结束帧编号来更换为另一个动画，虽然还是要填很多参数，但是最重要的是可以动态创建和修改，虽然并没有什么卵用，秉着交流分享的精神来论坛求助：

第一个：有没有更好的方法？类似于cocos2d的那种动态创建，或者比我这个更好的办法？论坛有位同学发了一个，无奈我看不懂，而且是继承自cc.Animation的（新手一个，对底层基本上完全不了解）

第二个：如果没有更好的方法，如果我这个还过得去的话，这样用计时器和重绘sprite会不会降低性能？主要是网页上，如果性能会降低，有没有优化方法

以下是预先设置好几组动画，然后进行更换的项目，楼底有动态更换和动态添加的项目文件

helloWorld.zip (2.8 MB)

PS：个人水平太低（并不是有限，而是非常低），可能有很多垃圾代码，无用代码，啰嗦代码，或者混乱代码，基本上所有语句都有注释，但是表达能力有问题（不是有限，是有问题），可能有些会看不懂，如果官方或者民间的大神有更好的办法，请教教小弟，感激不尽，或者我的代码哪里有问题，希望能告知（如果以后我用这个出了问题，老板肯定把我炒了，而且还是不放油的内种）

haha.gif960×640 1.92 MB

因为资源有限，以下这图的增加动画是三帧，而更改动画是7帧，所以不要动画以为是一样的

hoho.gif960×640 764 KB

添加动画也很简单，如果动画帧在当前图集里，直接像这样

如果动画帧没有在当前图集，可以通过修改图集，然后再添加动画，但是因为图集改变了，以前的动画就不能播放了

改变动画也很简单，像下面一样

这里并没有预先创建和设置，如果更改的动画在当前图集里，只需要更改的时候直接更改动画的起始编号和结束编号就行了，并没有其他什么操作，这样就不用把clips一个一个事先做好

以下是动态添加和动态更改的项目文件

helloWorld.zip (2.9 MB)

2赞
#2

@flymagic @Garrag 帮我看看我这个怎么样？

#3

各位大神帮忙看看呗

#5

我也写了一个 我用的是组件的update函数做的 没用计时器 用计时器 感觉不靠谱

#6

最开始我也是想用update，但是觉得比较耗性能，因为不管有没有动画update都会执行，但是计时器就只有调用后才执行，而且可以随时取消，还有为啥计时器不靠谱啊？

#7

计时器会不会因为后台，或者卡帧什么的不准啊，如果不准就影响动画执行时间了啊

#8

我觉得应该不会吧，因为计时器和组件的update都差不多，如果是因为手机卡帧，就算是用普通动画也会卡吧

#9

好东西，大佬有更新成更粗暴的版本吗？

#10

可以使用 cc.Animation 来做角色动画，来替换在update中更新spriteFrame，这是我们游戏的解决方案，给你参考下。

一 资源管理

1 美术输出资源要求

首先，规划美术输出角色的动画，一个角色文件夹，比如 warrior_ori，包含角色各种动作子文件夹，如 idle，walk，run 等，动作文件夹中包含对应的图片，如下：

+ warrior_ori
	+ idle
	+ walk
	+ run
	+ atk
	+ skill0
	...

2 资源打包

然后利用脚本对这些文件，进行复制并重命名到另一个文件夹中，比如也叫 warrior_tmp，同时生成一个配置文件 warrior.json，包含所有动作，及其对应的图片名称，另外还有一个每一帧的播放时间，内容如下：

{
	frame_time: 0.14,
	idle:[warrior_idle_00,warrior_idle_01,...],
	walk:[warrior_walk_00,warrior_walk_01,...],
	...
}

这样就得到了一个文件夹 warrior_tmp，内容如下：

+ warrior_tmp
	warrior.json
	warrior_idle_00
	warrior_idle_01
	...
	warrior_walk_00
	warrior_walk_01
	...

然后对warrior下的图片，用texturePacker打包，得到 warrior.png 和 warrior.plist。

3 拷贝资源到游戏

最后，在游戏的资源目录新建文件夹 warrior，将上面前面生成的 warrior.json, warrior.png 和 warrior.plist 拷贝到该文件夹中，在游戏中使用即可，warrior 最终内容如下：

+ warrior
	warrior.json
	warrior.png
	warrior.plist

前面的所有过程都可以使用python脚本完成。

二 资源使用

现在所有需要使用到的角色资源都有，接下来就是怎么使用这些资源的问题，下面是创建角色的伪代码如下：

// 新家角色节点
var node = new cc.Node();

// 异步加载 warrior.json文件
var config = loadRes();

var anim = node.addComponent(cc.Animation);

// 默认使用idle动作
var act = 'idle';
var frames = config[actName];
var clip = cc.AnimationClip.createWithSpriteFrames(frames, frame_time);;
anim.addClip(clip);
var aniState = anim.play(act);
aniState.wrapMode = 2;// 播放模式
aniState.speed = 1;// 播放速度控制

需要注意的是，要对每个动作的clip做缓存，不要重复创建；

这样就可以使用 cc.Animation 来做角色动画了，缺点是非可视化调整。

#11

我这个是因为之前的版本还没有动态创建帧动画，所以才做了这个，现在可以动态创建帧动画了，就不需要我这个了:joy:

#12

求问怎么用官方的动态API创建帧动画

#13

是csdn上的同名寒风吗？