cocos2d js 3.2 技能冷却按钮的简单实现

前端之家收集整理的这篇文章主要介绍了cocos2d js 3.2 技能冷却按钮的简单实现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一个简单的技能冷却按钮的实现

  1. var CoolButton = cc.Node.extend({ // 需要做成Node 否则会无法addchild
  2. callback : null,// 点击后的回调
  3. coolInterval : null,// 动画时间
  4. progressCooling : null,// 进度条
  5. sprNormal : null,sprStencil : null,menuBtn : null,ctor : function(resNormal,resPressed,resStencil,coolInterval,callback) {
  6. this._super();
  7. this.callback = callback;
  8. this.coolInterval = coolInterval;
  9. // menu item
  10. var btnItem = new cc.MenuItemImage(
  11. resNormal,this.onBtnClick,this);
  12.  
  13. // menu 默认在画面中间
  14. this.menuBtn = new cc.Menu(btnItem);
  15. this.menuBtn.attr({
  16. x : 0,y : 0
  17. });
  18. this.addChild(this.menuBtn,0);
  19. // 图片覆盖在按钮上 造成无法点击的假象
  20. this.sprNormal = new cc.Sprite(resNormal);
  21. this.sprNormal.attr({
  22. x : 0,y : 0
  23. });
  24. this.addChild(this.sprNormal,1);
  25. this.sprStencil = new cc.Sprite(resStencil);
  26. this.sprStencil.attr({
  27. x : 0,y : 0
  28. });
  29. this.addChild(this.sprStencil,2);
  30. this.progressCooling = new cc.ProgressTimer(this.sprNormal);
  31. this.progressCooling.setType(cc.ProgressTimer.TYPE_RADIAL);
  32. this.progressCooling.setPercentage(0); // 回复到0
  33. this.progressCooling.attr({
  34. x : 0,y : 0
  35. });
  36. this.addChild(this.progressCooling,5);
  37. this.progressCooling.setVisible(false);
  38. this.sprNormal.setVisible(false);
  39. this.sprStencil.setVisible(false);
  40. },onBtnClick : function() {
  41. // 设置按钮不可按
  42. this.menuBtn.setVisible(false);
  43. // 开始倒计时
  44. this.progressCooling.setVisible(true);
  45. this.sprNormal.setVisible(true);
  46. this.sprStencil.setVisible(true);
  47. this.progressCooling.runAction(cc.sequence(cc.progressTo(this.coolInterval,100),cc.callFunc(this.coolEndCallback,this)));
  48. // 调用回调
  49. this.runAction(cc.callFunc(this.callback,this));
  50. },coolEndCallback : function() {
  51. this.menuBtn.setVisible(true);
  52. this.progressCooling.setVisible(false);
  53. this.progressCooling.setPercentage(0); // 回复到0
  54. this.sprNormal.setVisible(false);
  55. this.sprStencil.setVisible(false);
  56. }
  57. });


调用示例:

  1. var btn = new CoolButton(res.SkillNormal_png,res.SkillPressed_png,res.SkillStencil_png,4,this.skill);

参数依次为:

普通状态图片资源,按下状态图片资源,遮罩层图片资源,冷却时间,按钮按下回调

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