CocosBuilder User Guide
本文主要介绍CocosBuilder 和cocos2d-x lua代码整合的部分,关于界面上怎么操作就省去了。
CocosBuilder版本:3.0 alpha4.
CocosBuilder下载地址:
http://cocosbuilder.googlecode.com/files/CocosBuilder-3.0-alpha4.zip
虽然是alpha版本,目前试用看基本稳定,除了拖动ScrollView的四个角会导致界面失去响应之外其他没有发现严重的Bug。
载入CCBI文件脚本: 使用的是cocos2d-x2.1.4 lua Sample中自带的CCBReadLoad.lua, 目录为cocos2d-x-2.1.4/scripting/lua/script/CCBReaderLoad.lua。
Cocos2dx版本:cocos2d-x 2.1.4
1. Lua sample Code
先给出Lua的Sample Code,再对照cocos builder解释代码的作用。
1 require"luaScript/CCBReaderLoad"
2
3TestLayer = TestLayer or {}
4ccb["TestLayer"] = TestLayer
5
6TestLayerOwner = TestLayerOwner or {}
7ccb["TestLayerOwner"] = TestLayerOwner
8
9function TestLayer.onTestClicked()
10 print("document root callback clicked");
11end
12
13function TestLayerOwner.onTestClicked()
14 print ("owner callback clicked")
15end
16
17function CreateTest()
18 local scene = CCScene:create()
19 local proxy = CCBProxy:create()
20 local node =CCBReaderLoad("yourpath/Published-iOS/test.ccbi", proxy, true,"TestLayerOwner")
21 local layer = tolua.cast(node, "CCLayer");
22 scene:addChild(layer)
23 return scene
24end
2. UI 工程设置
2.1 菜单选择File->New->New File,名称为test
2.2 Layer 设置如下图所示:
图1
2.3 添加背景Sprite。
2.4 添加CCControlButton,设置如下图所示:
图2
3. 运行Sample
点击ControlButton,运行程序如下:
图3
4. Sample 详解
4.1 JS Controller
如图1所示,我设置CCLayer 的JS Controller为TestLayer,同时在Sample Code的第三行定义一个TestLayer,并在第四行赋值给ccb。
需要注意的是,JS Controller 只有一个CCB文件的Root Layer可以设置,其他的始终为空。
4.2 Document Root 以及Owner形式
在定义Widget的名称(图1和图2中JS Controller下一行)以及回调函数(图2中CCCtroller 中Target)的时候,需要设置是Document Root /Doc root var类型还是Owner/Owner var类型。
Document Root 类型:表示定义的Widget成员变量或者回调函数是存放在JS Controller定义的Table中。如现在我定义的类型是Document Root, 则ControlButton的回调函数是TestLayer.onTestClicked(),且LoadCBBI后TestLayer会存在成员m_testCtrl。
Owner 类型:表示定义的Widget成员变量或者回调函数是存放在CCBReaderLoad函数最后一个参数中,本例子中是在TestLayerOwner中。例如我在CCB中改为Owner类型,点击输出如下:
图4
从图4可以看出,此时调用的是13行定义的TestLayerOwner.onTestClicked。
4.3 关于获取Widget
获取Widget其实比较简单,例如在DocumentRoot类型下我要获取Control Button,因为我在图2 中定义的Doc root var为m_testCtrl.我可可以在CreateTest的retur之前添加如下代码设置ControlButton的Text:
local testCtrl =tolua.cast(TestLayer.m_testCtrl, "CCControlButton")
local testCtrlLabel =tolua.cast(testCtrl:getTitleLabel(), "CCLabelTTF")
testCtrlLabel:setString("newText")
修改代码后程序运行如下:
图5