我所理解Cocos2d-x 3.6（Lua)：初识MVC

文章来自http://www.cocos.com/doc/tutorial/show?id=2922 

最近的游戏项目中使用了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.AppBase

function MyApp:onCreate()
    math.randomseed(os.time())
end

return 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 view
end

-- 选择UI，即是view
function 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()
end

return 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)
end

return 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)
end

return 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 self
end

• 加载虫子

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 self
end

• 绑定事件

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

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