我所理解cocos2d-x 3.6 lua -- 初识MVC

简单说几句：

    最近的游戏项目中使用了lua脚本来开发，项目中用到了MVC框架. 从cocos2d-x 3.6 创建lua demo, 简单分享一下思路和一些开发中的技巧。

先简单说说MVC，即Model View Controller。

Model(模型)：一般负责数据的处理

View(视图)：一般负责界面的显示

Controller(控制器)：一般负责前端的逻辑处理

比如 :拿一款手机游戏来说，界面UI的显示、布局等就是View负责；点击了按钮，手势的滑动等操作由Controller来处理；游戏中需要的数据资源就交给Model。

游戏实例：

我创建项目的目录结构：

        

    在讲解代码时，先介绍下该demo是做什么来的，没错，其实它就是介绍一款《杀虫》游戏，如：

    玩法：初始化5个血量，随机生机向爬入洞的蚂蚁或蜘蛛，直到积累进入5个虫子，就结束游戏。

    那么怎么实现该游戏呢？请看设计序列图及类图：

序列图：

类图：

具体代码：

新建之后，你首先看到的main.lua启动到MyApp.lua。

require("app.MyApp"):create():run()

看MyApp.lua文件：
1、require("app.MyApp")
这里执行的MyApp.lua的代码是：

local MyApp = class("MyApp", cc.load("mvc").AppBase) -- 继承cc.mvc.AppBasefunction MyApp:onCreate()    math.randomseed(os.time())endreturn MyApp

2、require("app.MyApp").create()
MyApp.create()执行后，执行的代码是：

function MyApp:ctor()    MyApp.super.ctor(self)end

为什么create()了之后会执行MyApp:ctor()？请看function.lua下的function class(classname, super)方法：

cls.new = function(...)        local instance        if cls.__create then            instance = cls.__create(...)        else            instance = {}        end        setmetatableindex(instance, cls)        instance.class = cls        instance:ctor(...)        return instance    end    cls.create = function(_, ...)        return cls.new(...)    end

可以看到，在class的实现方法里面，给每个创建的类声明了一个new()方法，方法里面调用了ctor()构造方法（ctor只是个名字，所以不是有些人认为的create了之后，当然会调用构造方法，lua没有类，只是我们模仿了类）

3.require("app.MyApp").create():run()

function AppBase:run(initSceneName)    initSceneName = initSceneName or self.configs_.defaultSceneName    self:enterScene(initSceneName)end

其实：self.configs_.defaultSceneName = “MainScene”，就是进入初始界面。

对于MyApp.lua文件，如果我修改成下面的样子，是不是你就理解了上面所做的事情：

local AppBase = class("AppBase")-- 初始化调用function AppBase:ctor(configs)    self.configs_ = {        viewsRoot  = "app.views",        modelsRoot = "app.models",        defaultSceneName = "MainScene",    }    for k, v in pairs(configs or {}) do        self.configs_[k] = v    end    if type(self.configs_.viewsRoot) ~= "table" then        self.configs_.viewsRoot = {self.configs_.viewsRoot}    end    if type(self.configs_.modelsRoot) ~= "table" then        self.configs_.modelsRoot = {self.configs_.modelsRoot}    end    if DEBUG > 1 then        dump(self.configs_, "AppBase configs")    end    if CC_SHOW_FPS then        cc.Director:getInstance():setDisplayStats(true)    end    -- event    self:onCreate()end-- 运行场景function AppBase:run(initSceneName)    initSceneName = initSceneName or self.configs_.defaultSceneName    self:enterScene(initSceneName)end-- 选择场景function AppBase:enterScene(sceneName, transition, time, more)    local view = self:createView(sceneName)    view:showWithScene(transition, time, more)    return viewend-- 选择UI，即是viewfunction AppBase:createView(name)    for _, root in ipairs(self.configs_.viewsRoot) do        local packageName = string.format("%s.%s", root, name)        local status, view = xpcall(function()                return require(packageName)            end, function(msg)            if not string.find(msg, string.format("'%s' not found:", packageName)) then                print("load view error: ", msg)            end        end)        local t = type(view)        if status and (t == "table" or t == "userdata") then            return view:create(self, name)        end    end    error(string.format("AppBase:createView() - not found view \"%s\" in search paths \"%s\"",        name, table.concat(self.configs_.viewsRoot, ",")), 0)end-- 创建时调用function AppBase:onCreate()endreturn AppBase

MainScene.lua

local MainScene = class("MainScene", cc.load("mvc").ViewBase)function MainScene:onCreate()    -- add background image    display.newSprite("MainSceneBg.jpg")        :move(display.center)        :addTo(self)    -- add play button    local playButton = cc.MenuItemImage:create("PlayButton.png", "PlayButton.png")        :onClicked(function()            self:getApp():enterScene("PlayScene")   -- 进入游戏界面        end)    cc.Menu:create(playButton)        :move(display.cx, display.cy - 200)        :addTo(self)endreturn MainScene

PlayScene.lua

local PlayScene = class("PlayScene", cc.load("mvc").ViewBase)local GameView = import(".GameView")function PlayScene:onCreate()    -- create game view and add it to stage    self.gameView_ = GameView:create()        :addEventListener(GameView.events.PLAYER_DEAD_EVENT, handler(self, self.onPlayerDead))        :start()        :addTo(self)end-- 游戏结束调用(注意下GameView bind绑定)function PlayScene:onPlayerDead(event)    -- add game over text    local text = string.format("You killed %d bugs", self.gameView_:getKills())    cc.Label:createWithSystemFont(text, "Arial", 96)        :align(display.CENTER, display.center)        :addTo(self)    -- add exit button    local exitButton = cc.MenuItemImage:create("ExitButton.png", "ExitButton.png")        :onClicked(function()            self:getApp():enterScene("MainScene")        end)    cc.Menu:create(exitButton)        :move(display.cx, display.cy - 200)        :addTo(self)endreturn PlayScene

GameView.lua

代码较长，就重点介绍几段代码：

帧频刷新

function GameView:step(dt)    if self.lives_ <= 0 then return end    self.addBugInterval_ = self.addBugInterval_ - dt    if self.addBugInterval_ <= 0 then        self.addBugInterval_ = math.random(GameView.ADD_BUG_INTERVAL_MIN, GameView.ADD_BUG_INTERVAL_MAX)        self:addBug()   -- 随机生成虫子    end    for _, bug in pairs(self.bugs_) do        bug:step(dt)    -- 虫子爬动        if bug:getModel():getDist() <= 0 then            self:bugEnterHole(bug)  -- 进入洞穴        end    end    return selfend

加载虫子

function GameView:addBug()    local bugType = BugBase.BUG_TYPE_ANT    -- 随机选择蚂蚁、蜘蛛    if math.random(1, 2) % 2 == 0 then        bugType = BugBase.BUG_TYPE_SPIDER    end    -- 创建蚂蚁、蜘蛛模型    local bugModel    if bugType == BugBase.BUG_TYPE_ANT then        bugModel = BugAnt:create()    else        bugModel = BugSpider:create()    end    -- 加载虫view选择对应模型    local bug = BugSprite:create(GameView.IMAGE_FILENAMES[bugType], bugModel)        :start(GameView.HOLE_POSITION)        :addTo(self.bugsNode_, GameView.ZORDER_BUG)    self.bugs_[bug] = bug    return selfend

绑定事件

    -- bind the "event" component    cc.bind(self, "event")

通过事件，若游戏结束后，直接跳转PlayScene场景。像击杀虫、扣血等代码就不多介绍，参考下类图，你就明白了，我就不一一列举了。