quick-cocos2d-x遊戲開發【6】——製作自定義效果按鈕菜單

前面提到的是基本的菜單使用，還是很容易的，不過我們在商業產品中，經常看到的按鈕都是非常好看，不光光是圖片做得精美，而且動畫效果也很棒。Candy Crash都玩過吧，看它們那個按鈕，真的像果凍一樣，效果確實很贊，所以我們也來做個，當然不是它那個效果，而且點擊之後有一個抖動的效果。像這樣，

好了，開始做個吧，我這個也是搬了一下coinflip中的按鈕代碼，算是學習一下。

創建一個views文件夾，裏面創建一個MyButton.lua文件，這個就是我們的自定義按鈕類了。實現的原理比較簡單，在ui.newImageMenuItem的table參數中，有圖片，回調函數等參數，所以我們的做法就是在傳入這些參數之後，我們在內部修改一些東西就可以了。等於quick給圖片按鈕封裝了一次，我們自己再封裝一下。

local MyButton = {}

function MyButton.new(params)
	local button = nil

	button = ui.newImageMenuItem(params)
	return button

end

return MyButton

這就封裝了一下quick中的ui.newImageMenuItem，下面做的就是把params的參數捕獲，處理我們的效果之後再傳給ui.newImageMenuItem中的參數。

function MyButton.new(params)
	local button = nil
	local listener = params.listener

	params.listener = function (tag)
                --do things
       		listener(tag)
    
    	end

	button = ui.newImageMenuItem(params)
	return button

end

上面這段代碼中，我們將傳入的回調函數先用listener變量保存起來，然後在listener參數中處理一些事情，最後記得在裏面調用之前傳入的回調函數即可。所以現在還沒添加效果代碼，爲了後面大家能看得更清楚些。

接下來，我們就來添加一下之前展示的效果了。

params.listener = function (tag)
        local function zoom1(offset, time, onComplete)
            local x, y = button:getPosition()
            local size = button:getContentSize()

            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()

            transition.moveTo(button, {y = y + offset, time = time / 2})
            transition.scaleTo(button, {
                scaleX     = 1.0,
                scaleY     = 1.0,
                time       = time,
                onComplete = onComplete,
            })
        end

        button:getParent():setEnabled(false)  --先關閉父類menu的功能

        zoom1(40, 0.08, function()
            zoom2(40, 0.09, function()
                zoom1(20, 0.10, function()
                    zoom2(20, 0.11, function()
                        button:getParent():setEnabled(true)
                        listener(tag)
                    end)
                end)
            end)
        end)
end

zoom1和zoom2是兩個效果函數，主要是move和scale兩個動作，在做效果之前，首先關閉父類的menu功能，這樣防止在這個menu item還沒做完動作又被玩家點上別的按鈕上了，執行一系列的縮放效果之後，再開啓menu功能，最後執行之前的回調函數，這樣一個動畫按鈕就新鮮出爐了。

趕緊放到menu中測試一下，

local Button = import("..views.MyButton") --導入Button

local MyScene = class("MyScene", function ()
	return display.newScene("myscene")
end)

function MyScene:ctor()
	local button = Button.new({
		image = "icon.png",
		listener = function ()
			print("click")
		end,
		x = display.cx,
		y = display.cy

	})
	
	local menu = ui.newMenu({button})
	self:addChild(menu)

end

return MyScene

這樣就可以添加上去了，還可以和quick封裝的其他按鈕一起放在menu管家中。

好了，大家都可以自己做個喜歡的效果了。