Cocos2d-x游戏开发之一 CocosBuilder编辑器使用

CJsen

墨衍会员 · AI 创作全网分发码龄17年

关注

原创最新推荐文章于 2026-08-31 09:36:45 发布 3.4k 阅读 AI 写同款· GEO 优化 ›

CocosBuilder学习之一：认识CocosBuilder CocosBuilder学习之一：认识CocosBuilder CocosBuilder是一款原生的支持cocos2d 阅读详情

简言

CocosBuilder与interface builder 类似，是cocos2d下简单快速进行精灵，层，场景布局的工具。可以快速完美的进行菜单和交互场景的布局,是Cocos2d系列的配套开源工具,最新的版本是3.0

参考资料

CocosBuilder官网

http://cocosbuilder.com/

从零开始学习CocosBuilder

http://article.ityran.com/archives/2614

安装

直接去官网下载，从归档文件解压，并把它拷贝到应用程序文件夹

接下来，先上我将完成的的实例界面

目前的简单功能是，点击菜单Tutorial进入说明界面然后可返回到主菜单;

开始CocosBuilder

先在新建文件夹LineRunner，用于存放cocos2d-x工程和CocosBuilder工程

第一部分：在CocosBuilder中新建工程并构建好界面

在CocosBuilder中新建工程

在菜单中选择File\New\New Project，命名工程为LRCocosBuilder并保存到LineRunner目录

得到默认界面，这个不是我们要的，

首先，你需要删除MainScene.ccb文件，它只是程序默认创建的场景。

注意：你可能觉得通过CocosBuilder 工程去删除文件很直接，但我没能直接删除。在Finder中删除MainScene.ccb和MainScene.js 如果有人知道简单的方式，请回复。

另外，CocosBuilder 3.0默认会是勾选js controlled，可以在cocosbuilder里面选择document->javascript controlled，把对勾去掉就可以了（注：会影响后的的菜单等事件的绑定，我在这还卡住了）。

第一步：准备所需的资源图片，把所有的资源文件复制到工程目录下的Resources,即可在Cocosbuilder看到。

接下来，选择File\New\New File，在下拉菜单中从菜单项中选择iPhone Landscape 和 iPhone 5 Landscape，另外确保根类型为CCLayer。

第二步：开始构建界面

点击工具条的CCSprite按钮，添加一个标题，背影精灵

设置精灵图片

接下来添加菜单，点击工具条的Menu,加入3个菜单项

其中先添加图中的1（菜单Menu），再添加2（菜单项CCMenuItemImageMenu）,并先设置好图片属性，其中的事件绑定我们下面会说。。

我们可以从这Timeline里看到层次结构，这里在设置动画可会用到

第三步：我们完成了第一个界面，接下来关键的一步，将场景连接到类

当你通过CocosBuider 创建的CCLayer来设置场景时，如果你想使场景层为自定义类，你需要为CocosBuilder指明那个类。

例如，如果你用MainMenuScene初始化了一个场景并且你希望它的场景层是你自定义的类，你需要在CocosBuilder的代码连接区指明类名。

选中MainMenuScene.ccb，在TimeLine中CCLayer根节点。

在右侧代码连接区设置自定义类为MainMenuLayer，这样当你初始化场景时，CocosBuilder会寻找名叫MainMenuLayer的类去初始化场景层。接下来是要发布CocosBuilder界面文件，点击File，选择Publish，这将在场景目录创建一个名字为MainMenuScene.ccbi的文件。

CocosBuilder介绍到这，接下来介绍如何在Cocos2D-x下工作。

第二部分,在cocos2d-x使用场景并绑定事件

首先确保你安装了最新的Cocos2D，写本文时是cocos2d-2.1rc0-x-2.1.3版。

新建一个cocos2d-x工程，命名为LineRuner，

1）将在CocosBuilder工程中用的图片资源添加到工程的Resources下，并确保“Copy items to destination group’s folder (if needed)”为选中状态，另外 LineRuner Target也为选中状态。

2）把在cocosBuilder工程生成的MainMenuScene.ccbi文件直接拖到Resources下，不要复制不要选中“Copy items to destination group’s folder (if needed)”，因为这样只是保持链接，而不用每次改动.ccbi文件都要复制到cocos2d-x工程下。

在LineRuner工程的class目录下新建目录layers,并新建一个C++文件MainMenuLayer.cpp,并修改MainMenuLayer文件

MainMenuLayer.h

