原文地址:http://article.ityran.com/archives/2140

本为由泰然教程组成员 浅底 原创，作为一位经验丰富的游戏开发人员，这次浅底将CocosBuilder经验分享给大家，希望大家喜欢，欢迎拍砖！！转载请注明出处！！

在使用Cocos2d框架开发iOS游戏的时候，对于每一个场景(CCScene)的编辑是比较麻烦的，好在有外国的牛人提供了非常棒的场景编辑器—-CocosBuilder。

作为可视化编辑的补充，cocosBuilder成为cocos2D-iphone和cocos2D-x最流行的可视化编辑器。cocos2D-x从2.0版本开始支持cocosBuilder，同样cocosBuilder也是2.0版本与之对应 ， 可以通过cocosBuilder的官方网站下载cocosBuilder 。

 

一、 下载cocosBuilder 2.1和cocos2d-x 2.0.3版本。

二、 把自己想制作动画的资源放在一个文件夹中，命名为ccb，把cocosbuilder publish的文件，创建另一个文件夹，命名为ccbPublish。（文件夹命名随意）

如上图。

注：此处讲解将cocosBuilder和cocos2d-x分开来介绍，一般可以让美工人员掌握cocosBuilder，提供给编程人员ccbPublish文件夹，编程人员就可以直接读取动画文件即可，极大的缓解编程人员的工作（主要是程序员的审美木有人家的好）。

如果自己想又制作动画，又用代码来读取，下面会提到办法。

三、 打开cocosBuilder，创建工程。

File-New-New Project

选择ccb文件夹

将其命名为CCBTest，点击Save。不用管自动生成的hellococoBuilder。

四、设置工程

File-Project Setting

如果想在自己的Xcode中即时看到效果，此处的路劲可以选择为xcode工程中的resources文件夹。这就是上面提到的解决方法。

其他设置如图所示。

图中的几个选项，看英文就知道意思了。不过这里用不到。

五、创建文件File-New-New File，

选择iPhone4的横屏

然后

保存在ccb文件夹中。至此完成了初步的创建的工作。

六、创建动画

在此之前，

这样设置一下，可以减少阴影对自己视觉的影响。

熟悉一下

点击就添加一个相应的东西，之后在右侧会有相应的属性设置

类似xib，相信你们应该很熟悉

添加精灵之后，在相应的时间点上点击如下：

至少添加两个关键帧，并且是相同的。而且可以不同的动作（关键帧）同时运动。

七、保存动画，Publish动画。

常用功能键，保存是command+s，发布是command+option+S，也可以用菜单中的选项。

八、在Xcode中添加ccbPublish里面的文件，使用cocos2d-x代码读取ccbPublish中的ccbi文件。添加文件时需要注意路径一定要和cocosBuilder中的路径一致，（xcode中一般来说都是bundle路径）在工程中添加按一般的步骤来即可，若cocosBuilder文件夹中含有其他文件夹对应的是Xcode添加问价夹中，否则会导致程序找不到相应的资源，程序崩溃。

二、程序读取cocosBuilder创建的ccbi动画文件

在程序中使用时，可以通过CCLayerLoader类注册CCNodeLoaderLibrary，再通过CCNodeLoaderLibrary类定义CCBReader类的实例，再通过readNodeGraphFromFile函数获得父节点，并把父节点加入到场景中，即可以显示出相应的场景。

1、 创建一个cocos2d-x工程。删除自动创建的helloworld文件，创建MainScene文件。

2、 在MainScene文件中读取

.h文件

