码迷,mamicode.com
首页 > Web开发 > 详细

Cocos2d-JS中使用CocosStudio资源——帧动画(1)

时间:2015-05-11 09:10:55      阅读:260      评论:0      收藏:0      [点我收藏+]

标签:动画   cocos2d   cocostudio   帧动画   cocos2djs   

在本篇博客中,我们将通过一个在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进行查看。你会发现,虽然使用的是帧动画,但是官网示例将整个人物分解为几个部分,每个部分一张图片。每个部分在每一帧的变化组成了整个人物在每一帧的变化。

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

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

Cocos2d-JS中使用CocosStudio资源——帧动画(1)

标签:动画   cocos2d   cocostudio   帧动画   cocos2djs   

原文地址:http://blog.csdn.net/qiumengchen12/article/details/45622375

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!