#ifndef __LineRuner__MainMenuLayer__
#define __LineRuner__MainMenuLayer__

#include <iostream>
#include "cocos2d.h"
#include "cocos-ext.h"
class MainMenuLayer : public cocos2d::CCLayer{
public:
    static cocos2d::CCScene* scene();
};
#endif /* defined(__LineRuner__MainMenuLayer__) */

MainMenuLayer.cpp

#include "MainMenuLayer.h"
#include "LRTutorialScene.h"
USING_NS_CC;
USING_NS_CC_EXT;

CCScene* MainMenuLayer::scene(){
    CCScene *scene = CCScene::create();
    CCNodeLoaderLibrary *lib = CCNodeLoaderLibrary::newDefaultCCNodeLoaderLibrary();
    CCBReader* reader = new CCBReader(lib);
    CCNode *node = reader->readNodeGraphFromFile("LRMainMenuScene.ccbi", scene);
    reader->release();
    if (node != NULL) {
        scene->addChild(node);
    }
    return scene;
}

修改AppDelegate.cpp中默认的启动scene

CCScene *pScene = MainMenuLayer::scene();

如果没有错误的话, 你应该可以看到运行的效果.

这时我们点击界面上的图片是没有反应的

下面来绑定菜单事件

我们再次打开cocosBuilder工程，在选中菜单项并设置调用方法，设置这两项即可

记得编辑完之后要Publish一下，才能反应到实际文件上。

回到Xcode，LineRunner工程，再次修改MainMenuLayer文件，添加几个函数

MainMenuLayer.h

#ifndef __LineRuner__MainMenuLayer__
#define __LineRuner__MainMenuLayer__

#include <iostream>
#include "cocos2d.h"
#include "cocos-ext.h"
class MainMenuLayer : public cocos2d::CCLayer,
public cocos2d::extension::CCBSelectorResolver{
public:
    static cocos2d::CCScene* scene();
    CCB_STATIC_NEW_AUTORELEASE_OBJECT_WITH_INIT_METHOD(MainMenuLayer, create);
    //菜单处理
    virtual cocos2d::SEL_MenuHandler onResolveCCBCCMenuItemSelector(CCObject * pTarget, const char* pSelectorName);
    //控件处理
    virtual cocos2d::extension::SEL_CCControlHandler onResolveCCBCCControlSelector(CCObject * pTarget, const char* pSelectorName);

    //在CocosBuilder上绑定的方法
    void options(cocos2d::CCObject *pSender);
    void tutorial(cocos2d::CCObject *pSender);
    void play(cocos2d::CCObject *pSender);
};
class MainSceneLayerLoader : public cocos2d::extension::CCLayerLoader
{
public:
    CCB_STATIC_NEW_AUTORELEASE_OBJECT_METHOD(MainSceneLayerLoader, loader);
protected:
    CCB_VIRTUAL_NEW_AUTORELEASE_CREATECCNODE_METHOD(MainMenuLayer);
};
#endif /* defined(__LineRuner__MainMenuLayer__) */

MainMenuLayer.cpp

#include "MainMenuLayer.h"
#include "LRTutorialScene.h"
USING_NS_CC;
USING_NS_CC_EXT;

CCScene* MainMenuLayer::scene(){
    CCScene *scene = CCScene::create();
    CCNodeLoaderLibrary *lib = CCNodeLoaderLibrary::newDefaultCCNodeLoaderLibrary();
    
    lib->registerCCNodeLoader("MainMenuLayer", MainSceneLayerLoader::loader());
    CCBReader* reader = new CCBReader(lib);
    CCNode *node = reader->readNodeGraphFromFile("LRMainMenuScene.ccbi", scene);
    reader->release();
    if (node != NULL) {
        scene->addChild(node);
    }
    return scene;
}
SEL_MenuHandler MainMenuLayer::onResolveCCBCCMenuItemSelector(cocos2d::CCObject *pTarget, const char *pSelectorName)
{
    CCB_SELECTORRESOLVER_CCMENUITEM_GLUE(this, "options", MainMenuLayer::options);
    CCB_SELECTORRESOLVER_CCMENUITEM_GLUE(this, "play", MainMenuLayer::play);
    CCB_SELECTORRESOLVER_CCMENUITEM_GLUE(this, "tutorial", MainMenuLayer::tutorial);
    return NULL;
}
SEL_CCControlHandler MainMenuLayer::onResolveCCBCCControlSelector(cocos2d::CCObject *pTarget, const char *pSelectorName){
    return NULL;
}
void MainMenuLayer::options(cocos2d::CCObject *pSender){
    CCLog("options");
}
void MainMenuLayer::play(cocos2d::CCObject *pSender){
    CCLog("play");
}
void MainMenuLayer::tutorial(cocos2d::CCObject *pSender){
    CCLog("tutorial");
}

