本站文章均为 李华明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
下面我们来书写使用代码段吧，直接上代码了，比较简单：
先导入头文件：
| 12 | #include "cocos-ext.h"using namespace cocos2d::extension; |
| 123456789101112131415 | //----------------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);} |
| 1 |
以上代码注释的比较清楚了，是从ccbi文件中将我们创建的骨骼动画解析读取出来，然后返回一个CCNode对象
下面我们让其进行动画的播放：
| 12 | //播放一个动作:根据动作名称进行播放 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也顺便将动作的名字、周期时间、下标都打印出来供大家参考：
| 1234567891011 | //获取所有的动作序列CCArray* allSeq = ccbReader->getAnimationManager()->getSequences(); for (int i=0; i<allSeq->count(); i++) { //获取到每一个Seq CCBSequence* everySeq = (CCBSequence*)allSeq->objectAtIndex(i); //获取每个序列动作周期、名字以及id everySeq->getDuration(); everySeq->getName(); everySeq->getSequenceId();} |
OK，基本上比较easy，下面是运行效果图与源码和资源下载地址：
资源与项目下载地址： http://vdisk.weibo.com/s/kCT5z
