一步一步CocosBuilder(3)

发表于   |   分类于 ，   |  

今天要说的内容比较轻松, 重要的知识点不多.
目标是实现Menus & Items, Sprites & 9 Slice, Buttons & Labels.

#####1
首先我们在CocosBuilder中建立一个新的Header.ccb.具体请参见CocosBuilder的项目.
在创建的时候,勾选Full Sceen, 并且将分辨率的Height都修改为40.
这个文件很简单, 根节点下只包含一个CCLayerColor,根节点的Custom class设置为HeaderLayer.
CCLayerColor下面包含一个CCLabelTTF和CCMenu.
CCLabelTTF的变量绑定为类型Owner var, 值为mTitleLabelTTF.
CCMenu包含一个CCMenuItemImage. CCMenuItemImage的Selector属性设置为onBackClicked.
这个ccb作为一个公用的元素被其他ccb文件所引用. 是属于模块化的一个例子.
然后我们在Xcode中新建一个HeaderLayer类, 并同时声明一个HeaderLayerLoader类.

HeaderLayer.h
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class HeaderLayer
: public cocos2d::CCLayer
, public cocos2d::extension::CCBSelectorResolver
{
public:
    CCB_STATIC_NEW_AUTORELEASE_OBJECT_WITH_INIT_METHOD(HeaderLayer, create);
    
    virtual cocos2d::SEL_MenuHandler onResolveCCBCCMenuItemSelector(CCObject * pTarget, const char* pSelectorName);
    virtual cocos2d::extension::SEL_CCControlHandler onResolveCCBCCControlSelector(CCObject * pTarget, const char* pSelectorName);
    void onBackClicked(CCObject *pSender);
};
class HeaderLayerLoader : public cocos2d::extension::CCLayerLoader
{
public:
    CCB_STATIC_NEW_AUTORELEASE_OBJECT_METHOD(HeaderLayerLoader, loader);
protected:
    CCB_VIRTUAL_NEW_AUTORELEASE_CREATECCNODE_METHOD(HeaderLayer);
};
HeaderLayer.cpp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
SEL_MenuHandler HeaderLayer::onResolveCCBCCMenuItemSelector(cocos2d::CCObject *pTarget, const char *pSelectorName)
{
    CCB_SELECTORRESOLVER_CCMENUITEM_GLUE(this, "onBackClicked", HeaderLayer::onBackClicked);
    
    return NULL;
}
SEL_CCControlHandler HeaderLayer::onResolveCCBCCControlSelector(cocos2d::CCObject *pTarget, const char *pSelectorName)
{
    return NULL;
}
void HeaderLayer::onBackClicked(cocos2d::CCObject *pSender)
{
    CCDirector::sharedDirector()->popScene();
}

#####2
在CocosBuilder中新建一个Menus.ccb, 并将根节点Custom class设置为MenuLayer.
再加入几个CCMenuItemImage, Selector分别设置为onPressA, onPressB, onPressC.
再加入一个CCLabelBMFont, 绑定Doc root var, 值为mMessageLabelBMFont.
在Xcode中新建一个类MenuLayer, 并且在MenuLayer.h中同时声明一个MenuLayerLoader类.

MenuLayer.h
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
class MenuLayer
: public cocos2d::CCLayer
, public cocos2d::extension::CCBMemberVariableAssigner
, public cocos2d::extension::CCBSelectorResolver
{
public:
    MenuLayer();
    ~MenuLayer();
    
    CCB_STATIC_NEW_AUTORELEASE_OBJECT_WITH_INIT_METHOD(MenuLayer, create);
    virtual bool onAssignCCBMemberVariable(CCObject* pTarget, const char* pMemberVariableName, CCNode* pNode);
    virtual cocos2d::SEL_MenuHandler onResolveCCBCCMenuItemSelector(CCObject * pTarget, const char* pSelectorName);
    virtual cocos2d::extension::SEL_CCControlHandler onResolveCCBCCControlSelector(CCObject * pTarget, const char* pSelectorName);
    void onPressA(cocos2d::CCObject *pSender);
    void onPressB(cocos2d::CCObject *pSender);
    void onPressC(cocos2d::CCObject *pSender);
private:
    cocos2d::CCLabelBMFont *mMessageLabelBMFont;
};
class MenuLayerLoader : public cocos2d::extension::CCNodeLoaderLibrary
{
public:
    CCB_STATIC_NEW_AUTORELEASE_OBJECT_METHOD(MenuLayerLoader, loader);
protected:
    CCB_VIRTUAL_NEW_AUTORELEASE_CREATECCNODE_METHOD(MenuLayer);    
};

