使用 cc.Animation 来做RPG游戏角色动画

使用 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 来做角色动画了，缺点是非可视化调整。