• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

cocos2dx-lua UI编辑器的设计思路

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

  在目前的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参数值不一样而已。

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
WIN7以下创建cocos2d-x3.0+lua项目发布时间:2022-07-22
下一篇:
redislua脚本(优势)Redis支持LUA脚本的主要优势发布时间:2022-07-22
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap