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

时间:2023-02-08 07:55:46

转发,请保持地址:http://blog.csdn.net/stalendp/article/details/8756467

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

CocosBuilder部分

1)创建工程

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

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

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

2)配置cocosBuilder属性

点击菜单File/Publish Setting..., 弹出如下对话框:
[cocos2dx开发技巧2]工具CocosBuilder的使用--集成
按上图进行配置,其中最为重要的是选择导出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..., 弹出如下的对话框:

[cocos2dx开发技巧2]工具CocosBuilder的使用--集成
这里可以创建4类Object,CCLayer, CCNode, CCParticleSystemQuad和CCSprite;这里还可以选择游戏运行的device的类型,保持默认,点击create后,给定名称(这里为MainScene.ccb),选择ccb/Resources为其根目录,就生成了一个ccb文件。操作界面如下图:
[cocos2dx开发技巧2]工具CocosBuilder的使用--集成
点击界面下方时间轴中的物体,其构成了树状结构(这个正是cocos2dx中对CCNode的构成结构);选择其中一项,比如CCLayer,其右方将显示其相关属性。比如Position, ContentSize,AnchorPoint等信息。当cocosBuilder生成ccbi的时候,将导出这些信息(文件为二进制形式,其中还包含动画信息和回调函数的信息;动画信息在操作界面的下方定义)。cocos2dx在载入这个ccbi文件的时候,将调用相关解析器(CCBReader)来解析这个文件,生成相应的cocos2dx对象,然后呈现出来,并播放相应的动画。

4)编辑ccb文件--按钮

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

创建按钮有两种方式(和cocos2dx中一样),这里只介绍使用Menu的方式。先创建Menu,点击工具栏中的Menu按钮(左边),如下图:
[cocos2dx开发技巧2]工具CocosBuilder的使用--集成
在当前的Menu中,然后点击Menu按钮的右边5下,就创建了5个MenuItem。类的层次结构,可以在时间轴边上看到。如下图:
[cocos2dx开发技巧2]工具CocosBuilder的使用--集成
创建的按钮如下图:
[cocos2dx开发技巧2]工具CocosBuilder的使用--集成
这时需要在右侧的设置属性,如下图:
[cocos2dx开发技巧2]工具CocosBuilder的使用--集成
设置事件响应函数的名称(如btnPlay,target为Document root);并设置CCMenuItem在三种不同情况下的呈现的图片。完成的按钮如下:
[cocos2dx开发技巧2]工具CocosBuilder的使用--集成

配置完5个按钮,调整位置和缩放等,如下:
[cocos2dx开发技巧2]工具CocosBuilder的使用--集成


4)编辑ccb文件--动画

这里将运用cocosBuilder来制作背景中的一个闪烁的星星,具体使用的是Rotate和Scale动画。
将一颗星星拖入到模拟器中,并移动到右上角,如下图:
[cocos2dx开发技巧2]工具CocosBuilder的使用--集成
选中这个物体,先缩放其为0.1f; 然后在事件轴中的0s和2s处,分别按快捷键v, r和s,创建Visible,Rotate和Scale的关键帧(对应菜单Animations/Insert Keyframe中的相关选项),在1s处,创建scale关键帧;如下图:
[cocos2dx开发技巧2]工具CocosBuilder的使用--集成
点击Scale在1s处的关键帧,做适当的放大和旋转操作。
点击播放按钮,或者手工拖动,可以参看效果。
[cocos2dx开发技巧2]工具CocosBuilder的使用--集成
[cocos2dx开发技巧2]工具CocosBuilder的使用--集成
[cocos2dx开发技巧2]工具CocosBuilder的使用--集成

目前动画只会播放一次,在cocosBuilder中设置循环播放,很简单,在时间轴的下方选择chain TimeLine为自身就可以了,如下图:
[cocos2dx开发技巧2]工具CocosBuilder的使用--集成
这个原理就是,当播放完当前的TimeLime之后,接着再播放此timeline,这样就循环起来的了。

关于timeLine,还可以设置其播放时间(默认为10s),点击时间轴上方的时间:
[cocos2dx开发技巧2]工具CocosBuilder的使用--集成
在弹出的对话框中设置就可以了:
[cocos2dx开发技巧2]工具CocosBuilder的使用--集成

还可以创建多个时间轴,
[cocos2dx开发技巧2]工具CocosBuilder的使用--集成
[cocos2dx开发技巧2]工具CocosBuilder的使用--集成
按照上面的循环动画的方式,也可以串起来做复杂的动画。这些动画也可以在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中的根对象命名,如下图:
[cocos2dx开发技巧2]工具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带来的方便,这个也值得。

下一篇文章介绍怎么使用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