在目前的cocos2dx项目开发中，基本只有2个编辑器可选。一个是现在官方推荐的CocosCreator, 但它并不支持我们常用的lua脚本。另一个是CocosStudio, 官方已经不再对其维护，且使用也并不太方便。那么有没有什么方法能让编辑器更好的接入lua脚本，又能方便地自定义控件呢？
想要编辑器对lua脚本更好地支持，那么我们的编辑器可以用lua来开发，这样编辑器可以直接分析lua代码。这里推荐使用imgui来开发编辑器, 比直接用cocos-x更快，关于imgui请点击:cocos2dx上适合做工具的UI库ImGui。为了让实现编辑器中结点名与lua变量的自动绑定，我想到了让所有界面继承于BaseLayer，在基类中自动处理lua变量和事件的绑定。一个典型的游戏界面如下，由编辑器自动生成:
local XxxLayer = class("XxxLayer", require("common.BaseLayer"), function() return display.newLayer() end) -- UI结构定义 XxxLayer.uiTree = {} -- 自定义内容 -- 构造函数 --[[ params: --]] function XxxLayer:ctor(params) -- 初始化Layer, 可传入参数详情参见BaseLayer self.super.ctor(self) -- 初始化UI self:initUI() end -- 初始化UI function XxxLayer:initUI() self:createUITree() -- 进行UI的额外调整 end return XxxLayer
其中createUITree就是由BaseLayer提供的方法，主要创建uiTree中定义的控件。我们约定"-- 自定义内容"之前的交给编辑器，用户不能编辑(编辑器保存时会被重置)。uiTree中保存的是结点的树形结构，里面定义了结点的类型及各种创建参数，比如加入一个按钮后，会变成:
XxxLayer.uiTree = {[1]={["cType"]="Button",["children"]={},["name"]="closeBtn",["params"]={["image"]="c_13.png",["pos"]={["x"]=320,["y"]=568,},["scale"]=1,},},}
为了更好的支持控件的自定义，我们可以定义一种简单的控件格式，如:
UIWrap = { --[[ return { hint = "创建sprite", params = { {name = "image", type="file", hint = "图片名", required = "c_11.png"}, {name = "pos", type="ccp", hint = "位置", required = cc.p(100, 100)}, {name = "anchor", type="ccp", hint = "锚点"}, {name = "scale", type="number", hint = "缩放"}, }, } --]] ["Sprite"] = function (params) local retSprite = display.newSprite(params.image, params.pos and params.pos.x, params.pos and params.pos.y) if params.anchor then retSprite:setAnchorPoint(params.anchor) end if params.scale then retSprite:setScale(params.scale) end return retSprite end, }
所有控件都通过此格式来定义，编辑器打开时就可以解析这个lua文件，获得所有的控件类型。其中hint表示控件或参数提示，params中是此控件的所有参数，type主要用于参数设定的个性化(如ccp类型, number类型, file类型甚至可以直接给出文件选择)，required表示此参数必须设置并给出了缺省值。可以看到此控件格式最终返回的是一个function, 那么编辑器中创建Sprite结点时，实际上就是调用了一次此function, 而实际游戏代码中仍然也是调用此function来创建Sprite结点, 那么就实现了编辑中的所见及所得。
BaseLayer:createUITree方法里面主要是循环创建uiTree里面定义的结点，并将结点名和事件与layer进行绑定。大致流程如下:
function BaseLayer:createUITree() -- 创建一个cocos2dx结点列表并添加到指定的父结点上 local function createChildrenNode(children, parentNode) for _,item in ipairs(children) do -- 使用编辑器中的参数创建结点 local newNode = UIWrap[item.cType](item.params) parentNode:addChild(newNode) --[[ 默认的结点名以"untitled"开头，表示我们并不关心此结点 将需要访问的结点，直接绑定到self上 如结点名为"closeBtn", 代码中可以用self.closeBtn直接访问 --]] if not string.find(item.name, "untitled") then self[item.name] = newNode end -- 创建子结点 if next(item.children) then createChildrenNode(item.children, newNode) end end end -- 从uiTree开始创建 createChildrenNode(self.uiTree, self) end
按钮事件绑定: 有些特殊控件(如button等)需要设定点击回调，在lua代码中对应的是function类型。为了实现编辑器中参数与lua代码中function的绑定，我们在编辑器中记录下绑定的lua函数名(通过分析Layer的function类型可获得所有函数名)。然后在创建结点之前，将回调参数与Layer中的函数进行绑定：
-- 结点创建之前，点击事件绑定 for key, value in pairs(item.params) do -- 我们规定点击事件必须以"on"开头来过滤Layer中普通的函数名 if type(value) == "string" and string.find(value, "on") == 1 and self[value] then item.params[key] = handler(self, self[value]) end end
模版控件处理: 对于像ListView这样的控件，需要特殊处理。我们可以定义一个特殊控件”Layout“，它并不随Layer的创建而创建(在createChildrenNode中发现控件类型为Layout时，则仅记录其结点树数据，不创建其结点)，只能代码调用BaseLayer:createLayoutNode来创建。createLayoutNode函数与createUITree类似，只是创建内容变成了Layout和它的子结点。填充ListView时，可以这样:
-- 填充ListView数据 for i=1,10 do local childLayout = self:createLayoutNode("ListLayout") self.goodsListView:pushBackCustomItem(childLayout) -- 下面对各childLayout设置表现差异 end
我们甚至可以在编辑器中创建多个不同的Layout，来丰富ListView上的显示效果(如ListView中最后显示一个"更多")。
在编辑器实现基本的布局、增删、修改功能后，控件类型的增加就已经和编辑器无关了。我们甚至可以创建一些复杂的控件类型，如英雄头像，英雄星级之类。比如和之间仅仅就是创建的starNum参数值不一样而已。
请发表评论