【CocosBuilder 开发系列之一】cocos2dx使用CocosBuilder完成骨骼动画

 本站文章均为 李华明Himi 原创,转载务必在明显处注明：

转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/cocosbuilder/1061.html

　　　　　　　　　　☞ 点击订阅 ☜ 本博客最新动态!及时将最新博文通知您！

 

关于CocosBuilder 已经成为cocos2d、cocos2dx的官方编辑器，主要作用是场景编辑器、新版本中还已经支持了骨骼动画。【对于CocosBuilder Himi最新书籍中也有讲述】

对于骨骼动画，其实类似动作编辑器，将图的切片组成一帧，然后设置时间轴事件（序列动画），[动编里则是将每一帧按照一定的时间进行播放]，多的不说了，对于动作编辑器、切片等都不太熟悉的童鞋请自行搜索相关文章吧，下面进行本篇的内容。

     首先声明：最新的cocosbuilder 与 coco2d 、cocos2dx联合发布了新版，所以！对于使用最新的cocos2d-2.1beta3-x-2.1.0  的童鞋，请你下载最新的cocosbuilder 3.0 alpha版本！

cocosbuilder 下载地址： http://cocosbuilder.com/?page_id=11

（细心的童鞋应该知道，Himi博客最下方的“友情链接”里很多有用的地址的说）

下载好最新的3.0 cocosbuilder ，那么请打开它，然后我们进行创建一个骨骼动画吧：

     1.  首先创建一个项目，在cocosbuilder中的菜单一栏选择“File”-“New Project”，如下图：

 

 

      2. 继续创建一个我们的骨骼动画的子节点“，选择“FIle”-“New File”，如下图：

选中后进入如下页面：

这里，我们选择CCNode 节点，然后将“Full screen”的勾选去掉，我们不需要全屏。

点击“Create”后，会要求你选择存放目录，这里可能会出现如下提示：

如果出现这个提示是要求你设置配置一些路径，解决方案：

1）配置“File”-“Project Settings…”的路径

2）直接将创建的CCNode放在你创建cocosbuilder目录的Resources目录下即可，如下图：

 

以上步骤创建好后则如下图所示：

这里需要注意的是，当你创建一个Project时，这里默认会有cocosbuilder的例子相关文件：

ccbResources 文件夹、clikme-down.png、clime.png、MainScene.ccb、MainScene.js，

我们将这些都删掉，让童鞋们更容易理解。（删除操作去目录下删除吧）

另外，animated-grossini.plist 以及 animated-grossini.png 是打包好的骨骼碎片，如下图

对于碎图整理打包，Himi推荐使用TexturePackage （TP），博客最下方有其地址（收费）

3. 当一个plist 、png的资源放入cocosbuilder中，默认此plist文件可以点开，并且对其中的每个碎图进行拖拽，如下图所示：

下面我们就将plist下的每个图都拖拽到“骨骼动画视图”中吧，然后拼成一个小人，如下图：

 

4. OK，继续，我们调整时间轴将其调整到1秒的位置，然后我们选中小人的头部！然后在cocosbuilder的菜单项中选择“Animation”-“Insert KeyFrame”，如下图：

然后调整其切片属性的角度为90度，重复上述的步骤，将时间轴调回到0秒初始时，设置其头部角度为0度，完成后如下图：

童鞋们点击下播放试试效果吧，是不是很嗨皮～有意思吧。

当然你也可以在同一时间让当前帧或者其他切片一些操作例如缩放、平移、透明度、颜色等。

5.下面对整个动画进行整体的调整设置吧：

默认创建的动作都是10秒的周期，利用Set TimeLine Duration设置周期即可。

这里我们再简单设置下动作的名字吧：
选择“Edit TimeLines…”，出现如下界面：

 

TimeLine Name ：动作列表（默认名字为：Untitled Timeline  ，这里改成wave）

Duration：完成这个动作所需的时间

Autoplay：是否自动播放

 

需要提醒的是，如下图：

   上图中的红色标记是表示“选择当前动作播放完成后，继续播放的下一个动作” 用以完成连贯动作。

6. 最后一步是将编辑好的骨骼动作，编译称cbbi文件吧：

选择cocosbilder菜单栏“FIle”-“Publish”   ，如下图：

然后你将在你的项目文件夹中看到编译后的两个文件夹，“Published-iOS”、“Published-HTML5” 如下图所示：

Published-HTML5给HTML项目用的这里我们看 “Published-iOS”这个文件夹，这个文件夹中除了我们自己的plist与png资源文件外，还有一个编辑出来的切片动作信息文件ccbi文件，main.js也不用管，我们直接将如下三个文件拷贝到我们的cocos2dx项目中并且添加到项目中：

animated-grossini.plist、animated-grossini.png、TestAni.ccbi

下面我们来书写使用代码段吧，直接上代码了，比较简单：

先导入头文件：

#include "cocos-ext.h"
using namespace cocos2d::extension;

//----------------CocosBuilder 骨骼动画----------------
/* 创建一个自动释放的 Node 加载库 */
CCNodeLoaderLibrary * ccNodeLoaderLibrary = CCNodeLoaderLibrary::newDefaultCCNodeLoaderLibrary();

/* 创建一个 CCBReader，并设置自动释放 */
cocos2d::extension::CCBReader * ccbReader = new cocos2d::extension::CCBReader(ccNodeLoaderLibrary);
ccbReader->autorelease();

/*读取一个ccbi的文件,生成一个CCNode实例*/
CCNode *animationsTest = ccbReader->readNodeGraphFromFile("TestAni.ccbi", this);
//设置坐标
animationsTest->setPosition(ccp(CCDirector::sharedDirector()->getWinSize().width*0.5,260));
if(animationsTest != NULL) {
    this->addChild(animationsTest);
}

以上代码注释的比较清楚了，是从ccbi文件中将我们创建的骨骼动画解析读取出来，然后返回一个CCNode对象

下面我们让其进行动画的播放：

 

//播放一个动作:根据动作名称进行播放
    ccbReader->getAnimationManager()->runAnimationsForSequenceNamed("wave");

以上的ccbReader是我们通过ccbi读取获取到的一个实例对象，这里放置了我们编辑所有动画序列，所有动作，另外当我们ccbi中有N个动作的话，那么这N个动作的下标默认：0,1,2,3,4,5….n-1

因此我们还可以利用动作下标进行播放动作：

 

ccbReader->getAnimationManager()->runAnimationsForSequenceIdTweenDuration(0, 0.3f);

这里Himi也顺便将动作的名字、周期时间、下标都打印出来供大家参考：

 

//获取所有的动作序列
CCArray* allSeq = ccbReader->getAnimationManager()->getSequences();

for (int i=0; icount(); i++) {
    //获取到每一个Seq
    CCBSequence* everySeq = (CCBSequence*)allSeq->objectAtIndex(i);
    //获取每个序列动作周期、名字以及id
    everySeq->getDuration();
    everySeq->getName();
    everySeq->getSequenceId();
}

 

OK，基本上比较easy，下面是运行效果图与源码和资源下载地址：

资源与项目下载地址：   http://vdisk.weibo.com/s/kCT5z