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

关于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

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

先导入头文件：

1. #include "cocos-ext.h" 
2. using namespace cocos2d::extension; 
3.  
4. //----------------CocosBuilder 骨骼动画---------------- 
5. /* 创建一个自动释放的 Node 加载库 */ 
6. CCNodeLoaderLibrary * ccNodeLoaderLibrary = CCNodeLoaderLibrary::newDefaultCCNodeLoaderLibrary(); 
7.   
8. /* 创建一个 CCBReader，并设置自动释放 */ 
9. cocos2d::extension::CCBReader * ccbReader = new cocos2d::extension::CCBReader(ccNodeLoaderLibrary); 
10. ccbReader->autorelease(); 
11.   
12. /*读取一个ccbi的文件,生成一个CCNode实例*/ 
13. CCNode *animationsTest = ccbReader->readNodeGraphFromFile("TestAni.ccbi", this); 
14. //设置坐标 
15. animationsTest->setPosition(ccp(CCDirector::sharedDirector()->getWinSize().width*0.5,260)); 
16. if(animationsTest != NULL) { 
17.     this->addChild(animationsTest); 
18. } 

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

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

 

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

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

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

 

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

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

 

1. //获取所有的动作序列 
2. CCArray* allSeq = ccbReader->getAnimationManager()->getSequences(); 
3.   
4. for (int i=0; i<allSeq->count(); i++) { 
5.     //获取到每一个Seq 
6.     CCBSequence* everySeq = (CCBSequence*)allSeq->objectAtIndex(i); 
7.     //获取每个序列动作周期、名字以及id 
8.     everySeq->getDuration(); 
9.     everySeq->getName(); 
10.     everySeq->getSequenceId(); 
11. } 

 

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

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

 

 

本文转自 xiaominghimi 51CTO博客，原文链接：http://blog.51cto.com/xiaominghimi/1089391，如需转载请自行联系原作者