quick-cocos2d-x游戏开发【6】——制作您自己的自定义效果button菜单
前面提到的主菜单使用,还是很easy的,但我们在商业产品。经常看到button他们人很好,照片不仅就好了,和动画也很不错。Candy Crash都玩过吧,他们看到,button。真的像果冻,效果确实非常值得称赞。因此,我们必须要。这当然不敢大意,后有一个抖动的效果。像这样。
好了,開始做个吧,我这个也是搬了一下coinflip中的button代码,算是学习一下。
创建一个views目录。里面创建一个MyButton.lua文件。这个就是我们的自己定义button类了。实现的原理比較简单,在ui.newImageMenuItem的table參数中。有图片,回调函数等參数。所以我们的做法就是在传入这些參数之后。我们在内部改动一些东西就能够了。等于quick给图片button封装了一次,我们自己再封装一下。
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还没做完动作又被玩家点上别的button上了,运行一系列的缩放效果之后,再开启menu功能,最后运行之前的回调函数,这样一个动画button就新奇出炉了。
赶紧放到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其他套餐button一起menu管家。
好,每个人都可以将自己喜爱的效果。