MenuLayer.cpp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
MenuLayer::MenuLayer()
: mMessageLabelBMFont(NULL)
{}
MenuLayer::~MenuLayer()
{
    CC_SAFE_DELETE(mMessageLabelBMFont);
}
bool MenuLayer::onAssignCCBMemberVariable(cocos2d::CCObject *pTarget, const char *pMemberVariableName, cocos2d::CCNode *pNode)
{
    CCB_MEMBERVARIABLEASSIGNER_GLUE(this, "mMessageLabelBMFont", CCLabelBMFont*, this->mMessageLabelBMFont);
    return false;
}
SEL_MenuHandler MenuLayer::onResolveCCBCCMenuItemSelector(cocos2d::CCObject *pTarget, const char *pSelectorName)
{
    CCB_SELECTORRESOLVER_CCMENUITEM_GLUE(this, "onPressA", MenuLayer::onPressA);
    CCB_SELECTORRESOLVER_CCMENUITEM_GLUE(this, "onPressB", MenuLayer::onPressB);
    CCB_SELECTORRESOLVER_CCMENUITEM_GLUE(this, "onPressC_NO_Match", MenuLayer::onPressC);
   //注意这里, 我们给第三个绑定了一个不存在的SelectorName. 
    return NULL;
}
SEL_CCControlHandler MenuLayer::onResolveCCBCCControlSelector(cocos2d::CCObject *pTarget, const char *pSelectorName)
{
    return NULL;
}
void MenuLayer::onPressA(cocos2d::CCObject *pSender)
{
    this->mMessageLabelBMFont->setString("A pressed.");
}
void MenuLayer::onPressB(cocos2d::CCObject *pSender)
{
    this->mMessageLabelBMFont->setString("B pressed.");
}
void MenuLayer::onPressC(cocos2d::CCObject *pSender)
{
    this->mMessageLabelBMFont->setString("C pressed.");
}

#####3
或许有点着急了吧, 我们如何让这个运行起来呢?
首先给MainScene增加一个新函数的声明及定义, 还需要增加一个变量用于和Header.ccb中的mTitleLabelTTF绑定.

MainScene.h
1
2
3
4
public:
    void openTest(const char * pCCBFileName, const char * pCCNodeName = NULL, cocos2d::extension::CCNodeLoader * pCCNodeLoader = NULL);
private:
    cocos2d::CCLabelTTF *mTitleLabelTTF;

MainScene.cpp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
void MainScene::openTest(const char * pCCBFileName, const char * pCCNodeName, cocos2d::extension::CCNodeLoader * pCCNodeLoader)
{
    CCScene *scene = CCScene::create();
    
    CCNodeLoaderLibrary *lib = CCNodeLoaderLibrary::newDefaultCCNodeLoaderLibrary();
    
    lib->registerCCNodeLoader("HeaderLayer", HeaderLayerLoader::loader());
    lib->registerCCNodeLoader(pCCNodeName, pCCNodeLoader);
    
    CCBReader *reader = new CCBReader(lib);
    CCNode *node = reader->readNodeGraphFromFile(pCCBFileName, this);
    reader->autorelease();
    
    if (node != NULL)
    {
        scene->addChild(node);
    }
    
    this->mTitleLabelTTF->setString(pCCBFileName);
    
    CCDirector::sharedDirector()->pushScene(scene);
}
bool MainScene::onAssignCCBMemberVariable(cocos2d::CCObject *pTarget, const char *pMemberVariableName, cocos2d::CCNode *pNode)
{
    CCB_MEMBERVARIABLEASSIGNER_GLUE(this, "mLabelText", CCLabelBMFont*, this->mLabelText);
    CCB_MEMBERVARIABLEASSIGNER_GLUE(this, "mTitleLabelTTF", CCLabelTTF*, this->mTitleLabelTTF);
    
    return false;
}
void MainScene::onButtonTest(cocos2d::CCObject *pSender, cocos2d::extension::CCControlEvent pCCControlEvent)
{
    this->openTest("ccb/Menus.ccbi", "MenuLayer", MenuLayerLoader::loader());
}

#####4
Sprites & 9 Slice 这个比较简单, 只是靠CocosBuilder就能完成任务了.

我拼的不太好, 嘿嘿. 主要是着重代码, 并非设计, 漂亮的事情交给美术妹纸吧.

#####5
Buttons这块主要是研究了CCControlEvent的各种情况. 我们只贴出核心代码.

ButtonsLayer.cpp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
void ButtonsLayer::onBtnClicked(cocos2d::CCObject *pSender, cocos2d::extension::CCControlEvent pCCControlEvent)
{
    switch (pCCControlEvent) {
        case CCControlEventTouchCancel:
            this->mEventLabelBMFont->setString("Cancel");
            break;
        case CCControlEventTouchDown:
            this->mEventLabelBMFont->setString("Touch Down");
            break;
        case CCControlEventTouchDragEnter:
            this->mEventLabelBMFont->setString("Drag Enter");
            break;
        case CCControlEventTouchDragExit:
            this->mEventLabelBMFont->setString("Drag Exit");
            break;
        case CCControlEventTouchDragInside:
            this->mEventLabelBMFont->setString("Drag Inside");
            break;
        case CCControlEventTouchDragOutside:
            this->mEventLabelBMFont->setString("Drag OutSide");
            break;
        case CCControlEventTouchUpInside:
            this->mEventLabelBMFont->setString("Up Inside");
            break;
        case CCControlEventTouchUpOutside:
            this->mEventLabelBMFont->setString("Up Outside");
            break;
        default://所有的定义都在上面了,TestCPP里面有句经典的点评, 想看的可以去翻一下.
            break;
    }
}


代码打包下载:下载点

谢谢您耐心看完此文, 希望能对您有些帮助.如果有什么问题, 意见, 建议, 拍砖, 欢迎留言或者联系我.

新浪微博: @杨世玲 http://weibo.com/young40