[cocos2dx开发技巧2]工具CocosBuilder的使用–集成

发表于2015-07-27
评论0 2.4k浏览

本文主要侧重于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,由其进行联系。具体代码如下:
 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, 去掉其选项)。这个就可以理解上面的代码了:
 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带来的方便,这个也值得。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

0个评论