1 /**************************************************************************** 2 Copyright (c) 2008-2010 Ricardo Quesada 3 Copyright (c) 2011-2012 cocos2d-x.org 4 Copyright (c) 2013-2014 Chukong Technologies Inc. 5 Copyright (c) 2010 Lam Pham 6 7 http://www.cocos2d-x.org 8 9 Permission is hereby granted, free of charge, to any person obtaining a copy 10 of this software and associated documentation files (the "Software"), to deal 11 in the Software without restriction, including without limitation the rights 12 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 13 copies of the Software, and to permit persons to whom the Software is 14 furnished to do so, subject to the following conditions: 15 16 The above copyright notice and this permission notice shall be included in 17 all copies or substantial portions of the Software. 18 19 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 20 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 21 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 22 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 23 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 24 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 25 THE SOFTWARE. 26 ****************************************************************************/ 27 28 /** 29 * cc.Progresstimer is a subclass of cc.Node. <br/> 30 * It renders the inner sprite according to the percentage.<br/> 31 * The progress can be Radial, Horizontal or vertical. 32 * @class 33 * @extends cc.Node 34 * 35 * @property {cc.Point} midPoint <p>- Midpoint is used to modify the progress start position.<br/> 36 * If you're using radials type then the midpoint changes the center point<br/> 37 * If you're using bar type the the midpoint changes the bar growth<br/> 38 * it expands from the center but clamps to the sprites edge so:<br/> 39 * you want a left to right then set the midpoint all the way to cc.p(0,y)<br/> 40 * you want a right to left then set the midpoint all the way to cc.p(1,y)<br/> 41 * you want a bottom to top then set the midpoint all the way to cc.p(x,0)<br/> 42 * you want a top to bottom then set the midpoint all the way to cc.p(x,1)</p> 43 * @property {cc.Point} barChangeRate - This allows the bar type to move the component at a specific rate. 44 * @property {enum} type - Type of the progress timer: cc.ProgressTimer.TYPE_RADIAL|cc.ProgressTimer.TYPE_BAR. 45 * @property {Number} percentage - Percentage to change progress, from 0 to 100. 46 * @property {cc.Sprite} sprite - The sprite to show the progress percentage. 47 * @property {Boolean} reverseDir - Indicate whether the direction is reversed. 48 * 49 */ 50 cc.ProgressTimer = cc.Node.extend(/** @lends cc.ProgressTimer# */{ 51 _type:null, 52 _percentage:0.0, 53 _sprite:null, 54 55 _midPoint:null, 56 _barChangeRate:null, 57 _reverseDirection:false, 58 _className:"ProgressTimer", 59 60 /** 61 * constructor of cc.cc.ProgressTimer 62 * @function 63 * @param {cc.Sprite} sprite 64 */ 65 ctor: function(sprite){ 66 cc.Node.prototype.ctor.call(this); 67 68 this._type = cc.ProgressTimer.TYPE_RADIAL; 69 this._percentage = 0.0; 70 this._midPoint = cc.p(0, 0); 71 this._barChangeRate = cc.p(0, 0); 72 this._reverseDirection = false; 73 this._sprite = null; 74 75 sprite && this.initWithSprite(sprite); 76 }, 77 78 onEnter: function () { 79 this._super(); 80 if (cc._renderType === cc.game.RENDER_TYPE_WEBGL) { 81 this._renderCmd.initCmd(); 82 this._renderCmd._updateProgress(); 83 } 84 }, 85 86 cleanup: function () { 87 if (cc._renderType === cc.game.RENDER_TYPE_WEBGL) { 88 this._renderCmd.releaseData(); 89 } 90 this._super(); 91 }, 92 93 /** 94 * Midpoint is used to modify the progress start position. 95 * If you're using radials type then the midpoint changes the center point 96 * If you're using bar type the the midpoint changes the bar growth 97 * it expands from the center but clamps to the sprites edge so: 98 * you want a left to right then set the midpoint all the way to cc.p(0,y) 99 * you want a right to left then set the midpoint all the way to cc.p(1,y) 100 * you want a bottom to top then set the midpoint all the way to cc.p(x,0) 101 * you want a top to bottom then set the midpoint all the way to cc.p(x,1) 102 * @return {cc.Point} 103 */ 104 getMidpoint:function () { 105 return cc.p(this._midPoint.x, this._midPoint.y); 106 }, 107 108 /** 109 * Midpoint setter 110 * @param {cc.Point} mpoint 111 */ 112 setMidpoint:function (mpoint) { 113 this._midPoint = cc.pClamp(mpoint, cc.p(0, 0), cc.p(1, 1)); 114 }, 115 116 /** 117 * This allows the bar type to move the component at a specific rate 118 * Set the component to 0 to make sure it stays at 100%. 119 * For example you want a left to right bar but not have the height stay 100% 120 * Set the rate to be cc.p(0,1); and set the midpoint to = cc.p(0,.5f); 121 * @return {cc.Point} 122 */ 123 getBarChangeRate:function () { 124 return cc.p(this._barChangeRate.x, this._barChangeRate.y); 125 }, 126 127 /** 128 * @param {cc.Point} barChangeRate 129 */ 130 setBarChangeRate:function (barChangeRate) { 131 this._barChangeRate = cc.pClamp(barChangeRate, cc.p(0, 0), cc.p(1, 1)); 132 }, 133 134 /** 135 * Change the percentage to change progress 136 * @return {cc.ProgressTimer.TYPE_RADIAL|cc.ProgressTimer.TYPE_BAR} 137 */ 138 getType:function () { 139 return this._type; 140 }, 141 142 /** 143 * Percentages are from 0 to 100 144 * @return {Number} 145 */ 146 getPercentage:function () { 147 return this._percentage; 148 }, 149 150 /** 151 * The image to show the progress percentage, retain 152 * @return {cc.Sprite} 153 */ 154 getSprite:function () { 155 return this._sprite; 156 }, 157 158 /** 159 * from 0-100 160 * @param {Number} percentage 161 */ 162 setPercentage:function (percentage) { 163 if (this._percentage !== percentage) { 164 this._percentage = cc.clampf(percentage, 0, 100); 165 this._renderCmd._updateProgress(); 166 } 167 }, 168 /** 169 * only use for jsbinding 170 * @param bValue 171 */ 172 setOpacityModifyRGB:function (bValue) { 173 }, 174 /** 175 * only use for jsbinding 176 * @returns {boolean} 177 */ 178 isOpacityModifyRGB:function () { 179 return false; 180 }, 181 /** 182 * return if reverse direction 183 * @returns {boolean} 184 */ 185 isReverseDirection:function () { 186 return this._reverseDirection; 187 }, 188 189 /** 190 * set color of sprite 191 * @param {cc.Color} color 192 */ 193 setColor:function (color) { 194 this._sprite.color = color; 195 this._renderCmd.setDirtyFlag(cc.Node._dirtyFlags.colorDirty); 196 }, 197 198 /** 199 * set opacity of sprite 200 * @param {Number} opacity 201 */ 202 setOpacity:function (opacity) { 203 this._sprite.opacity = opacity; 204 //this._renderCmd._updateColor(); 205 this._renderCmd.setDirtyFlag(cc.Node._dirtyFlags.opacityDirty); 206 }, 207 208 /** 209 * return color of sprite 210 * @return {cc.Color} 211 */ 212 getColor:function () { 213 return this._sprite.color; 214 }, 215 216 /** 217 * return Opacity of sprite 218 * @return {Number} 219 */ 220 getOpacity:function () { 221 return this._sprite.opacity; 222 }, 223 224 /** 225 * set reverse cc.ProgressTimer 226 * @function 227 * @param {Boolean} reverse 228 */ 229 setReverseProgress: function(reverse){ 230 if (this._reverseDirection !== reverse){ 231 this._reverseDirection = reverse; 232 this._renderCmd.resetVertexData(); 233 } 234 }, 235 236 /** 237 * set sprite for cc.ProgressTimer 238 * @function 239 * @param {cc.Sprite} sprite 240 */ 241 setSprite: function(sprite){ 242 if (this._sprite !== sprite) { 243 this._sprite = sprite; 244 if(sprite) { 245 this.setContentSize(sprite.width, sprite.height); 246 sprite.ignoreAnchorPointForPosition(true); 247 } 248 else { 249 this.setContentSize(0,0); 250 } 251 this._renderCmd.resetVertexData(); 252 } 253 }, 254 255 /** 256 * set Progress type of cc.ProgressTimer 257 * @function 258 * @param {cc.ProgressTimer.TYPE_RADIAL|cc.ProgressTimer.TYPE_BAR} type 259 */ 260 setType: function(type){ 261 if (type !== this._type){ 262 this._type = type; 263 this._renderCmd.resetVertexData(); 264 } 265 }, 266 267 /** 268 * Reverse Progress setter 269 * @function 270 * @param {Boolean} reverse 271 */ 272 setReverseDirection: function(reverse){ 273 if (this._reverseDirection !== reverse){ 274 this._reverseDirection = reverse; 275 this._renderCmd.resetVertexData(); 276 } 277 }, 278 279 /** 280 * Initializes a progress timer with the sprite as the shape the timer goes through 281 * @function 282 * @param {cc.Sprite} sprite 283 * @return {Boolean} 284 */ 285 initWithSprite: function(sprite){ 286 this.percentage = 0; 287 this.setAnchorPoint(0.5,0.5); 288 289 this._type = cc.ProgressTimer.TYPE_RADIAL; 290 this._reverseDirection = false; 291 this.midPoint = cc.p(0.5, 0.5); 292 this.barChangeRate = cc.p(1, 1); 293 this.setSprite(sprite); 294 this._renderCmd.resetVertexData(); 295 return true; 296 }, 297 298 _createRenderCmd: function(){ 299 if(cc._renderType === cc.game.RENDER_TYPE_CANVAS) 300 return new cc.ProgressTimer.CanvasRenderCmd(this); 301 else 302 return new cc.ProgressTimer.WebGLRenderCmd(this); 303 } 304 }); 305 306 // Extended properties 307 var _p = cc.ProgressTimer.prototype; 308 309 /** @expose */ 310 _p.midPoint; 311 cc.defineGetterSetter(_p, "midPoint", _p.getMidpoint, _p.setMidpoint); 312 /** @expose */ 313 _p.barChangeRate; 314 cc.defineGetterSetter(_p, "barChangeRate", _p.getBarChangeRate, _p.setBarChangeRate); 315 /** @expose */ 316 _p.type; 317 cc.defineGetterSetter(_p, "type", _p.getType, _p.setType); 318 /** @expose */ 319 _p.percentage; 320 cc.defineGetterSetter(_p, "percentage", _p.getPercentage, _p.setPercentage); 321 /** @expose */ 322 _p.sprite; 323 cc.defineGetterSetter(_p, "sprite", _p.getSprite, _p.setSprite); 324 /** @expose */ 325 _p.reverseDir; 326 cc.defineGetterSetter(_p, "reverseDir", _p.isReverseDirection, _p.setReverseDirection); 327 328 329 /** 330 * create a progress timer object with image file name that renders the inner sprite according to the percentage 331 * @deprecated since v3.0,please use new cc.ProgressTimer(sprite) instead. 332 * @param {cc.Sprite} sprite 333 * @return {cc.ProgressTimer} 334 */ 335 cc.ProgressTimer.create = function (sprite) { 336 return new cc.ProgressTimer(sprite); 337 }; 338 339 /** 340 * @constant 341 * @type Number 342 */ 343 cc.ProgressTimer.TEXTURE_COORDS_COUNT = 4; 344 345 /** 346 * @constant 347 * @type Number 348 */ 349 cc.ProgressTimer.TEXTURE_COORDS = 0x4b; 350 351 /** 352 * Radial Counter-Clockwise 353 * @type Number 354 * @constant 355 */ 356 cc.ProgressTimer.TYPE_RADIAL = 0; 357 358 /** 359 * Bar 360 * @type Number 361 * @constant 362 */ 363 cc.ProgressTimer.TYPE_BAR = 1; 364