cocos 技能冷却按钮实现

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

[javascript]  view plain copy

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

调用示例：

[javascript]  view plain copy

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