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

没有更多推荐了,返回首页