1、第一个场景MenuScene
以下代码来自Quikc的Demo,注释摘自:
http://www.cocoachina.com/bbs/read.php?tid=234098
--类似于C++的加载头文件,该处用到了views目录下的AbBar和BubbleButton两个类
local AdBar = import("..views.AdBar")
local BubbleButton = import("..views.BubbleButton")
--class方法有两个参数,第一个参数是类名,第二个参数可以通过两种形式传入
--一种是传入一个函数,一种是传入一个Quick的类,或者Lua对象
--当传入函数时,新创建的类会以传入的函数作为构造函数,当传入的是一个对象时,会以传入的对象为父类派生下来。
local MenuScene = class("MenuScene", function()
return display.newScene("MenuScene")
end)
--ctor()函数相当于构造函数,或者init()函数,执行new函数即跳转到ctor()中
--在ctor()中初始化该场景的界面布局
function MenuScene:ctor()
--1、背景的添加
--在Quick中使用图片以#开头,表示是从SpriteFrameCache中读取,反之直接从文件目录下读取
self.bg = display.newSprite("#MenuSceneBg.png", display.cx, display.cy)
self:addChild(self.bg)
--2、信息条的添加
self.adBar = AdBar.new()
self:addChild(self.adBar)
--3、更多游戏按钮的添加
self.moreGamesButton = BubbleButton.new({
image = "#MenuSceneMoreGamesButton.png",
--声音文件的使用,GAME_SFX在config.lua定义
sound = GAME_SFX.tapButton,
prepare = function()
audio.playSound(GAME_SFX.tapButton)
self.moreGamesButton:setButtonEnabled(false)
end,
listener = function()
--进入更多游戏场景,在MyApp中定义该方法
app:enterMoreGamesScene()
end,
})
:align(display.CENTER, display.left + 150, display.bottom + 300)
:addTo(self)
--4、开始按钮
self.startButton = BubbleButton.new({
image = "#MenuSceneStartButton.png",
sound = GAME_SFX.tapButton,
prepare = function()
audio.playSound(GAME_SFX.tapButton)--播放音效
self.startButton:setButtonEnabled(false)--先关闭按钮点击功能,防止玩家在按钮动作未响应完成时点击其他按钮
end,
listener = function()
--进入选关场景,在MyApp中定义该方法
app:enterChooseLevelScene()
end,
})
:align(display.CENTER, display.right - 150, display.bottom + 300)
:addTo(self)--添加到场景中
end
function MenuScene:onEnter()
end
return MenuScene
display.width和display.height表示屏幕宽度
display.cx和display.cy表示屏幕的x轴中间位置和y轴中间位置
display.left和display.right表示屏幕的最左边和最右边(x轴坐标为0和display.width的点)
display.top和display.bottom表示屏幕的顶部和底部(y轴坐标为0和display.height的点)
display.CENTER、display.LEFT_TOP、display.CENTER_TOP等分别表示node的锚点位置。
2、AdBar.lua
--信息条,最下面的信息
--对Sprite精灵二次封装
--align:锚点,x左边,y坐标
local AdBar = {}
--二次封装的好处:1、外部调用方便。2、代码复用
function AdBar.new()
local sprite = display.newSprite("#AdBar.png")
sprite:align(display.BOTTOM_CENTER, display.cx, display.bottom)
return sprite
end
return AdBar
3、BubbleButton.lua
local BubbleButton = {}
-- create bubble button
--在MenuScene.lua的使用时,传入一张lua表,参数1是一张图片,参数2是一个音频文件,参数3和4都是一个方法
--new(params),创建Button,对传入的参数进行捕获。
function BubbleButton.new(params)
--2、事先保存传入的回调函数
local listener = params.listener
local button -- pre-reference
--3、重新定义传入的回调函数listener
params.listener = function(tag)
if params.prepare then
params.prepare()--加载音频
end
--按钮动作
local function zoom1(offset, time, onComplete)
local x, y = button:getPosition()
local size = button:getContentSize()
size.width = 200
size.height = 200
--设置X和Y方向的放大比例
local scaleX = button:getScaleX() * (size.width + offset) / size.width
local scaleY = button:getScaleY() * (size.height - offset) / size.height
--移动按钮
transition.moveTo(button, {y = y - offset, time = time})
--缩放按钮
transition.scaleTo(button, {
scaleX = scaleX,
scaleY = scaleY,
time = time,
onComplete = onComplete,
})
end
--同样的按钮动作
local function zoom2(offset, time, onComplete)
local x, y = button:getPosition()
local size = button:getContentSize()
size.width = 200
size.height = 200
transition.moveTo(button, {y = y + offset, time = time / 2})
transition.scaleTo(button, {
scaleX = 1.0,
scaleY = 1.0,
time = time,
onComplete = onComplete,
})
end
--防止按钮动作还没完成又被玩家点击
button:setButtonEnabled(false)
--执行多个动作混合
zoom1(40, 0.08, function()
zoom2(40, 0.09, function()
zoom1(20, 0.10, function()
zoom2(20, 0.11, function()
button:setButtonEnabled(true)--执行完后,在此开启按钮的触摸功能
listener(tag)--执行原先的listener的方法,进入不同的场景当中
end)
end)
end)
end)
end
--1、创建Cocos2dx的UI控件Button对象
button = cc.ui.UIPushButton.new({normal = params.image})
--4、按钮回调重新定义的listener函数,即第三步的内容
button:onButtonClicked(function(tag)
params.listener(tag)
end)
--返回Button对象
return button
end
分析入下:
1、MenuScene中创建BuddleButton对象,传入参数1:图片,参数2:音频文件,参数3:跳转场景函数,参数4:动作监听函数
2、事先保存原来的listener函数,因为后面会重写该函数用来监听按钮的点击,并在该函数的最后再调用原来传入的listener函数来跳到下一场景中。
3、重写listener函数,实现按钮的动作特效,并调用原listener函数,跳转到下一界面。
4、按钮监听,执行listener函数。
4、MoreGamesScene.lua
--外部文件导入
local AdBar = import("..views.AdBar")
--创建一个名为MoreGamesScene的场景类
local MoreGamesScene = class("MoreGamesScene", function()
return display.newScene("MoreGamesScene")
end)
--创建成功后执行该函数
function MoreGamesScene:ctor()
--1、添加背景
self.bg = display.newSprite("#MenuSceneBg.png", display.cx, display.cy)
self:addChild(self.bg)
--2、添加信息条
self.adBar = AdBar.new()
self:addChild(self.adBar)
--3、添加返回按钮
cc.ui.UIPushButton.new("#BackButton.png")
:align(display.CENTER, display.right - 100, display.bottom + 120)
:onButtonClicked(function()
--返回菜单界面
app:enterMenuScene()
end)
:addTo(self)
end
return MoreGamesScene
注释已经很详细了,此处不再分析
下一节介绍ChooseLevelScene.lua