2d游戏中角色动画解决方案

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xufeng0991/article/details/79821302

刚刚在cocos creator论坛中，看到有水友在update更新spriteFrame来做角色动画，其实是可以使用 cc.Animation 来做角色动画，，这是我们游戏的实现方式，给大家参考下。

一 资源管理

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