quick-cocos2d-x游戏开发【6】——制作自定义效果按钮菜单

前面提到的是基本的菜单使用,还是很容易的,不过我们在商业产品中,经常看到的按钮都是非常好看,不光光是图片做得精美,而且动画效果也很棒。Candy Crash都玩过吧,看它们那个按钮,真的像果冻一样,效果确实很赞,所以我们也来做个,当然不是它那个效果,而且点击之后有一个抖动的效果。像这样,



好了,开始做个吧,我这个也是搬了一下coinflip中的按钮代码,算是学习一下。

创建一个views文件夹,里面创建一个MyButton.lua文件,这个就是我们的自定义按钮类了。实现的原理比较简单,在ui.newImageMenuItem的table参数中,有图片,回调函数等参数,所以我们的做法就是在传入这些参数之后,我们在内部修改一些东西就可以了。等于quick给图片按钮封装了一次,我们自己再封装一下。

[html] view plain copy
  1. localMyButton={}
  2. functionMyButton.new(params)
  3. localbutton=nil
  4. button=ui.newImageMenuItem(params)
  5. returnbutton
  6. end
  7. returnMyButton

这就封装了一下quick中的ui.newImageMenuItem,下面做的就是把params的参数捕获,处理我们的效果之后再传给ui.newImageMenuItem中的参数。

    functionMyButton.new(params)
  1. locallistener=params.listener
  2. params.listener=function(tag)
  3. --dothings
  4. listener(tag)
  5. button=ui.newImageMenuItem(params)
  6. returnbutton
  7. end

上面这段代码中,我们将传入的回调函数先用listener变量保存起来,然后在listener参数中处理一些事情,最后记得在里面调用之前传入的回调函数即可。所以现在还没添加效果代码,为了后面大家能看得更清楚些。


接下来,我们就来添加一下之前展示的效果了。

    localfunctionzoom1(offset,time,onComplete)
  1. localx,y=button:getPosition()
  2. localsize=button:getContentSize()
  3. localscaleX=button:getScaleX()*(size.width+offset)/size.width
  4. localscaleY=button:getScaleY()*(size.height-offset)/size.height
  5. transition.moveTo(button,{y=y-offset,time=time})
  6. transition.scaleTo(button,{
  7. scaleX=scaleX,
  8. scaleY=scaleY,
  9. time=time,248)"> onComplete=onComplete,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> })
  10. end
  11. localfunctionzoom2(offset,248)"> transition.moveTo(button,{y=y+offset,time=time/2})
  12. transition.scaleTo(button,{
  13. scaleX=1.0,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> scaleY=1.0,248)"> time=time,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> onComplete=onComplete,248)"> })
  14. button:getParent():setEnabled(false)--先关闭父类menu的功能
  15. zoom1(40,0.08,function()
  16. zoom2(40,0.09,function()
  17. zoom1(20,0.10,248)"> zoom2(20,0.11,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> button:getParent():setEnabled(true)
  18. listener(tag)
  19. end)
  20. end)
  21. end

zoom1和zoom2是两个效果函数,主要是move和scale两个动作,在做效果之前,首先关闭父类的menu功能,这样防止在这个menu item还没做完动作又被玩家点上别的按钮上了,执行一系列的缩放效果之后,再开启menu功能,最后执行之前的回调函数,这样一个动画按钮就新鲜出炉了。


赶紧放到menu中测试一下,

    localButton=import("..views.MyButton")--导入Button
  1. localMyScene=class("MyScene",function()
  2. returndisplay.newScene("myscene")
  3. functionMyScene:ctor()
  4. localbutton=Button.new({
  5. image="icon.png",248)"> listener=function()
  6. print("click")
  7. end,
  8. x=display.cx,248)"> y=display.cy
  9. localmenu=ui.newMenu({button})
  10. self:addChild(menu)
  11. returnMyScene

这样就可以添加上去了,还可以和quick封装的其他按钮一起放在menu管家中。

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

相关文章

    本文实践自 RayWenderlich、Ali Hafizji 的文章《...
Cocos-code-ide使用入门学习地点:杭州滨江邮箱:appdevzw@1...
第一次開始用手游引擎挺激动!!!进入正题。下载资源1:从C...
    Cocos2d-x是一款强大的基于OpenGLES的跨平台游戏开发...
1.  来源 QuickV3sample项目中的2048样例游戏,以及最近《...
   Cocos2d-x3.x已经支持使用CMake来进行构建了,这里尝试...