quick-cocos2d-x里的MVC

前端之家收集整理的这篇文章主要介绍了quick-cocos2d-x里的MVC前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

标题有点大。内容有点水哈。最近app上架,空闲时间比较多,于是开始重构代码。发现重构是件很好玩的事情,可以把以前看过的设计模式实验一番。可惜水平有点浅,所以高手就回避吧。

看过一本书,叫《cocos2d-x高级开发教程-制作自己的捕鱼达人》。里面有个观点是,scene应该是MVC里面的control层。后来想了想还是挺有道理的,这几天就实践了一把。其实cocos2d-x有自己的图形界面工具,但是实际的做法很简单,我也懒得去学(也可能是我闭门造车哈)。quick里面的MVC 还是很简单的,scene来处理业务逻辑,UI可以用数据驱动。

首先将生成UI的数据写到lua table中,格式如下:

local firstLogin = {
    class = "CCNode",name = "root",childrens = {
        {
            name = "loginMenu",class = "CCMenu",items = {
                {name = "loginBg",class = "ImageMenuItem",options = {
                        image = {class = "CCSprite9Scale",file = "res/ui030_1_2.png",size = CCSize(275,75)},imageSelected = {class = "CCSprite9Scale",file = "res/ui030_1_8.png",tag = 11,pos = CCPoint(172,display.height - 408)
                    }
                },{name = "registBg",tag = 13,pos = CCPoint(467,},tag = 1112
        },{
            name="label1",class="UILabel",options={text="登录",size=30,color=ccc3(255,255,255)},pivot="center",x=172,y=display.height - 410,tag=10
        }
    },tag = 44
}

return firstLogin
当然,你也可以不用这么写,毕竟不用cocos2d自带的UI生成工具就是为了发挥自主性,只要你觉得容易解析,数据格式怎么定义都无所谓。

然后去解析数据,这里用了一下工厂模式,将数据传入工厂,工厂负责解析数据,最后交由具体的车间去生产。由于层级不是固定的,存在子结点与父结点的关系。所以工厂最后用递归来写一下。生成结点代码如下(这里要注意一下,child:addTo(parent)根据tag是检索不到child的,要用tag检索就要使用parent:addChild())。

function NodeInflater:inflate_luaTable(param,parentNode)
    local rootNode = param

    -- 创建自己
    local node = self:createNodeFromTag(rootNode.class,rootNode)

    -- 孩子
    self:rInflate(rootNode,node)

    -- 加到父节点上去
    parentNode:addChild(node)
    return node
end

至于车间怎么设计,看个人爱好了。我是这么做的
function  NodeFactory:onCreateNode(jsonNode)
    local uiNode
    local className = jsonNode.class

    -- 判断控件的类型
    if "UIImage" == className then
        -- sprite
        uiNode = self:onCreateNode_UIImage(jsonNode)
    elseif "CCNode" == className then
        -- node
        uiNode = self:onCreateNode_CCNode(jsonNode)
    elseif "UIPushButton" == className then
        -- UIPushButton
        uiNode = self:onCreateNode_UIPushButton(jsonNode)
    elseif "UILabel" == className then
        -- label
        uiNode = self:onCreateNode_UILabel(jsonNode)
    elseif "UiSlider" == className then
        --slider
        uiNode = self:onCreateNode_UiSlider(jsonNode)
    elseif "CCProgressTimer" == className then
        --progresstimer
        uiNode = self:onCreateNode_CCProgressTimer(jsonNode)
    elseif "CCMenu" == className then
        -- CCMenu
        uiNode = self:onCreateNode_CCMenu(jsonNode)
    elseif "CCSprite" == className then
        -- CCSprite
        uiNode = self:onCreateNode_CCSprite(jsonNode)
    elseif "CCSprite9Scale" == className then
        uiNode = self:onCreateNode_CCSprite9Scale(jsonNode)
    end
    -- 应用
    self:applyNodeAttributesByJsonNode(uiNode,jsonNode)

    return uiNode
end

这里注意一下,为了在scene中检索到具体的子结点,既可以将每个结点的索引存到父节点的table中(在quick中一切数据结构皆为table),也可以用tag进行检索,我这里采用的是使用tag进行检索。

最后是在scene中生成UI并添加逻辑(以menu为例),

local function loginSelected(tag)
end

    -- 生成first login
    local fileName = "app.data.FirstLoginData"
    require("app.Utils.NodeInflater"):easyRootInflater():inflate(fileName,layer)

    -- 为menu添加触摸事件
    local menuItems = layer:getChildByTag(44):getChildByTag(1112):getChildren()
    for i=1,menuItems:count() do
        menuItems:objectAtIndex(i-1):registerScriptTapHandler(loginSelected)
    end
这样子就可以完成UI,与逻辑分离了。水平有限,是在抱歉。 原文链接:https://www.f2er.com/cocos2dx/345409.html

猜你在找的Cocos2d-x相关文章