文章来自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。
游戏实例
我创建项目的目录结构：
扫描二维码关注公众号，回复：
148805 查看本文章
在讲解代码时，先介绍下该demo是做什么来的，没错，其实它就是介绍一款《杀虫》游戏，如：
玩法：初始化5个血量，随机生机向爬入洞的蚂蚁或蜘蛛，直到积累进入5个虫子，就结束游戏。
那么怎么实现该游戏呢？请看设计序列图及类图：
序列图：
类图：
具体代码：
新建之后，你首先看到的main.lua启动到MyApp.lua。
|
1
|
require("app.MyApp"):create():run()
|
看MyApp.lua文件：
1、require("app.MyApp")
这里执行的MyApp.lua的代码是：
|
1
2
3
4
5
6
7
|
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()执行后，执行的代码是：
|
1
2
3
|
function MyApp:ctor()
MyApp.super.ctor(self)
end
|
为什么create()了之后会执行MyApp:ctor()？请看function.lua下的function class(classname, super)方法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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()
|
1
2
3
4
|
function AppBase:run(initSceneName)
initSceneName = initSceneName or self.configs_.defaultSceneName
self:enterScene(initSceneName)
end
|
其实：self.configs_.defaultSceneName = “MainScene”，就是进入初始界面。
对于MyApp.lua文件，如果我修改成下面的样子，是不是你就理解了上面所做的事情：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
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
代码较长，就重点介绍几段代码：
帧频刷新
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
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
|
加载虫子
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
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
|
绑定事件
|
1
2
|
-- bind the "event" component
cc.bind(self, "event")
|
通过事件，若游戏结束后，直接跳转PlayScene场景。像击杀虫、扣血等代码就不多介绍，参考下类图，你就明白了，我就不一一列举了。