UI系统-版本1
UI系统-版本1
梦想游戏人 发表于11个月前
UI系统-版本1
  • 发表于 11个月前
  • 阅读 35
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

cocos2dx 3.10版本提供了 cocos studio 界面导出到lua,还提供了一套基本的MVC框架。

再次基础上改进代码,实现以下功能

1.无需手动填写 RESOURCE_BINDING 的内容,

2.Button 自动根据ui名字绑定到 函数名,比如 btnClose,的单击会被绑定到函数 ui_btnCloseClicked,这样,只需要在cocostudio重命名,然后lua在脚本添加函数ui_btnCloseClicked 即可。

3.ui的元素自动绑定到table成员,比如有个txtTips,lua脚本,里面使用直接self.ui.txtTips:setString("11");,方便快速开发

 

eg:添加一个新按钮流程

cocostudio 添加一个按钮名字为btnNew,导出资源为lua格式

MainScene.lua添加函数 ui_btnNewClicked ,即为点击事件回调

 

重构后的代码

MainScene.lua


local t = class("MainScene", cc.load("mvc").ViewBase)

t.RESOURCE_FILENAME = "res/MainScene.lua"
t.RESOURCE_BINDING =
{
    -- ["Button_1"]={["varname"]="Button_1",["events"]={{["event"]="touch",["method"]="onBtnTouch"}}},
    --  ["Text_1"] = {["varname"] = "txt_info"},
    -- ["Panel"] = {["varname"] = "Panel"},
};

function t:onCreate()
    printf("resource node = %s", tostring(self:getResourceNode()))
end

function t:ui_btnCloseClicked()
    print("  close");
end

function t:ui_btnSendClicked()
    print("  send");
    self.counter =(self.counter and self.counter + 1) or 0;
    self.ui.txtInfo:setString("12344 " .. self.counter);
end

function t:ui_Panel_Panel2_btnShowClicked()
    print("  pp show");
end

function t:ui_Panel_btnShowClicked()
    print("show   " .. self.counter);
end

return t

 

ViewBase.lua


function ViewBase:ctor(app, name)
    self:enableNodeEvents()
    self.app_ = app
    self.name_ = name

    -- check CSB resource file
    local res = rawget(self.class, "RESOURCE_FILENAME")
    if res then
        self:createResoueceNode(res)
    end

    local binding = rawget(self.class, "RESOURCE_BINDING")
    if res and binding then
        self:createResoueceBinding(binding)
    end

    if self.onCreate then self:onCreate() end
    self.ui = { };
    self.ui.root = self.resourceNode_;
    self:autoBind(self.resourceNode_);
end

function ViewBase:getFullParentName(node)
    local parent = "";
    if node and node ~= self.ui.root then
        local tmp = node;
        while tmp:getParent() ~= self.ui.root do
            parent = tmp:getParent():getName() .. "_" .. parent;
            tmp = tmp:getParent();
        end
    end
    return parent;
end

function ViewBase:autoBind(node)
    for _, v in pairs(node:getChildren()) do
        print(v:getName());
        local node_name = v:getName();

        if string.find(node_name, "btn") then
            -- bind button
            v:onTouch( function(e)
                if e.name == "ended" then
                    local name = self:getFullParentName(v) .. node_name .. "Clicked";
                    local cb = self["ui_" .. name];
                    if cb then
                        cb(self);
                    else
                    end

                end
            end );
        end
        self.ui[self:getFullParentName(v) .. node_name] = v;
        -- bind var
        self:autoBind(v);
        -- bind child
    end
end

 

 

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 34
博文 400
码字总数 115331
×
梦想游戏人
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: