[cocos2dx开发技巧2]工具CocosBuilder的使用--集成
转发,请保持地址:http://blog.csdn.net/stalendp/article/details/8756467
本文主要侧重于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..., 弹出如下对话框:
![](http://img-my.csdn.net/uploads/201304/03/1364978295_1299.png)
按上图进行配置,其中最为重要的是选择导出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..., 弹出如下的对话框:
![](http://img-my.csdn.net/uploads/201304/03/1364979054_2795.png)
这里可以创建4类Object,CCLayer, CCNode, CCParticleSystemQuad和CCSprite;这里还可以选择游戏运行的device的类型,保持默认,点击create后,给定名称(这里为MainScene.ccb),选择ccb/Resources为其根目录,就生成了一个ccb文件。操作界面如下图:
![](http://img-my.csdn.net/uploads/201304/03/1364979436_2461.png)
点击界面下方时间轴中的物体,其构成了树状结构(这个正是cocos2dx中对CCNode的构成结构);选择其中一项,比如CCLayer,其右方将显示其相关属性。比如Position, ContentSize,AnchorPoint等信息。当cocosBuilder生成ccbi的时候,将导出这些信息(文件为二进制形式,其中还包含动画信息和回调函数的信息;动画信息在操作界面的下方定义)。cocos2dx在载入这个ccbi文件的时候,将调用相关解析器(CCBReader)来解析这个文件,生成相应的cocos2dx对象,然后呈现出来,并播放相应的动画。
4)编辑ccb文件--按钮
在cocosBuilder的编辑,都是“可见即可得”的。cocosBuilder兼容SpriteSheet(可以使用TexturePacker进行编辑),编辑的时候,直接把图片拖动到模拟器就可以了。
创建按钮有两种方式(和cocos2dx中一样),这里只介绍使用Menu的方式。先创建Menu,点击工具栏中的Menu按钮(左边),如下图:
![](http://img-my.csdn.net/uploads/201304/03/1364980613_4796.png)
在当前的Menu中,然后点击Menu按钮的右边5下,就创建了5个MenuItem。类的层次结构,可以在时间轴边上看到。如下图:
![](http://img-my.csdn.net/uploads/201304/03/1364980787_3640.png)
创建的按钮如下图:
![](http://img-my.csdn.net/uploads/201304/03/1364980858_9395.png)
这时需要在右侧的设置属性,如下图:
![](http://img-my.csdn.net/uploads/201304/03/1364980934_8393.png)
设置事件响应函数的名称(如btnPlay,target为Document root);并设置CCMenuItem在三种不同情况下的呈现的图片。完成的按钮如下:
![](http://img-my.csdn.net/uploads/201304/03/1364981075_5623.png)
配置完5个按钮,调整位置和缩放等,如下:
![](http://img-my.csdn.net/uploads/201304/03/1364981115_2665.png)
4)编辑ccb文件--动画
这里将运用cocosBuilder来制作背景中的一个闪烁的星星,具体使用的是Rotate和Scale动画。
将一颗星星拖入到模拟器中,并移动到右上角,如下图:
![](http://img-my.csdn.net/uploads/201304/03/1364981742_6212.png)
选中这个物体,先缩放其为0.1f; 然后在事件轴中的0s和2s处,分别按快捷键v, r和s,创建Visible,Rotate和Scale的关键帧(对应菜单Animations/Insert Keyframe中的相关选项),在1s处,创建scale关键帧;如下图:
![](http://img-my.csdn.net/uploads/201304/03/1364982045_4704.png)
点击Scale在1s处的关键帧,做适当的放大和旋转操作。
点击播放按钮,或者手工拖动,可以参看效果。
![](http://img-my.csdn.net/uploads/201304/03/1364982328_2879.png)
![](http://img-my.csdn.net/uploads/201304/03/1364982328_2879.png)
![](http://img-my.csdn.net/uploads/201304/03/1364982335_7105.png)
目前动画只会播放一次,在cocosBuilder中设置循环播放,很简单,在时间轴的下方选择chain TimeLine为自身就可以了,如下图:
![](http://img-my.csdn.net/uploads/201304/03/1364982527_5500.png)
这个原理就是,当播放完当前的TimeLime之后,接着再播放此timeline,这样就循环起来的了。
关于timeLine,还可以设置其播放时间(默认为10s),点击时间轴上方的时间:
![](http://img-my.csdn.net/uploads/201304/03/1364982660_5655.png)
在弹出的对话框中设置就可以了:
![](http://img-my.csdn.net/uploads/201304/03/1364982699_4315.png)
还可以创建多个时间轴,
![](http://img-my.csdn.net/uploads/201304/03/1364982768_2542.png)
![](http://img-my.csdn.net/uploads/201304/03/1364982799_3644.png)
按照上面的循环动画的方式,也可以串起来做复杂的动画。这些动画也可以在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,由其进行联系。具体代码如下:
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中的根对象命名,如下图:
![](http://img-my.csdn.net/uploads/201304/03/1364984313_1611.png)
选择CCLayer,在右侧的Custom class中填写Intro。(如果是Custom class显示为 JS Controller,点击菜单Document/JavaScipt Controlled, 去掉其选项)。这个就可以理解上面的代码了:
CCNodeLoaderLibrary * ccNodeLoaderLibrary = CCNodeLoaderLibrary::newDefaultCCNodeLoaderLibrary(); ccNodeLoaderLibrary->registerCCNodeLoader("Intro", IntroLoader::loader());IntroLoader对象负责加载相关的类Intro。完整代码如下:
#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
#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