#ifndef _MAIN_SCENE_h#define _MAIN_SCENE_h#include "cocos2d.h"#include "cocos-ext.h"class CCBReader;USING_NS_CC;USING_NS_CC_EXT;class MainScene: public CCLayer, public cocos2d::extension::CCBSelectorResolver, public cocos2d::extension::CCBMemberVariableAssigner, public cocos2d::extension::CCNodeLoaderListener{public:CCB_STATIC_NEW_AUTORELEASE_OBJECT_WITH_INIT_METHOD(MainScene, create);static CCScene* scene();MainScene();virtual ~MainScene();void openTest(const char * pCCBFileName, const char * pCCNodeName = NULL, cocos2d::extension::CCNodeLoader * pCCNodeLoader = NULL);#pragma mark -#pragma mark Loader Functionvirtual cocos2d::SEL_MenuHandler onResolveCCBCCMenuItemSelector(cocos2d::CCObject * pTarget, cocos2d::CCString * pSelectorName);virtual cocos2d::extension::SEL_CCControlHandler onResolveCCBCCControlSelector(cocos2d::CCObject * pTarget, cocos2d::CCString * pSelectorName);virtual bool onAssignCCBMemberVariable(cocos2d::CCObject * pTarget, cocos2d::CCString * pMemberVariableName, cocos2d::CCNode * pNode);virtual void onNodeLoaded(cocos2d::CCNode * pNode, cocos2d::extension::CCNodeLoader * pNodeLoader);};#pragma mark -#pragma mark MainSceneLoaderclass MainSceneLoader:public cocos2d::extension::CCLayerLoader {public:CCB_STATIC_NEW_AUTORELEASE_OBJECT_METHOD(MainSceneLoader, loader);protected:CCB_VIRTUAL_NEW_AUTORELEASE_CREATECCNODE_METHOD(MainScene);};#endif.cpp文件#include "MainScene.h"#include "AppController.h"CCScene* MainScene::scene(){CCScene *scene=CCScene::create();cocos2d::extension::CCNodeLoaderLibrary *ccNodeLoaderLibrary=cocos2d::extension::CCNodeLoaderLibrary::newDefaultCCNodeLoaderLibrary();ccNodeLoaderLibrary->registerCCNodeLoader("MainScene",MainSceneLoader::loader());cocos2d::extension::CCBReader *ccBReader=new cocos2d::extension::CCBReader(ccNodeLoaderLibrary);//屏幕适配cocos2d::CCSize size= CCEGLView::sharedOpenGLView()->getVisibleSize();CCLog("cpp surface size height == %f",size.height);CCNode * node;if (size.height==480) {node = ccBReader->readNodeGraphFromFile("test.ccbi", scene);}else{//iPhone5，可以为不同的设备制作不同的ccbi文件。同时创建多个画布然后制作，还没有去研究。。。node = ccBReader->readNodeGraphFromFile("test.ccbi", scene);}if(node!=NULL){scene->addChild(node);}return scene;}MainScene::MainScene(){}MainScene::~MainScene(){}void MainScene::openTest(const char * pCCBFileName, const char * pCCNodeName, cocos2d::extension::CCNodeLoader * pCCNodeLoader){//}SEL_MenuHandler MainScene::onResolveCCBCCMenuItemSelector(CCObject * pTarget,CCString * pSelectorName){//Bind Menu Events，绑定一个menu，点击方法是press，以下同理CCB_SELECTORRESOLVER_CCMENUITEM_GLUE(this, "press",MainScene::press);return NULL;}SEL_CCControlHandler MainScene::onResolveCCBCCControlSelector(CCObject * pTarget, CCString * pSelectorName){//Bind CCControl Eventsreturn NULL;}bool MainScene::onAssignCCBMemberVariable(CCObject * pTarget, CCString * pMemberVariableName, CCNode * pNode){//Bind variablesCCB_MEMBERVARIABLEASSIGNER_GLUE(this, "ATM", CCSprite *, this->ATM);return false;}void MainScene::onNodeLoaded(CCNode * pNode, cocos2d::extension::CCNodeLoader * pNodeLoader){//检测sceneCCLOG("MainScene loading.....successed!") ;}

3、 在appDelegate.cpp中将helloworld修改掉，

CCScene *pScene = MainScene::scene();

完成以上过程既可以读取自己创建的动画了。

这些是比较基础一些的，cocosBuidler也可以像xib一样绑定事件，对象等。上面的代码中我也有注释，若不然读取ccbi文件只需要CCScene* MainScene::scene()这个函数即可。

还也可以添加粒子效果，可以制作骨骼动画，可以为游戏制作菜单等等一系列的功能。

Cocos2d-x下载的工程中自带有一个TestCpp的工程，是我们学习cocos2d-x的非常好的源代码。其中，在

这里面有制作的非常好的例子，把个不同的test，Animation，button，label，menu，particleSystem，Scrollview，sprite，testHeader等等，大家可以仔细研究研究。