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 plaincopy

CCNodeLoaderLibrary * ccNodeLoaderLibrary = CCNodeLoaderLibrary::newDefaultCCNodeLoaderLibrary();
ccNodeLoaderLibrary->registerCCNodeLoader("Intro", IntroLoader::loader());
/* Create an autorelease CCBReader. */
cocos2d::extension::CCBReader * ccbReader = new cocos2d::extension::CCBReader(ccNodeLoaderLibrary);
/* Read a ccbi file. */
CCNode * node = ccbReader->readNodeGraphFromFile("MainScene.ccbi");
ccbReader->release();
CCScene* scene = CCScene::create();
scene->addChild(node);

要理解上面的代码，还需补充一点上面没有提示的信息。默认情况下，ccbi对应了cocos2dx的4个类型之一，如果要对应我们自定义的类型（从4个类型中派生出来的），我们要在cocosBuilder中的根对象命名，如下图：

选择CCLayer，在右侧的Custom class中填写Intro。（如果是Custom class显示为 JS Controller，点击菜单Document/JavaScipt Controlled, 去掉其选项）。这个就可以理解上面的代码了：

[cpp] view plaincopy

CCNodeLoaderLibrary * ccNodeLoaderLibrary = CCNodeLoaderLibrary::newDefaultCCNodeLoaderLibrary();
ccNodeLoaderLibrary->registerCCNodeLoader("Intro", IntroLoader::loader());

IntroLoader对象负责加载相关的类Intro。完整代码如下：

[cpp] view plaincopy

#ifndef ShootTheApple_Intro_h
#define ShootTheApple_Intro_h
#include "PhysicsSprite.h"
#include "CcbBase.h"
#include "Playground.h"
USING_NS_CC;
USING_NS_CC_EXT;
class Intro: public CcbBase {
public:
CCB_STATIC_NEW_AUTORELEASE_OBJECT_WITH_INIT_METHOD(Intro, create);
Intro(){ }
virtual ~Intro() { }
void btnPlay(cocos2d::CCObject *pSender) { //这个是回调函数，
CCDirector::sharedDirector()->replaceScene(PlaygroundLoader::loadCcbi());
}
virtual cocos2d::SEL_MenuHandler onResolveCCBCCMenuItemSelector(cocos2d::CCObject * pTarget, const char * pSelectorName) {
CCB_SELECTORRESOLVER_CCMENUITEM_GLUE(this, "btnPlay", Intro::btnPlay); // 把btnPlay对应回调函数，btnPlay的设置在“编辑ccb文件－－按钮”中介绍了
}
};
/* Forward declaration. */
class CCBReader;
class IntroLoader : public cocos2d::extension::CCLayerLoader {
public:
static CCScene* loadCcbi() {
CCNodeLoaderLibrary * ccNodeLoaderLibrary = CCNodeLoaderLibrary::newDefaultCCNodeLoaderLibrary();
ccNodeLoaderLibrary->registerCCNodeLoader("Intro", IntroLoader::loader());
/* Create an autorelease CCBReader. */
cocos2d::extension::CCBReader * ccbReader = new cocos2d::extension::CCBReader(ccNodeLoaderLibrary);
/* Read a ccbi file. */
CCNode * node = ccbReader->readNodeGraphFromFile("MainScene.ccbi");
ccbReader->release();
CCScene* scene = CCScene::create();
scene->addChild(node);
return scene;
}
public:
CCB_STATIC_NEW_AUTORELEASE_OBJECT_METHOD(IntroLoader, loader);
protected:
CCB_VIRTUAL_NEW_AUTORELEASE_CREATECCNODE_METHOD(Intro);
};
#endif

[cpp] view plaincopy

#ifndef ShootTheApple_CcbBase_h
#define ShootTheApple_CcbBase_h
#include "cocos2d.h"
#include "cocos-ext.h"
#include "Box2D.h"
USING_NS_CC;
USING_NS_CC_EXT;
class CcbBase: public cocos2d::CCLayer
, public cocos2d::extension::CCBSelectorResolver
, public cocos2d::extension::CCBMemberVariableAssigner
, public cocos2d::extension::CCNodeLoaderListener
{
public:
virtual cocos2d::SEL_MenuHandler onResolveCCBCCMenuItemSelector(cocos2d::CCObject * pTarget, const char * pSelectorName) {
// do nothing
//CCB_SELECTORRESOLVER_CCMENUITEM_GLUE(this, "onPlay", Playground::btnPlay);
return NULL;
}
virtual cocos2d::extension::SEL_CCControlHandler onResolveCCBCCControlSelector(cocos2d::CCObject * pTarget, const char * pSelectorName) {
// do nothing
return NULL;
}
virtual bool onAssignCCBMemberVariable(cocos2d::CCObject * pTarget, const char * pMemberVariableName, cocos2d::CCNode * pNode) {
// do nothing
//CCB_MEMBERVARIABLEASSIGNER_GLUE(this, "apple", CCSprite *, this->apple);
return NULL;
}
virtual bool onAssignCCBCustomProperty(CCObject* pTarget, const char* pMemberVariableName, cocos2d::extension::CCBValue* pCCBValue) {
// do nothing
return false;
}
virtual void onNodeLoaded(cocos2d::CCNode * pNode, cocos2d::extension::CCNodeLoader * pNodeLoader) {
// do nothing
}
};
#endif

CCReader进行ccbi和自定义类的联系的过程如下，CCBReader一边解析ccbi文件，一边调用自定义类的onResolveCCBCCMenuItemSelector等方法；在这些回调方法中，可以进行相关的绑定工作，如对象绑定，CCMenuItem selector的绑定等。更多的绑定细则，请参考cocosBuilder中的帮助。

如果用Object－C就方便多了，由于其动态性，可以根据名称自动反射，而C++则需要手工绑定，繁琐些，不过为了cocosBuilder带来的方便，这个也值得。

下一篇文章介绍怎么使用CocosBuilder加快Box2d的开发

版本说明

在这个demo中，cocosBuilder的版本为Version 3 alpha3，配套的cocos2dx版本为cocos2d-2.1rc0-x-2.1.2；

cocosBuilder的官方：http://cocosbuilder.com/

cocosBuilder官方教程：https://github.com/vlidholt/CocosDragon/blob/master/Tutorial/Tutorial.md

cocos2dx的相关页面：http://www.cocos2d-x.org/news/95

源代码下载： http://vdisk.weibo.com/s/BSjUaUQYZZ_MR

源码下载2：链接：http://pan.baidu.com/s/1qYJ4Nnu 密码：g66s