quick-cocos2d-x里的MVC

看过一本书，叫《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", size = CCSize(275, 75)},                         tag = 11, pos = CCPoint(172, display.height - 408)                     }                 },                 {name = "registBg", 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", size = CCSize(275, 75)},                         tag = 13, pos = CCPoint(467, display.height - 408)                     }                 },             },             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,与逻辑分离了。水平有限，是在抱歉。