CocosBuilder 使用技巧

本文主要侧重于CocosBuilder在cocos2dx中的集成。对CocosBuilder使用的介绍比较简单。详细的使用请参考官方教程；

CocosBuilder部分

1）创建工程

首先创建Cocos2dx工程“ShootTheApple”，然后在其Resources目录下新建ccb，并在ccb中创建CocosBuilder工程。目录结构如下图：

CocosBuilder工程会产生3类文件，后缀分别为ccbproj, ccb, ccbi（其中前两个文件使工程文件－－ccb.ccbproj, apple.ccb。      ccbi文件，是导出的文件，被cocos2dx程序使用，如上图的apple.ccbi）；

2）配置cocosBuilder属性

点击菜单File/Publish Setting..., 弹出如下对话框：

按上图进行配置，其中最为重要的是选择导出ccbi的目录，这里将设置为cocos2dx的Resources目录，就是cocosBuilder的上级目录。然后勾选最后的“Flatten paths when publishing”和“Only publish ccb-files”选项。

观察ccb/Resources目录，其中有个ccbResources文件，这里面放ccb使用的图片等资源。在ccb发布成ccbi后，我们还需要把此ccbResources拷贝到cocos2dx的resources目录下，这样ccbi才可以正确的读取。

3）创建ccb文件。

菜单File/New/New File..., 弹出如下的对话框：

这里可以创建4类Object，CCLayer, CCNode, CCParticleSystemQuad和CCSprite；这里还可以选择游戏运行的device的类型，保持默认，点击create后，给定名称（这里为MainScene.ccb），选择ccb/Resources为其根目录，就生成了一个ccb文件。操作界面如下图：

点击界面下方时间轴中的物体，其构成了树状结构（这个正是cocos2dx中对CCNode的构成结构）；选择其中一项，比如CCLayer，其右方将显示其相关属性。比如Position， ContentSize，AnchorPoint等信息。当cocosBuilder生成ccbi的时候，将导出这些信息（文件为二进制形式，其中还包含动画信息和回调函数的信息；动画信息在操作界面的下方定义）。cocos2dx在载入这个ccbi文件的时候，将调用相关解析器（CCBReader）来解析这个文件，生成相应的cocos2dx对象，然后呈现出来，并播放相应的动画。

4）编辑ccb文件－－按钮

在cocosBuilder的编辑，都是“可见即可得”的。cocosBuilder兼容SpriteSheet（可以使用TexturePacker进行编辑），编辑的时候，直接把图片拖动到模拟器就可以了。

创建按钮有两种方式（和cocos2dx中一样），这里只介绍使用Menu的方式。先创建Menu，点击工具栏中的Menu按钮（左边），如下图：

在当前的Menu中，然后点击Menu按钮的右边5下，就创建了5个MenuItem。类的层次结构，可以在时间轴边上看到。如下图：

创建的按钮如下图：

这时需要在右侧的设置属性，如下图：

设置事件响应函数的名称（如btnPlay，target为Document root）；并设置CCMenuItem在三种不同情况下的呈现的图片。完成的按钮如下：

配置完5个按钮，调整位置和缩放等，如下：

4）编辑ccb文件－－动画

这里将运用cocosBuilder来制作背景中的一个闪烁的星星，具体使用的是Rotate和Scale动画。

将一颗星星拖入到模拟器中，并移动到右上角，如下图：

选中这个物体，先缩放其为0.1f； 然后在事件轴中的0s和2s处，分别按快捷键v, r和s，创建Visible,Rotate和Scale的关键帧（对应菜单Animations/Insert Keyframe中的相关选项），在1s处，创建scale关键帧；如下图：

点击Scale在1s处的关键帧，做适当的放大和旋转操作。

点击播放按钮，或者手工拖动，可以参看效果。

目前动画只会播放一次，在cocosBuilder中设置循环播放，很简单，在时间轴的下方选择chain TimeLine为自身就可以了，如下图：

这个原理就是，当播放完当前的TimeLime之后，接着再播放此timeline，这样就循环起来的了。

关于timeLine，还可以设置其播放时间（默认为10s），点击时间轴上方的时间：

在弹出的对话框中设置就可以了：

还可以创建多个时间轴，

按照上面的循环动画的方式，也可以串起来做复杂的动画。这些动画也可以在cocos2dx代码中被调用。十分的灵活方便。

代码的集成

当cocosBuilder完成对ccb的编辑之后，点击菜单File/Publish, 导出ccb成为ccbi文件到cocos2dx的Resources文件目录下了（请参考上面的“配置cocosBuilder属性”）。

然后在xcode中把ccbResources目录和相应的ccbi文件加入到工程中，这样就可以进行代码编辑了。

代码的集成，其实就是解析ccbi文件的过程，cocos2dx中针对cocosBuilder有相应的解析器CCBReader（位于extensions/CCBreader目录下，CCBReader和CocosBuilder的版本有关系，请参考文末的“版本说明”）；

由于C++没有像Object－C的动态特性，所以集成CCBReader的代码并没有像cocos2d中那么简单。不过理解其原理，理清思路后，其实也不是件困难的事情。

所以，先讲CCBReader的原理。ccbi文件其实对应了4类cocos2dx对象，一个ccbi文件中，包含了此对象的一些属性信息。CCBReader读取了这个ccbi文件，就清楚了这个对象的一切。这个时候，要把这些信息和我们的代码联系起来，就需要用CCNodeLoaderLibrary来联系自定义的类，接着把这个信息抛给CCBReader，由其进行联系。具体代码如下：

[cpp]  view plain   copy

 

1. CCNodeLoaderLibrary * ccNodeLoaderLibrary = CCNodeLoaderLibrary::newDefaultCCNodeLoaderLibrary();  
2. ccNodeLoaderLibrary->registerCCNodeLoader("Intro", IntroLoader::loader());  
3.   
4. /* Create an autorelease CCBReader. */  
5. cocos2d::extension::CCBReader * ccbReader = new cocos2d::extension::CCBReader(ccNodeLoaderLibrary);  
6.   
7. /* Read a ccbi file. */  
8. CCNode * node = ccbReader->readNodeGraphFromFile("MainScene.ccbi");