Cocosbuilder For Cocos2dx Tutorial Part Two

2012-09-24 00:00:00 +0000

I. Compile CocosBuilder

  • download source code of cocosbuilder
  • get submodules of cocosbuilder,run these commands in the cocosbuilder source folder
git submodule init
git submodule update
  • at this point,you have all sources of cocosbuilder,it's time to compile cocosbuilder
  • goto CocosBuilder folder open CocosBuilder.xcodeproj
  • change build target to CocosBuilder,if there is no error,you will get CocosBuilder binary in the build folder.If you get errors,please stop and check from step 1.

II. Create plugin

  • goto Plugin Nodes folder,duplicate CCRotatingSprite Folder,name it to your plugin name, let's call it CCMySprite
  • Now, open the project and slowly click twice on the project name in the file view to rename it. Name it to CCMySprite,with popup window click ok.
  • click the run button.This will compile the plugin and copy it into CocosBuilder's Plugins folder(inside the app bundle),For testing and debugging,double click the CocosBuilder program in the build folder.You can see the output of the program using
  • go back to xcode,change CCRotatingSprite class to what ever you want,cause I am create a plugin for CCMySprite,so I will rename this class to CCBPMySprite(cocosbuilder name convention)
  • now it's time to code for the CCBPMySprite(in cocosbuilder and cocos2dx you may use different class,cause you are too lazy to port your c++ class to obj c),let's just add a simple string property.
  • after complete CCBPMySprite class,open CCBPProperties.plist modify inheritsFrom to what ever your class inherits for example CCSprite,and VERY IMPORTANT className to your cocos2dx class name,this time is CCMySprite,and change editorClassName to CCBPMySprite,and a property named string of type Text ( Property Ref , Property Types)
    <string>Sample Text</string>
    <string>Set My String</string>
  • goto build folder,right click CocosBuilder -> Show Package Contents,goto Contents/plugins folder delete your plugin folder
  • click run button,compile your plugin again,remember to delete plugin folder first(I don't know why it can't override the old one)
  • run the CocosBuilder in the build folder to test your plugin,goto step 5 until you complete the plugin.

III. Parse it

  • create a loader for your plugin,let's call it CCMySpriteLoader,and it should inherit from CCSpriteLoader.(open CCSpriteLoader to learn how to write a loader)
  • I have added a string property called string to my CCBPMySprite,so I should parse it by type text
void CCMySpriteLoader::onHandlePropTypeText(CCNode * pNode, CCNode * pParent, CCString * pPropertyName, CCString * pText, CCBReader * pCCBReader){
    if(pPropertyName->compare("string") == 0){
        ((CCMySprite*)pNode)->setMyString(pText);//assume you have implement a method called setMyString,just CCLog out
  • inject your loader to the parse chain
CCNodeLoaderLibrary::sharedCCNodeLoaderLibrary()->registerCCNodeLoader("CCMySprite", CCMySpriteLoader::loader());//it means when parse CCMySprite use CCMySpriteLoader to parse it
  • now I have inject my Editor value of string to my CCMySprite class,at this point the CCMySprite plugin is complete.

Cocosbuilder For Cocos2dx Tutorial Part One

2012-09-23 00:00:00 +0000

I. create a empty HelloCocos2dx project

use the cocos2dx template

II. setup CocosBuilder

  • create a CocosBuilder project called HelloCocos2dx
  • in CocosBuilder File->new File to create a Layer file HelloLayer
  • add a CCLabelTTF,make it center,in the property panel Code Connections section change Don't assign to Owner - -- var,and input txtHello,change Sample Text to "Hello From CocosBuilder"
  • add a CCMenu,and add a CCMenuItemImage to the CCMenu,in the CCMenuItemImage property panel CCMenuItem section,input onSayHello: for Selector field and change target to Owner,in the CCMenuItemImage section select a image for normal state.
  • in CocosBuilder File->Project Settings set Publish Directory to xcode project Resources/UI,uncheck all the checkbox,now publish

III. connect with code

  • create a cpp class called LayerHello


#ifndef __LayerHello__
#define __LayerHello__
#include "cocos2d.h"
#include "CCBMemberVariableAssigner.h"
#include "CCBSelectorResolver.h"
#include "CCLabelTTF.h"
class LayerHello : public cocos2d::CCLayer,public CCBMemberVariableAssigner,public CCBSelectorResolver
    public://================UI injections
    CCLabelTTF *txtHello;
    void onSayHello(CCObject *sender);

    virtual bool init();

    virtual bool onAssignCCBMemberVariable(CCObject * pTarget, cocos2d::CCString * pMemberVariableName, CCNode * pNode)
        CCB_MEMBERVARIABLEASSIGNER_GLUE(this,"txtHello", CCLabelTTF,txtHello);
        return false;
    virtual cocos2d::SEL_MenuHandler onResolveCCBCCMenuItemSelector(CCObject * pTarget, CCString * pSelectorName)
        return NULL;
    virtual cocos2d::extension::SEL_CCControlHandler onResolveCCBCCControlSelector(CCObject * pTarget, CCString * pSelectorName)
        return NULL;

#endif /* defined(__LayerHello__) */


#include "LayerIncActorInfo.h"
#include "CCBReader.h"
#include "CCNodeLoaderLibrary.h"

LayerHello:: LayerHello()
: txtHello(0)


bool LayerHello::init()
    bool bRet = false;
    CC_BREAK_IF(! CCLayer::init());

    CCNodeLoaderLibrary * ccNodeLoaderLibrary = CCNodeLoaderLibrary::sharedCCNodeLoaderLibrary();
    CCBReader * ccbReader = new CCBReader(ccNodeLoaderLibrary,this,this);
    CCNode * node = ccbReader->readNodeGraphFromFile("UI/", "HelloLayer.ccbi", this);

    bRet = true;
    } while (0);

    return bRet;

void LayerHello::onSayHello(CCObject *sender)
    txtHello->setString("Hello From Code");
  • add LayerHello to your scene,click run to test it
  • in you game,click the CCMenuItemImage,the label should change to "Hello From Code"
« Prev 1 2 3 4 5 6 Next »