CocosBuilder 整合 Lua代码

     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