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管家中。

好了,大家都可以自己做个喜欢的效果了。



你可能感兴趣的:(cocos2d-x,quick-cocos2d-x)