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

前端之家收集整理的这篇文章主要介绍了【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,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.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,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,})
        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.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

猜你在找的Cocos2d-x相关文章