版权声明:本文基于署名 2.5 中国大陆许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名elloop(包含链接)
#前言
本文以3.9版本的cocos2d-x为例,总结了如何在代码中解析、加载ccbi文件。给出一个最简单的使用ccbi实现的helloworld的例子、一个加强版的HelloWorld示例、以及一个最贴近实际使用情况的ccbi使用示例, 并结合示例分析ccbi的解析过程。
官方示例程序
ccbi功能支持的源代码
cocos对ccbi的支持是在extensions这个模块里面,以v3.9为例,解析ccbi的代码的物理路径是放在cocos2d/cocos/editor-support/cocosbuilde这个路径下面,在vs的解决方案管理器中如下图所示:
官方示例源代码
cocos官方的ccbi使用示例代码是在(vs中):TestCpp/ExtensionsTest/CocosBuilderTest这个分组下面,
其中CocosBuilderTest.cpp的实现如下,init方法是解析加载ccbi的关键代码:
#include "CocosBuilderTest.h"
#include "../../testResource.h"
#include "HelloCocosBuilder/HelloCocosBuilderLayerLoader.h"
USING_NS_CC;
USING_NS_CC_EXT;
using namespace cocosbuilder;
CocosBuilderTests::CocosBuilderTests()
{
ADD_TEST_CASE(CocosBuilderTestScene);
}
bool CocosBuilderTestScene::init() {
if (TestCase::init())
{
/* Create an autorelease NodeLoaderLibrary. */
auto nodeLoaderLibrary = NodeLoaderLibrary::newDefaultNodeLoaderLibrary();
nodeLoaderLibrary->registerNodeLoader("HelloCocosBuilderLayer", HelloCocosBuilderLayerLoader::loader());
/* Create an autorelease CCBReader. */
cocosbuilder::CCBReader * ccbReader = new cocosbuilder::CCBReader(nodeLoaderLibrary);
/* Read a ccbi file. */
auto node = ccbReader->readNodeGraphFromFile("ccb/HelloCocosBuilder.ccbi", this);
ccbReader->release();
if (node != nullptr) {
this->addChild(node);
}
return true;
}
return false;
}
示例代码中包括了动画、UI按钮、菜单、标签、粒子、Scrollview等相关示例,这里不贴代码了,需要的话去cpptests工程里看就行了。
下面以我的实际使用经验总结一下在实际项目中该如何使用ccbi,先从一个HelloWorld说起。
使用ccbi的HelloWorld
使用cocosbuilder创建一个简单的ccbi
在cocosbuilder中新建一个hello.ccb, 注意:不要勾选js controll.(在Document菜单项下最后一个选项)
添加一个Label,名字叫mLabel:
添加一个MenuItemImage名字叫mBtn, selector名字叫onClick.:
保存,发布为hello.ccbi.
创建一个最简单的class,来使用创建出来的ccbi文件:
CcbiHelloWorld.h: 定义了一个class继承自Node,用来挂载ccbi
#ifndef PLAYING_WITH_COCOS3D_PAGE_CCB_HELLOWORLD_H
#define PLAYING_WITH_COCOS3D_PAGE_CCB_HELLOWORLD_H
#include "cocos2d.h"
#include "cocosbuilder/CocosBuilder.h"
class CcbiHelloWorld : public cocos2d::Node
{
public:
CREATE_FUNC(CcbiHelloWorld);
bool init() override
{
using cocosbuilder::NodeLoaderLibrary;
using cocosbuilder::CCBReader;
// 第一步: 创建一个NodeLoaderLibrary
auto loaderLib = NodeLoaderLibrary::newDefaultNodeLoaderLibrary();
// 第二步: 创建CCBReader
auto ccbReader = new CCBReader(loaderLib);
// 第三步: 调用CCBReader的readNodeGraphFromFile的方法,传入ccbi名字
auto node = ccbReader->readNodeGraphFromFile("ccbi/hello.ccbi", this);
ccbReader->release();
// 解析完毕,可以使用Node了。
if ( node )
{
addChild(node);
}
return true;
}
};
#endif //PLAYING_WITH_COCOS3D_PAGE_CCB_HELLOWORLD_H
在AppDelegate的applicationDidFinishLaunching()方法结尾处,添加启动代码:
auto node = CcbiHelloWorld::create();
auto scene = Scene::create();
scene->addChild(node);
director->runWithScene(scene);
编译运行,一个最简单的使用ccbi的例子就跑起来了,如下图所示:
从上面编写HelloWorld的过程可以看出,要想把ccbi当做节点添加到界面是很简单的事情,从CcbiHelloWorld类的init方法中看到, 几句关键代码加起来不超过10行。
不过,这个例子仅仅是把cocosbuilder当做了画板来用,所有的东西加到界面上都是死的, 点按钮也没有反应,我不能获取某个节点,做一些动作和属性修改的操作。有点像静态网站和动态网站的区别,游戏又不是美术作品,肯定是要动起来的。因此我需要能够获取ccbi界面上的元素,并且对它做一些操作。下面的第二个例子是展示了如何绑定ccbi上的变量和menu回调。
绑定ccbi上的变量和回调, 加强版HelloWorld
在上一个例子的基础上,来实现加强版HelloWorld, CcbiHelloWorldEnhanced
CcbiHelloWorldEnhanced.h:
#ifndef PLAYING_WITH_COCOS3D_PAGE_CCB_HELLOWORLD_ENHANCED_H
#define PLAYING_WITH_COCOS3D_PAGE_CCB_HELLOWORLD_ENHANCED_H
#include "cocos2d.h"
#include "cocosbuilder/CocosBuilder.h"
#include "cocosbuilder/CCBMemberVariableAssigner.h"
#include "cocosbuilder/CCBSelectorResolver.h"
class CcbiHelloWorldEnhanced
: public cocos2d::Node
, public cocosbuilder::CCBMemberVariableAssigner // 绑定ccbi上的变量
, public cocosbuilder::CCBSelectorResolver // 绑定ccbi上的回调
{
public:
// ------------------ create方法和init方法相对于第一个例子都没有修改 -------------------
CREATE_FUNC(CcbiHelloWorldEnhanced);
bool init() override
{
using cocosbuilder::NodeLoaderLibrary;
using cocosbuilder::CCBReader;
// 第一步: 创建一个NodeLoaderLibrary
auto loaderLib = NodeLoaderLibrary::newDefaultNodeLoaderLibrary();
// 第二步: 创建CCBReader
auto ccbReader = new CCBReader(loaderLib);
// 第三步: 调用CCBReader的readNodeGraphFromFile的方法,传入ccbi名字
auto node = ccbReader->readNodeGraphFromFile("ccbi/hello.ccbi", this);