【2】Quick-Cocos2d-x3.3Coinflip示例分析之MenuScene、MoreGamesScene

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