Cocos2d-JS中使用CocosStudio资源——帧动画（1）

在本篇博客中，我们将通过一个在Cocos2d-JS中使用从CocosStudio导出的帧动画资源的例子，来简要介绍以下内容：利用ActionTimeLine进行动画切割，如何使用导出的帧动画资源。关于帧动画，由于内容繁杂。我们将分为两篇进行介绍。本篇将主要介绍资源的准备工作，下一篇将主要介绍资源的使用问题。

不得不说：

按照原来的进度安排，帧动画和骨骼动画我准备最后介绍。但是，看到好多朋友非常期待动画的讲解，于是就修改了一下计划。其实，关于帧动画，前几天就大体研究明白了，这几天一直围绕着一个“坑”，怎么都爬不出来。那就是：setFrameEventCallFunc方法总是回调不成功，后来经过和很多人交流，貌似这是一个Bug，而且ActionTimeLine中的bug还不止这一处。

额，希望官网尽早给出回应，尽早修复吧。当然了，也有可能我用的不对。如果有用得明白的朋友，欢迎指点，欢迎讨论。

这里要特别感谢帮助我很多的两个朋友：这路没刹车的和wxhqforever，给你们的热情帮助点个赞！！

一、CocosStudio准备

第一步：从官网下载相应的示例，BattleScene。效果图如下：

其实，我们只使用中间那个拿着叉子的大鲨鱼。

第二步：制作我们使用的CocosStudio项目：

为什么要自己制作CocosStudio项目？

对于官网提供的资源：一、我们并不需要那么复杂，因为我们讲的重点在于如何使用资源，而不是如何制作资源，所以要进行适当地简化。二、官网提供的资源，特别是关于帧动画部分，和我们现在使用的环境并不匹配，出现版本兼容问题，所以我们要进行适当地改动。

具体改动操作如下：

1.目标概览：我们最终的制作效果如下：

2.导入资源，创建节点：创建项目后，我们需要导入如下资源：generalshark.csd和generalshark_png文件夹及其中的文件。导入后，创建一个新节点：Shark.csd。效果如下：

3.复制资源到新节点：双击generalshark.csd文件，在动画面板中选择全部资源（Ctrl + A），并复制（Ctrl + C），再双击Shark.csd文件，并在动画面板中选择后粘贴（Ctrl + V）。最后，删除generalshark.csd文件。部分截图如下：

全部选中时的状态：

粘贴后Shark.csd的状态：

PS:这里要说明一下，为什么要这么费事地复制粘贴。因为版本不兼容。你选中generalshark.csd后，会发现属性说明中是这样的：

你选中Shark.csd后，会发现属性说明中是这样的：

而且，你从颜色上就可以看出差别，Shark.csd和generalshark.csd的颜色也是不一样的。

4.设计布局：请直接将Shark.csd和三个Button按钮拖入到Scene中进行相应的布局，具体布局请参照第一步中的目标概览。

5.非常重要！！！将Shark.csd切割为不同的动画，操作结果如下图所示：

PS:进入动画管理界面的方法为，点击动画面板中长得有点像“一支笔”的那个按钮。这步操作必须认真完成，至于这么做的好处，我们将在下篇博客中详细阐述。

第三步：发布资源。注意发布设置中应该将数据格式改为JSON格式，发布位置你可以选择Cocos Code IDE中所创建的项目的res文件夹即可，当然，也可以另选其他文件夹。具体发布设置如下图：

为了便利大家，下面提供CocosStudio项目资源的百度云下载链接：
链接：http://pan.baidu.com/s/1eQxVXE6 密码：9vjw

二、Cocos Code IDE操作

第一步：创建Cocos2d-JS项目，并将Cocos Studio发布的资源res，拷贝到项目的res文件夹下或直接发布到项目的res文件夹下。

PS:创建项目的时候，分辨率默认640 x 960就可以了，方向选择竖向。

第二步：修改project.json文件，在modules中添加cocostudio。在jsList中添加FrameAnimationScene.js和resource.js。具体代码如下：

{
  "project_type": "javascript",
  "debugMode": 1,
  "showFPS": true,
  "frameRate": 60,
  "id": "gameCanvas",
  "renderMode": 0,
  "engineDir": "frameworks/cocos2d-html5",
  "modules": [
    "cocos2d",
    "cocostudio"
  ],
  "jsList": [
    "src/resource.js",
    "src/FrameAnimationScene.js"
  ]
}

第三步：在resource.js文件中指定所需的各种资源，以备后期加载使用。具体代码如下：

var res = {
        frame_animation_json:"res/FrameAnimationScene.json",
        shark_json:"res/Shark.json"
};

var g_resources = [];
for (var i in res) {
    g_resources.push(res[i]);
}

第四步：非常非常重要的一步，你需要修改main.js文件，将其中的：cc.view.setDesignResolutionSize(960,640,cc.ResolutionPolicy.SHOW_ALL);改为cc.view.setDesignResolutionSize(640, 960, cc.ResolutionPolicy.SHOW_ALL);。

虽然，我们选择的方向是竖向，但是不知道为什么，当创建项目的时候宽高还是为960,640。而，竖向的时候宽高应该为640,960。所以，要进行相应的修改才能正常运行。如果你想看不该的效果，可以尝试一下，会有惊喜哦。

main.js的具体代码如下：

cc.game.onStart = function(){
    cc.view.adjustViewPort(true);
    cc.view.setDesignResolutionSize(640, 960, cc.ResolutionPolicy.SHOW_ALL);
    cc.view.resizeWithBrowserSize(true);
    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        cc.director.runScene(new FrameAnimationScene());
    }, this);
};
cc.game.run();

三、总结

关于帧动画的准备工作，到这里就算结束了。你可以自己运行一下CocosStudio项目中的Shark.csd中的动画效果，看一看。下篇中，我们将要详细讲解在CocosCodeIDE中如何使用帧动画资源。

特别说明：帧动画，顾名思义，是通过一帧一帧播放来达到动画效果的。与骨骼动画相比，有很多缺点。其中比较明显的有：如果要达到逼真效果，那么图片资源文件相对来说会非常大，图片数量也会非常多。

但是，官网的示例给我们提出了一种重要的改进措施。你可以打开官网示例中的BattleScene进行查看。你会发现，虽然使用的是帧动画，但是官网示例将整个人物分解为几个部分，每个部分一张图片。每个部分在每一帧的变化组成了整个人物在每一帧的变化。

这种“类骨骼动画精髓”的帧动画，有效地改进了帧动画在控制图片资源数量和大小方面的控制能力。

关于如何制作出优秀的帧动画，已经超出了本系列教程的范围，我们在这里就不再详细阐述了。