Cocos2d-x CocosBuilder使用教程(二)连接自定义类

看来2013年2月最多只能写三篇技术博客了!今天学习使用了一下CocosBuilder的连接到自定义类的功能,确实很爽,让IOS的程序员们不必再硬编码了。通过看Cocosbuilder本身的document,以及搜索网上资料,加上自己查看CCB源码,完成连接自定义类的功能。首先需要注意一点,CocosBuilder的Document是针对Cocos2d-iPhone的而不是Cocos2d-x的,所以很多Document里面讲到的并不适用于Cocos2d-x。因为cocos2d-x是基于C++的,所以无法通过类名字符串来动态创建类(OC当然可以了),这也是为什么Cocos2d-x版本的CCB SDK在架构上添加CCNodeLoadLibrary的原因。

下面我将一步一步操作,并讲解其中原理,让你不但学会怎么做,而且还知其原理。

  1. 使用CocosBuilder 2.1版本新建一个Project,叫做“ConnectToCustomClass”(引号当然不算名称了,:p)。

  2. 新建一个文件,派生自CCLayer,并选择你想要的设备类型,我选择ipad landscape 1024 * 768,保存为“ConnectToCustomClass”(与项目工程一致)。

  3. 添加一个CCMenu节点到根节点(即CCLayer节点)。

  4. 添加一个CCMenuImage节点到CCMenu节点。
    选中此节点,到CocosBuilder右侧的CCMenuItemImage段中,点击Normal和Selected字段,选择对应图片(Disable不用的话可以不选择)。读者可以下载下列资源:
    Normal:
    Selected:

  5. 添加一个CCControlButton到根节点(即CCLayer节点)。
    选择此节点,到CocosBuilder右侧的CCControlButton段更改“Font Size”字段为15。这里使用CCControlButton也是为了让读者知道CocosBuilder中能处理按键消息的节点除了CCMenuItemImage以外,还有CControlButton。

  6. 添加一个CCLabelTTF到根节点(即CCLayer节点)。
    选择此节点,到CocosBuilder右侧的CCLabelTTF段更改“Font Size”字段为15。这里使用CCLabelTTF主要是教授如何在自定义的Layer类中声明一个CCLabelTTF*变量指向CocosBuilder界面中的CCLabelTTF节点。

  7. 界面布局如图。
    Cocos2d-x CocosBuilder使用教程(二)连接自定义类_第1张图片

  8. 界面的“皮”做完了,但界面的神经还没有接好。现在我们开始连接好界面的各个神经。

  9. 点击根节点(即CCLayer节点),在CocosBuilder右侧我们可以看到Code Connections段。我们将"XJLayer"填入其中的“Custom class”字段中。
    XJ是本人名称缩写,你可以写成自己的名称缩写(但后续操作中XJ要替换成你的名称前缀了)。此操作的含义:让CocosBuilder在保存此节点时,将其节点标签保存为“XJLayer”,这样在文件解析的时候,当我们碰到节点标签是"XJLayer"时,我们就知道这是我们自定义的XJLayer节点,我们需要对这个节点做特殊处理。

  10. 点击”切换账号“节点(CCMenuItemImage节点),在CocosBuilder右侧CCMenuItem段中,将”menuSelectorChangeAccount"填入“Selector“字段。在”Target“字段中选择”Document root“。如下图:

    看到这个,如果你编写过Cocos2d-x的CCMenuItem相关的代码,你应该很熟悉,这里的”Target“字段就是指的希望处理该消息事件的对象,这里是Document root,就是指的根节点,即我们的CCLayer节点(此节点Custom Class字段已经被我们改成”XJLayer“)。”Selector“字段就是处理消息事件的函数名称。

  11. 点击”Title“节点(CCControlButton节点),在CocosBuilder右侧CCControl段中,我们将”controlButtonTest“填入”Selector“字段,在”Target“字段中选择”Document root“。
    两个字段含义想必你能猜到。这里值得注意的是下面的9个复选框,这里默认选中”Up inside“。这些复选框表示你感兴趣的消息。当前你只对按键在button中抬起事件感兴趣。即:当用户点击此按钮抬起时,你的”controlButtonTest“函数会被调用(controlButtonTes函数在哪呢,后面会提到)。

  12. 点击”Sample Test“节点,在CocosBuilder右侧"Code Connections"字段,更改”Don't assign“字段为”Doc root var“字段,并将"m_TestLabel"填入该字段。
    这里是说,这个对象会被赋值给”文档根变量“,也就是根节点对象。赋给该对象的”m_TestLabel“成员变量。这里就是教授如何把CocosBuilder文件里的对象赋值给自定义类的某个成员变量,建立起Cocos2d-x和CocosBuilder的联系。

  13. 保存文件(【Command】+【s】,一定要保存文件哦,没有点击保存文件,更改不会被记录),然后发布(【Command】+【Option】+【S】)。

  14. 创建一个Cocos2d-x模版工程,起名叫做”ConnectToCustomLayer“。

  15. 从CocosBuilder创建的Project路径里面,将ccbResources文件夹(CCControlButton默认背景图片是在ccbResources文件夹下的),以及两张我提供的图片资源和一个”ConnectToCustomClass.ccbi“文件(不是ccb文件哦)拷贝到Cocos2d-x项目工程resources文件夹下,并全部添加到xCode项目的Resources下(注意,一定要添加到项目工程,这样加载ccbi文件时,CCB SDK才能找到ccbi文件。在添加的时候填出的提示框中,一定要选中对应目标项目即Target)。
    Cocos2d-x CocosBuilder使用教程(二)连接自定义类_第2张图片

  16. 在项目文件视图中,点击Classes,创建一个C++类【Command】+【N】。其名称叫做”XJLayer"。代码人如下:
    [cpp]  view plain copy
    1. //  
    2. //  XJLayer.h  
    3. //  ConnectToCustomClass  
    4. //  
    5. //  Created by jason on 13-2-28.  
    6. //  
    7. //  
    8.   
    9. #ifndef __ConnectToCustomClass__XJLayer__  
    10. #define __ConnectToCustomClass__XJLayer__  
    11.   
    12.   
    13. #include "cocos2d.h"  
    14. #include "cocos-ext.h"  
    15. USING_NS_CC;  
    16. USING_NS_CC_EXT;  
    17.   
    18. class XJLayer : public CCLayer, public CCBSelectorResolver, public CCBMemberVariableAssigner  
    19. {  
    20.     //static  
    21. public:  
    22.     CREATE_FUNC( XJLayer );  
    23.       
    24. public:  
    25.         ~XJLayer()  
    26.     {  
    27.         CC_SAFE_RELEASE_NULL( m_TestLabel );  
    28.     }  
    29.     void menuSelectorChangeAccount( CCObject* node );  
    30.     void controlButtonTest(CCObject* pObject, CCControlEvent event);  
    31.       
    32.     //CCBSelectorResolver  
    33.     virtual SEL_MenuHandler onResolveCCBCCMenuItemSelector(CCObject * pTarget, CCString * pSelectorName);  
    34.     virtual extension::SEL_CCControlHandler onResolveCCBCCControlSelector(CCObject * pTarget, CCString * pSelectorName);  
    35.       
    36.     //CCBMemberVariableAssigner  
    37.     virtual bool onAssignCCBMemberVariable(CCObject * pTarget, CCString * pMemberVariableName, CCNode * pNode);  
    38.       
    39. private:  
    40.     CCLabelTTF* m_TestLabel;  
    41. };  
    42.   
    43. class XJLayerLoader : public CCLayerLoader{  
    44. public:  
    45.     //CCB_STATIC_NEW_AUTORELEASE_OBJECT_METHOD( XJLayerLoader, loader );  
    46.     //              ||(equal)  
    47.     //  static XJLayerLoader* loader()  
    48.     //  {  
    49.     //      XJLayerLoader * ptr = new XJLayerLoader();  
    50.     //      if(ptr != NULL) {   
    51.     //          ptr->autorelease();  
    52.     //          return ptr;   
    53.     //      }  
    54.     //      CC_SAFE_DELETE(ptr);   
    55.     //      return NULL;  
    56.     //  }  
    57.     CCB_STATIC_NEW_AUTORELEASE_OBJECT_METHOD( XJLayerLoader, loader );  
    58.       
    59.     //CCB_VIRTUAL_NEW_AUTORELEASE_CREATECCNODE_METHOD( XJLayer );  
    60.     //              ||(equal)  
    61.     //  virtual XJLayer * createCCNode(cocos2d::CCNode * pParent, cocos2d::extension::CCBReader * pCCBReader)  
    62.     //  {  
    63.     //      return XJLayer::create();  
    64.     //  }  
    65.   
    66.     CCB_VIRTUAL_NEW_AUTORELEASE_CREATECCNODE_METHOD( XJLayer );  
    67. };  
    68.   
    69.   
    70. #endif /* defined(__ConnectToCustomClass__XJLayer__) */  

    代码是重点。
    1.这里XJLayer除了继承自CCLayer,也继承自两个你很陌生的类(CCBSelectorResolver,CCBMemberVariableAssigner)。通过字面意思,我们大体能知道,两个类分别是:selector解析器,和成员变量赋值器。这是两个抽象类,在java也称为接口。即继承自这两个类的类,必须重写其纯虚函数。
    CCBSelectorResolver有两个:
    [cpp]  view plain copy
    1. virtual SEL_MenuHandler onResolveCCBCCMenuItemSelector(CCObject * pTarget, CCString * pSelectorName);  
    2. virtual extension::SEL_CCControlHandler onResolveCCBCCControlSelector(CCObject * pTarget, CCString * pSelectorName);  
    CCBMemberVariableAssigner有一个:
    [cpp]  view plain copy
    1. virtual bool onAssignCCBMemberVariable(CCObject * pTarget, CCString * pMemberVariableName, CCNode * pNode);  

    CCBSelectorResolver中分别解析MenuItem的消息处理函数和CControlButton的消息处理函数。
    CCBMemberVariableAssigner就是连接ccbi文件创建的对象与cocos2d-x对象的。

    另外:一定要施放与CocosBuilder绑定的对象。CC_SAFE_RELEASE_NULL( m_TestLabel );

    2.我们创建了一个XJLayerLoader,其继承自CCLayerLoader(CCLayerLoader是CCBReader中的一个类,此类负责CCLayer节点的加载)。通过派生,我们让这个加载器创建我们自己的类对象,也就是通过这个宏定义完成的——CCB_VIRTUAL_NEW_AUTORELEASE_CREATECCNODE_METHOD( XJLayer );ccbi文件解析时,创建节点就是通过createCCNode完成的。我们会声明一个XJLayerLoader对象,传给ccbi阅读器,阅读器在特定时候调用该加载器的createCCNode()来创建我们自己的Layer。


    [cpp]  view plain copy
    1. //  
    2. //  XJLayer.cpp  
    3. //  ConnectToCustomClass  
    4. //  
    5. //  Created by jason on 13-2-28.  
    6. //  
    7. //  
    8.   
    9. #include "XJLayer.h"  
    10.   
    11. void XJLayer::menuSelectorChangeAccount( CCObject* pObject )  
    12. {  
    13.     CCLog( "CGStartGameLayer::menuSelectorChangeAccount" );  
    14. }  
    15. void XJLayer::controlButtonTest(CCObject* pObject, CCControlEvent event)  
    16. {  
    17.     CCLog( "CGStartGameLayer::controlButtonEventhandle" );  
    18. }  
    19.   
    20. SEL_MenuHandler XJLayer::onResolveCCBCCMenuItemSelector(CCObject * pTarget, CCString * pSelectorName)  
    21. {  
    22.     CCB_SELECTORRESOLVER_CCMENUITEM_GLUE( this"menuSelectorChangeAccount", XJLayer::menuSelectorChangeAccount);  
    23.       
    24.     return NULL;  
    25. }  
    26.   
    27. extension::SEL_CCControlHandler XJLayer::onResolveCCBCCControlSelector(CCObject * pTarget, CCString * pSelectorName)  
    28. {  
    29.     CCB_SELECTORRESOLVER_CCCONTROL_GLUE( this"controlButtonMoreServers", XJLayer::controlButtonTest );  
    30.     return NULL;  
    31. }  
    32.   
    33. bool XJLayer::onAssignCCBMemberVariable(CCObject * pTarget, CCString * pMemberVariableName, CCNode * pNode)  
    34. {  
    35.     CCB_MEMBERVARIABLEASSIGNER_GLUE( this"m_TestLabel", CCLabelTTF*, m_TestLabel );  
    36.     return false;  
    37. }  
    这里是两个消息处理函数,输出一些调试信息,以让我们知道按钮被点击了。另外三个函数,就是上面提到的三个虚函数,分别解决MenuItem消息处理函数归属(即那个函数作为消息处理函数),CControlButton消息处理函数归属,以及变量复制的。也分别对应三个宏,读者可以自己去看宏定义函数。

  17. 打开AppDelegate.cpp文件,做如下修改:
    [cpp]  view plain copy
    1. #include "cocos-ext.h"  
    2. #include "XJLayer.h"  
    3. USING_NS_CC_EXT;  

    cocs-ext.h包含了读取ccbi所需类的所有头文件。

    修改AppDelegate::applicationDidFinishLaunching()
    [cpp]  view plain copy
    1. bool AppDelegate::applicationDidFinishLaunching()  
    2. {  
    3.     // initialize director  
    4.     CCDirector *pDirector = CCDirector::sharedDirector();  
    5.     pDirector->setOpenGLView(CCEGLView::sharedOpenGLView());  
    6.   
    7.     // turn on display FPS  
    8.     pDirector->setDisplayStats(true);  
    9.   
    10.     // set FPS. the default value is 1.0/60 if you don't call this  
    11.     pDirector->setAnimationInterval(1.0 / 60);  
    12.   
    13.     // create a scene. it's an autorelease object  
    14. //    CCScene *pScene = HelloWorld::scene();  
    15.       
    16.     CCNodeLoaderLibrary::sharedCCNodeLoaderLibrary()->registerCCNodeLoader( "XJLayer", XJLayerLoader::loader());  
    17.     CCBReader* reader = new CCBReader( CCNodeLoaderLibrary::sharedCCNodeLoaderLibrary() );  
    18.     reader->autorelease();  
    19.       
    20.     // run  
    21.     pDirector->runWithScene( reader->createSceneWithNodeGraphFromFile( "ConnectToCustomClass.ccbi" ) );  
    22.   
    23.     return true;  
    24. }  
    CCNodeLoaderLibrary类内包含了所有节点的加载器。CCBReader类将使用这个库内的对应加载器去创建对应的节点。因为我们要创建我们自定义的节点,所以我们往库内注册了一个新节点加载器。
    [cpp]  view plain copy
    1. CCNodeLoaderLibrary::sharedCCNodeLoaderLibrary()->registerCCNodeLoader( "XJLayer", XJLayerLoader::loader());  
    即当遇到节点类型(或称为标签)为“XJLayer“的时候,使用XJLayerLoader::loader()创建出来的那个加载器来创建节点。而我们知道这个加载器重写createCCNode,这样就能正确创建出我们自定义的XJLayer了。

    另外当CCBReader遇到某些节点中有selector,target属性时,就会找到根节点(根节点就是我们的XJLayer节点,我们的加载器此时已经创建了一个XJLayer对象),然后调用对应的虚函数,去解决消息处理函数归属和变量复制的问题。这样就完成ccbi对象与cocos2d-x对象的连接。

  18. 运行程序,【Command】+【R】。如果顺利的话,你将得到如下运行效果:
    Cocos2d-x CocosBuilder使用教程(二)连接自定义类_第3张图片
    点击左侧两个按钮,xCode调试输出窗口内会有我们事先写入的调试信息输出。断点调试,你会发现XJLayer类对象的m_TestLabel是有值的。这就证明m_TestLabel正确连接了”Sample Test“标签。
写了快2个小时了好像,终于搞定,希望大家多交流,促进行业发展。

你可能感兴趣的:(Cocos2d-x CocosBuilder使用教程(二)连接自定义类)