运行项目，可看到点击每个菜单的输出Log...

最后一步，创建新的场景并在主菜单上进入。

按照上面的步骤在cocosBuilder上新建，名为LRTutorialScene的场景，并将layer的Custom class设置LRTutorialScene，在这里我们新加个UIControlButton 控件,并设置图片和点击事件

回到xcode，新建LRTutorialScene.cpp，C++文件，编写文件

LRTutorialScene.h

#ifndef __LineRuner__LRTutorialScene__
#define __LineRuner__LRTutorialScene__

#include <iostream>
#include "cocos-ext.h"
#include "cocos2d.h"
class LRTutorialScene
:public cocos2d::CCLayer
, public cocos2d::extension::CCBSelectorResolver{
public:
    CCB_STATIC_NEW_AUTORELEASE_OBJECT_WITH_INIT_METHOD(LRTutorialScene, create);
    virtual cocos2d::SEL_MenuHandler onResolveCCBCCMenuItemSelector(CCObject * pTarget, const char* pSelectorName);
    virtual cocos2d::extension::SEL_CCControlHandler onResolveCCBCCControlSelector(CCObject * pTarget, const char* pSelectorName);
    void backMenuAction(cocos2d::CCObject *pSender, cocos2d::extension::CCControlEvent pCCControlEvent);
};
class LRTutorialSceneLoader : public cocos2d::extension::CCNodeLoader
{
public:
    CCB_STATIC_NEW_AUTORELEASE_OBJECT_METHOD(LRTutorialSceneLoader, loader);
protected:
    CCB_VIRTUAL_NEW_AUTORELEASE_CREATECCNODE_METHOD(LRTutorialScene);
};
#endif /* defined(__LineRuner__LRTutorialScene__) */

LRTutorialScene.cpp

#include "LRTutorialScene.h"

USING_NS_CC;
USING_NS_CC_EXT;

SEL_MenuHandler LRTutorialScene::onResolveCCBCCMenuItemSelector(cocos2d::CCObject *pTarget, const char *pSelectorName){
    return NULL;
}
SEL_CCControlHandler LRTutorialScene::onResolveCCBCCControlSelector(cocos2d::CCObject *pTarget, const char *pSelectorName)
{
    CCB_SELECTORRESOLVER_CCCONTROL_GLUE(this, "backMenuAction", LRTutorialScene::backMenuAction);
    return NULL;
}
void LRTutorialScene::backMenuAction(cocos2d::CCObject *pSender, cocos2d::extension::CCControlEvent pCCControlEvent){
    CCLog("LRTutorialScene");
    CCDirector::sharedDirector()->popScene();
}

另外在MainMenuLayer.h文件上增加函数

    void openScene(const char * pCCBFileName, const char * pCCNodeName = NULL, cocos2d::extension::CCNodeLoader * pCCNodeLoader = NULL);

MainMenuLayer.cpp

void MainMenuLayer::openScene(const char * pCCBFileName, const char * pCCNodeName, cocos2d::extension::CCNodeLoader * pCCNodeLoader){
    CCScene *scene = CCScene::create();
    CCNodeLoaderLibrary *lib = CCNodeLoaderLibrary::newDefaultCCNodeLoaderLibrary();
    
    lib->registerCCNodeLoader(pCCNodeName, pCCNodeLoader);
    CCBReader* reader = new CCBReader(lib);
    CCNode *node = reader->readNodeGraphFromFile(pCCBFileName, scene);
    reader->release();
    if (node != NULL) {
        scene->addChild(node);
    }
    CCDirector::sharedDirector()->pushScene(scene);
}

在MainMenuLayer.cpp的tutorial函数上响应，

void MainMenuLayer::tutorial(cocos2d::CCObject *pSender){
    CCLog("tutorial");
    this->openScene("LRTutorialScene.ccbi","LRTutorialScene",LRTutorialSceneLoader::loader());
}

运行项目，看结果吧。。

先到这吧，会继续更新这个例子，慢慢学慢慢加更多的功能。。
源码下载地址：

金山快盘：http://www.kuaipan.cn/file/id_88462402013626369.htm

优快云

收录于