diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index 58b375c..e8f8f3e 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -1,150 +1,140 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var math = require('../math'), + Sprite = require('./Sprite'), + RenderTexture = require('../textures/RenderTexture'), + _tempMatrix = new math.Matrix(); /** * The base class for all objects that are rendered on the screen. * This is an abstract class and should not be used on its own rather it should be extended. * - * @class DisplayObject - * @constructor + * @class + * @namespace PIXI */ -PIXI.DisplayObject = function() -{ +function DisplayObject() { /** * The coordinate of the object relative to the local coordinates of the parent. * - * @property position - * @type Point + * @member {Point} */ - this.position = new PIXI.Point(); + this.position = new math.Point(); /** * The scale factor of the object. * - * @property scale - * @type Point + * @member {Point} */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + this.scale = new math.Point(1,1);//{x:1, y:1}; /** * The pivot point of the displayObject that it rotates around * - * @property pivot - * @type Point + * @member {Point} */ - this.pivot = new PIXI.Point(0,0); + this.pivot = new math.Point(0,0); /** * The rotation of the object in radians. * - * @property rotation - * @type Number + * @member {number} */ this.rotation = 0; /** * The opacity of the object. * - * @property alpha - * @type Number + * @member {number} */ this.alpha = 1; /** - * The visibility of the object. + * The visibility of the object. If false the object will not be drawn, and + * the updateTransform function will not be called. * - * @property visible - * @type Boolean + * @member {boolean} */ this.visible = true; /** * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * Setting it is a neat way of optimising the hitTest function that the interactionManager + * will use (as it will not need to hit test all the children) * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon + * @member {Rectangle|Circle|Ellipse|Polygon} */ this.hitArea = null; /** * This is used to indicate if the displayObject should display a mouse hand cursor on rollover * - * @property buttonMode - * @type Boolean + * @member {boolean} */ this.buttonMode = false; /** - * Can this object be rendered + * Can this object be rendered, if false the object will not be drawn but the updateTransform + * methods will still be called. * - * @property renderable - * @type Boolean + * @member {boolean} */ this.renderable = false; /** - * [read-only] The display object container that contains this display object. + * The display object container that contains this display object. * - * @property parent - * @type DisplayObjectContainer + * @member {DisplayObjectContainer} * @readOnly */ this.parent = null; /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * The stage the display object is connected to, or undefined if it is not + * connected to the stage. * - * @property stage - * @type Stage + * @member {Stage} * @readOnly */ this.stage = null; /** - * [read-only] The multiplied alpha of the displayObject + * The multiplied alpha of the displayObject * - * @property worldAlpha - * @type Number + * @member {number} * @readOnly */ this.worldAlpha = 1; /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * Whether or not the object is interactive, do not toggle directly! use + * the `interactive` property * - * @property _interactive - * @type Boolean + * @member {Boolean} * @readOnly * @private */ this._interactive = false; /** - * This is the cursor that will be used when the mouse is over this object. To enable this the element must have interaction = true and buttonMode = true + * This is the cursor that will be used when the mouse is over this object. To enable this + * the element must have interaction = true and buttonMode = true * - * @property defaultCursor - * @type String + * @member {string} * */ this.defaultCursor = 'pointer'; /** - * [read-only] Current transform of the object based on world (parent) factors + * Current transform of the object based on world (parent) factors * - * @property worldTransform - * @type Matrix + * @member {Matrix} * @readOnly * @private */ - this.worldTransform = new PIXI.Matrix(); + this.worldTransform = new math.Matrix(); /** * cached sin rotation and cos rotation * - * @property _sr - * @type Number + * @member {number} * @private */ this._sr = 0; @@ -152,8 +142,7 @@ /** * cached sin rotation and cos rotation * - * @property _cr - * @type Number + * @member {number} * @private */ this._cr = 1; @@ -162,25 +151,22 @@ * The area the filter is applied to like the hitArea this is used as more of an optimisation * rather than figuring out the dimensions of the displayObject each frame you can set this rectangle * - * @property filterArea - * @type Rectangle + * @member {Rectangle} */ - this.filterArea = null;//new PIXI.Rectangle(0,0,1,1); + this.filterArea = null; // new math.Rectangle(0,0,1,1); /** * The original, cached bounds of the object * - * @property _bounds - * @type Rectangle + * @member {Rectangle} * @private */ - this._bounds = new PIXI.Rectangle(0, 0, 1, 1); + this._bounds = new math.Rectangle(0, 0, 1, 1); /** * The most up-to-date bounds of the object * - * @property _currentBounds - * @type Rectangle + * @member {Rectangle} * @private */ this._currentBounds = null; @@ -188,8 +174,7 @@ /** * The original, cached mask of the object * - * @property _currentBounds - * @type Rectangle + * @member {Rectangle} * @private */ this._mask = null; @@ -197,8 +182,7 @@ /** * Cached internal flag. * - * @property _cacheAsBitmap - * @type Boolean + * @member {boolean} * @private */ this._cacheAsBitmap = false; @@ -206,8 +190,7 @@ /** * Cached internal flag. * - * @property _cacheIsDirty - * @type Boolean + * @member {boolean} * @private */ this._cacheIsDirty = false; @@ -216,72 +199,104 @@ /* * MOUSE Callbacks */ - + /** * A callback that is used when the users mouse rolls over the displayObject + * * @method mouseover + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.mouseover = null; /** * A callback that is used when the users mouse leaves the displayObject + * * @method mouseout + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.mouseout = null; //Left button /** * A callback that is used when the users clicks on the displayObject with their mouse's left button + * * @method click + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.click = null; /** * A callback that is used when the user clicks the mouse's left button down over the sprite + * * @method mousedown + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.mousedown = null; /** * A callback that is used when the user releases the mouse's left button that was over the displayObject * for this callback to be fired, the mouse's left button must have been pressed down over the displayObject + * * @method mouseup + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.mouseup = null; /** - * A callback that is used when the user releases the mouse's left button that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, the mouse's left button must have been pressed down over the displayObject + * A callback that is used when the user releases the mouse's left button that was over the displayObject + * but is no longer over the displayObject for this callback to be fired, the mouse's left button must + * have been pressed down over the displayObject + * * @method mouseupoutside + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.mouseupoutside = null; //Right button /** * A callback that is used when the users clicks on the displayObject with their mouse's right button + * * @method rightclick + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.rightclick = null; /** * A callback that is used when the user clicks the mouse's right button down over the sprite + * * @method rightdown + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.rightdown = null; /** * A callback that is used when the user releases the mouse's right button that was over the displayObject * for this callback to be fired the mouse's right button must have been pressed down over the displayObject + * * @method rightup + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.rightup = null; /** - * A callback that is used when the user releases the mouse's right button that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, the mouse's right button must have been pressed down over the displayObject + * A callback that is used when the user releases the mouse's right button that was over the + * displayObject but is no longer over the displayObject for this callback to be fired, the mouse's + * right button must have been pressed down over the displayObject + * * @method rightupoutside + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.rightupoutside = null; /* * TOUCH Callbacks @@ -290,168 +305,215 @@ /** * A callback that is used when the users taps on the sprite with their finger * basically a touch version of click + * * @method tap + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.tap = null; /** * A callback that is used when the user touches over the displayObject + * * @method touchstart + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.touchstart = null; /** * A callback that is used when the user releases a touch over the displayObject + * * @method touchend + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.touchend = null; /** * A callback that is used when the user releases the touch that was over the displayObject * for this callback to be fired, The touch must have started over the sprite + * * @method touchendoutside + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.touchendoutside = null; }; // constructor -PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; +DisplayObject.prototype.constructor = DisplayObject; +module.exports = DisplayObject; -/** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * - * @property interactive - * @type Boolean - * @default false - */ -Object.defineProperty(PIXI.DisplayObject.prototype, 'interactive', { - get: function() { - return this._interactive; - }, - set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; - } -}); - -/** - * [read-only] Indicates if the sprite is globally visible. - * - * @property worldVisible - * @type Boolean - */ -Object.defineProperty(PIXI.DisplayObject.prototype, 'worldVisible', { - get: function() { - var item = this; - - do - { - if(!item.visible)return false; - item = item.parent; +Object.defineProperties(DisplayObject.prototype, { + /** + * The position of the displayObject on the x axis relative to the local coordinates of the parent. + * + * @member {number} + * @memberof DisplayObject# + */ + x: { + get: function () { + return this.position.x; + }, + set: function (value) { + this.position.x = value; } - while(item); - - return true; - } -}); - -/** - * Sets a mask for the displayObject. A mask is an object that limits the visibility of an object to the shape of the mask applied to it. - * In PIXI a regular mask must be a PIXI.Graphics object. This allows for much faster masking in canvas as it utilises shape clipping. - * To remove a mask, set this property to null. - * - * @property mask - * @type Graphics - */ -Object.defineProperty(PIXI.DisplayObject.prototype, 'mask', { - get: function() { - return this._mask; - }, - set: function(value) { - - if(this._mask)this._mask.isMask = false; - this._mask = value; - if(this._mask)this._mask.isMask = true; - } -}); - -/** - * Sets the filters for the displayObject. - * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. - * To remove filters simply set this property to 'null' - * @property filters - * @type Array(Filter) - */ -Object.defineProperty(PIXI.DisplayObject.prototype, 'filters', { - - get: function() { - return this._filters; }, - set: function(value) { + /** + * The position of the displayObject on the y axis relative to the local coordinates of the parent. + * + * @member {number} + * @memberof DisplayObject# + */ + y: { + get: function () { + return this.position.y; + }, + set: function (value) { + this.position.y = value; + } + }, - if(value) - { - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); + /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * + * @member {boolean} + * @default false + * @memberof DisplayObject# + */ + interactive: { + get: function () { + return this._interactive; + }, + set: function (value) { + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage) { + this.stage.dirty = true; + } + } + }, + + /** + * Indicates if the sprite is globally visible. + * + * @member {boolean} + * @readonly + * @memberof DisplayObject# + */ + worldVisible: { + get: function () { + var item = this; + + do { + if (!item.visible) { + return false; } + + item = item.parent; + } while(item); + + return true; + } + }, + + /** + * Sets a mask for the displayObject. A mask is an object that limits the visibility of an object to the shape of the mask applied to it. + * In PIXI a regular mask must be a PIXI.Graphics object. This allows for much faster masking in canvas as it utilises shape clipping. + * To remove a mask, set this property to null. + * + * @member {Graphics} + * @memberof DisplayObject# + */ + mask: { + get: function () { + return this._mask; + }, + set: function (value) { + if (this._mask) { + this._mask.isMask = false; } - // TODO change this as it is legacy - this._filterBlock = {target:this, filterPasses:passes}; + this._mask = value; + + if (this._mask) { + this._mask.isMask = true; + } } - - this._filters = value; - } -}); - -/** - * Set if this display object is cached as a bitmap. - * This basically takes a snap shot of the display object as it is at that moment. It can provide a performance benefit for complex static displayObjects. - * To remove simply set this property to 'null' - * @property cacheAsBitmap - * @type Boolean - */ -Object.defineProperty(PIXI.DisplayObject.prototype, 'cacheAsBitmap', { - - get: function() { - return this._cacheAsBitmap; }, - set: function(value) { + /** + * Sets the filters for the displayObject. + * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. + * To remove filters simply set this property to 'null' + * + * @member {Filter[]} + * @memberof DisplayObject# + */ + filters: { + get: function () { + return this._filters; + }, + set: function (value) { + if (value) { + // now put all the passes in one place.. + var passes = []; - if(this._cacheAsBitmap === value)return; + for (var i = 0; i < value.length; i++) { + var filterPasses = value[i].passes; - if(value) - { - this._generateCachedSprite(); + for (var j = 0; j < filterPasses.length; j++) { + passes.push(filterPasses[j]); + } + } + + // TODO change this as it is legacy + this._filterBlock = { target: this, filterPasses: passes }; + } + + this._filters = value; } - else - { - this._destroyCachedSprite(); - } + }, - this._cacheAsBitmap = value; + /** + * Set if this display object is cached as a bitmap. + * This basically takes a snap shot of the display object as it is at that moment. It can provide a performance benefit for complex static displayObjects. + * To remove simply set this property to 'null' + * + * @member {boolean} + * @memberof DisplayObject# + */ + cacheAsBitmap: { + get: function () { + return this._cacheAsBitmap; + }, + set: function (value) { + if (this._cacheAsBitmap === value) { + return; + } + + if (value) { + this._generateCachedSprite(); + } + else { + this._destroyCachedSprite(); + } + + this._cacheAsBitmap = value; + } } }); /* * Updates the object transform for rendering * - * @method updateTransform * @private */ -PIXI.DisplayObject.prototype.updateTransform = function() -{ +DisplayObject.prototype.updateTransform = function () { // create some matrix refs for easy access var pt = this.parent.worldTransform; var wt = this.worldTransform; @@ -460,7 +522,7 @@ var a, b, c, d, tx, ty; // so if rotation is between 0 then we can simplify the multiplication process.. - if(this.rotation % PIXI.PI_2) + if(this.rotation % math.PI_2) { // check to see if the rotation is the same as the previous render. This means we only need to use sin and cos when rotation actually changes if(this.rotation !== this.rotationCache) @@ -477,7 +539,7 @@ d = this._cr * this.scale.y; tx = this.position.x; ty = this.position.y; - + // check for pivot.. not often used so geared towards that fact! if(this.pivot.x || this.pivot.y) { @@ -493,7 +555,7 @@ wt.tx = tx * pt.a + ty * pt.c + pt.tx; wt.ty = tx * pt.b + ty * pt.d + pt.ty; - + } else { @@ -517,64 +579,58 @@ }; // performance increase to avoid using call.. (10x faster) -PIXI.DisplayObject.prototype.displayObjectUpdateTransform = PIXI.DisplayObject.prototype.updateTransform; +DisplayObject.prototype.displayObjectUpdateTransform = DisplayObject.prototype.updateTransform; /** * Retrieves the bounds of the displayObject as a rectangle object * - * @method getBounds * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -PIXI.DisplayObject.prototype.getBounds = function(matrix) -{ - matrix = matrix;//just to get passed js hinting (and preserve inheritance) - return PIXI.EmptyRectangle; +DisplayObject.prototype.getBounds = function (matrix) { + return math.Rectangle.EMPTY; }; /** * Retrieves the local bounds of the displayObject as a rectangle object * - * @method getLocalBounds * @return {Rectangle} the rectangular bounding area */ -PIXI.DisplayObject.prototype.getLocalBounds = function() -{ - return this.getBounds(PIXI.identityMatrix);///PIXI.EmptyRectangle(); +DisplayObject.prototype.getLocalBounds = function () { + return this.getBounds(math.Matrix.IDENTITY); }; /** * Sets the object's stage reference, the stage this object is connected to * - * @method setStageReference * @param stage {Stage} the stage that the object will have as its current stage reference */ -PIXI.DisplayObject.prototype.setStageReference = function(stage) -{ +DisplayObject.prototype.setStageReference = function (stage) { this.stage = stage; - if(this._interactive)this.stage.dirty = true; + + if (this._interactive) { + this.stage.dirty = true; + } }; /** * Useful function that returns a texture of the displayObject object that can then be used to create sprites * This can be quite useful if your displayObject is static / complicated and needs to be reused multiple times. * - * @method generateTexture * @param resolution {Number} The resolution of the texture being generated * @param scaleMode {Number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values * @param renderer {CanvasRenderer|WebGLRenderer} The renderer used to generate the texture. * @return {Texture} a texture of the graphics object */ -PIXI.DisplayObject.prototype.generateTexture = function(resolution, scaleMode, renderer) -{ +DisplayObject.prototype.generateTexture = function (resolution, scaleMode, renderer) { var bounds = this.getLocalBounds(); - var renderTexture = new PIXI.RenderTexture(bounds.width | 0, bounds.height | 0, renderer, scaleMode, resolution); - - PIXI.DisplayObject._tempMatrix.tx = -bounds.x; - PIXI.DisplayObject._tempMatrix.ty = -bounds.y; - - renderTexture.render(this, PIXI.DisplayObject._tempMatrix); + var renderTexture = new RenderTexture(bounds.width | 0, bounds.height | 0, renderer, scaleMode, resolution); + + _tempMatrix.tx = -bounds.x; + _tempMatrix.ty = -bounds.y; + + renderTexture.render(this, _tempMatrix); return renderTexture; }; @@ -582,22 +638,18 @@ /** * Generates and updates the cached sprite for this object. * - * @method updateCache */ -PIXI.DisplayObject.prototype.updateCache = function() -{ +DisplayObject.prototype.updateCache = function () { this._generateCachedSprite(); }; /** * Calculates the global position of the display object * - * @method toGlobal * @param position {Point} The world origin to calculate from * @return {Point} A point object representing the position of this object */ -PIXI.DisplayObject.prototype.toGlobal = function(position) -{ +DisplayObject.prototype.toGlobal = function (position) { // don't need to u[date the lot this.displayObjectUpdateTransform(); return this.worldTransform.apply(position); @@ -606,20 +658,16 @@ /** * Calculates the local position of the display object relative to another point * - * @method toLocal * @param position {Point} The world origin to calculate from * @param [from] {DisplayObject} The DisplayObject to calculate the global position from * @return {Point} A point object representing the position of this object */ -PIXI.DisplayObject.prototype.toLocal = function(position, from) -{ - // - if (from) - { +DisplayObject.prototype.toLocal = function (position, from) { + if (from) { position = from.toGlobal(position); } - // don't need to u[date the lot + // don't need to update the lot this.displayObjectUpdateTransform(); return this.worldTransform.applyInverse(position); }; @@ -627,60 +675,52 @@ /** * Internal method. * - * @method _renderCachedSprite * @param renderSession {Object} The render session * @private */ -PIXI.DisplayObject.prototype._renderCachedSprite = function(renderSession) -{ +DisplayObject.prototype._renderCachedSprite = function (renderSession) { this._cachedSprite.worldAlpha = this.worldAlpha; - if(renderSession.gl) - { - PIXI.Sprite.prototype._renderWebGL.call(this._cachedSprite, renderSession); + if (renderSession.gl) { + Sprite.prototype._renderWebGL.call(this._cachedSprite, renderSession); } - else - { - PIXI.Sprite.prototype._renderCanvas.call(this._cachedSprite, renderSession); + else { + Sprite.prototype._renderCanvas.call(this._cachedSprite, renderSession); } }; /** * Internal method. * - * @method _generateCachedSprite * @private */ -PIXI.DisplayObject.prototype._generateCachedSprite = function() -{ +DisplayObject.prototype._generateCachedSprite = function () { this._cacheAsBitmap = false; var bounds = this.getLocalBounds(); - if(!this._cachedSprite) - { - var renderTexture = new PIXI.RenderTexture(bounds.width | 0, bounds.height | 0);//, renderSession.renderer); + if (!this._cachedSprite) { + var renderTexture = new RenderTexture(bounds.width | 0, bounds.height | 0); //, renderSession.renderer); - this._cachedSprite = new PIXI.Sprite(renderTexture); + this._cachedSprite = new Sprite(renderTexture); this._cachedSprite.worldTransform = this.worldTransform; } - else - { + else { this._cachedSprite.texture.resize(bounds.width | 0, bounds.height | 0); } - //REMOVE filter! + // REMOVE filter! var tempFilters = this._filters; this._filters = null; this._cachedSprite.filters = tempFilters; - PIXI.DisplayObject._tempMatrix.tx = -bounds.x; - PIXI.DisplayObject._tempMatrix.ty = -bounds.y; - - this._cachedSprite.texture.render(this, PIXI.DisplayObject._tempMatrix, true); + _tempMatrix.tx = -bounds.x; + _tempMatrix.ty = -bounds.y; - this._cachedSprite.anchor.x = -( bounds.x / bounds.width ); - this._cachedSprite.anchor.y = -( bounds.y / bounds.height ); + this._cachedSprite.texture.render(this, _tempMatrix, true); + + this._cachedSprite.anchor.x = -(bounds.x / bounds.width); + this._cachedSprite.anchor.y = -(bounds.y / bounds.height); this._filters = tempFilters; @@ -688,14 +728,14 @@ }; /** -* Destroys the cached sprite. -* -* @method _destroyCachedSprite -* @private -*/ -PIXI.DisplayObject.prototype._destroyCachedSprite = function() -{ - if(!this._cachedSprite)return; + * Destroys the cached sprite. + * + * @private + */ +DisplayObject.prototype._destroyCachedSprite = function () { + if (!this._cachedSprite) { + return; + } this._cachedSprite.texture.destroy(true); @@ -704,62 +744,21 @@ }; /** -* Renders the object using the WebGL renderer -* -* @method _renderWebGL -* @param renderSession {RenderSession} -* @private -*/ -PIXI.DisplayObject.prototype._renderWebGL = function(renderSession) -{ + * Renders the object using the WebGL renderer + * + * @param renderSession {RenderSession} + * @private + */ +DisplayObject.prototype._renderWebGL = function (renderSession) { // OVERWRITE; - // this line is just here to pass jshinting :) - renderSession = renderSession; }; /** -* Renders the object using the Canvas renderer -* -* @method _renderCanvas -* @param renderSession {RenderSession} -* @private -*/ -PIXI.DisplayObject.prototype._renderCanvas = function(renderSession) -{ + * Renders the object using the Canvas renderer + * + * @param renderSession {RenderSession} + * @private + */ +DisplayObject.prototype._renderCanvas = function (renderSession) { // OVERWRITE; - // this line is just here to pass jshinting :) - renderSession = renderSession; }; - - -PIXI.DisplayObject._tempMatrix = new PIXI.Matrix(); - -/** - * The position of the displayObject on the x axis relative to the local coordinates of the parent. - * - * @property x - * @type Number - */ -Object.defineProperty(PIXI.DisplayObject.prototype, 'x', { - get: function() { - return this.position.x; - }, - set: function(value) { - this.position.x = value; - } -}); - -/** - * The position of the displayObject on the y axis relative to the local coordinates of the parent. - * - * @property y - * @type Number - */ -Object.defineProperty(PIXI.DisplayObject.prototype, 'y', { - get: function() { - return this.position.y; - }, - set: function(value) { - this.position.y = value; - } -}); diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index 58b375c..e8f8f3e 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -1,150 +1,140 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var math = require('../math'), + Sprite = require('./Sprite'), + RenderTexture = require('../textures/RenderTexture'), + _tempMatrix = new math.Matrix(); /** * The base class for all objects that are rendered on the screen. * This is an abstract class and should not be used on its own rather it should be extended. * - * @class DisplayObject - * @constructor + * @class + * @namespace PIXI */ -PIXI.DisplayObject = function() -{ +function DisplayObject() { /** * The coordinate of the object relative to the local coordinates of the parent. * - * @property position - * @type Point + * @member {Point} */ - this.position = new PIXI.Point(); + this.position = new math.Point(); /** * The scale factor of the object. * - * @property scale - * @type Point + * @member {Point} */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + this.scale = new math.Point(1,1);//{x:1, y:1}; /** * The pivot point of the displayObject that it rotates around * - * @property pivot - * @type Point + * @member {Point} */ - this.pivot = new PIXI.Point(0,0); + this.pivot = new math.Point(0,0); /** * The rotation of the object in radians. * - * @property rotation - * @type Number + * @member {number} */ this.rotation = 0; /** * The opacity of the object. * - * @property alpha - * @type Number + * @member {number} */ this.alpha = 1; /** - * The visibility of the object. + * The visibility of the object. If false the object will not be drawn, and + * the updateTransform function will not be called. * - * @property visible - * @type Boolean + * @member {boolean} */ this.visible = true; /** * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * Setting it is a neat way of optimising the hitTest function that the interactionManager + * will use (as it will not need to hit test all the children) * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon + * @member {Rectangle|Circle|Ellipse|Polygon} */ this.hitArea = null; /** * This is used to indicate if the displayObject should display a mouse hand cursor on rollover * - * @property buttonMode - * @type Boolean + * @member {boolean} */ this.buttonMode = false; /** - * Can this object be rendered + * Can this object be rendered, if false the object will not be drawn but the updateTransform + * methods will still be called. * - * @property renderable - * @type Boolean + * @member {boolean} */ this.renderable = false; /** - * [read-only] The display object container that contains this display object. + * The display object container that contains this display object. * - * @property parent - * @type DisplayObjectContainer + * @member {DisplayObjectContainer} * @readOnly */ this.parent = null; /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * The stage the display object is connected to, or undefined if it is not + * connected to the stage. * - * @property stage - * @type Stage + * @member {Stage} * @readOnly */ this.stage = null; /** - * [read-only] The multiplied alpha of the displayObject + * The multiplied alpha of the displayObject * - * @property worldAlpha - * @type Number + * @member {number} * @readOnly */ this.worldAlpha = 1; /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * Whether or not the object is interactive, do not toggle directly! use + * the `interactive` property * - * @property _interactive - * @type Boolean + * @member {Boolean} * @readOnly * @private */ this._interactive = false; /** - * This is the cursor that will be used when the mouse is over this object. To enable this the element must have interaction = true and buttonMode = true + * This is the cursor that will be used when the mouse is over this object. To enable this + * the element must have interaction = true and buttonMode = true * - * @property defaultCursor - * @type String + * @member {string} * */ this.defaultCursor = 'pointer'; /** - * [read-only] Current transform of the object based on world (parent) factors + * Current transform of the object based on world (parent) factors * - * @property worldTransform - * @type Matrix + * @member {Matrix} * @readOnly * @private */ - this.worldTransform = new PIXI.Matrix(); + this.worldTransform = new math.Matrix(); /** * cached sin rotation and cos rotation * - * @property _sr - * @type Number + * @member {number} * @private */ this._sr = 0; @@ -152,8 +142,7 @@ /** * cached sin rotation and cos rotation * - * @property _cr - * @type Number + * @member {number} * @private */ this._cr = 1; @@ -162,25 +151,22 @@ * The area the filter is applied to like the hitArea this is used as more of an optimisation * rather than figuring out the dimensions of the displayObject each frame you can set this rectangle * - * @property filterArea - * @type Rectangle + * @member {Rectangle} */ - this.filterArea = null;//new PIXI.Rectangle(0,0,1,1); + this.filterArea = null; // new math.Rectangle(0,0,1,1); /** * The original, cached bounds of the object * - * @property _bounds - * @type Rectangle + * @member {Rectangle} * @private */ - this._bounds = new PIXI.Rectangle(0, 0, 1, 1); + this._bounds = new math.Rectangle(0, 0, 1, 1); /** * The most up-to-date bounds of the object * - * @property _currentBounds - * @type Rectangle + * @member {Rectangle} * @private */ this._currentBounds = null; @@ -188,8 +174,7 @@ /** * The original, cached mask of the object * - * @property _currentBounds - * @type Rectangle + * @member {Rectangle} * @private */ this._mask = null; @@ -197,8 +182,7 @@ /** * Cached internal flag. * - * @property _cacheAsBitmap - * @type Boolean + * @member {boolean} * @private */ this._cacheAsBitmap = false; @@ -206,8 +190,7 @@ /** * Cached internal flag. * - * @property _cacheIsDirty - * @type Boolean + * @member {boolean} * @private */ this._cacheIsDirty = false; @@ -216,72 +199,104 @@ /* * MOUSE Callbacks */ - + /** * A callback that is used when the users mouse rolls over the displayObject + * * @method mouseover + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.mouseover = null; /** * A callback that is used when the users mouse leaves the displayObject + * * @method mouseout + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.mouseout = null; //Left button /** * A callback that is used when the users clicks on the displayObject with their mouse's left button + * * @method click + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.click = null; /** * A callback that is used when the user clicks the mouse's left button down over the sprite + * * @method mousedown + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.mousedown = null; /** * A callback that is used when the user releases the mouse's left button that was over the displayObject * for this callback to be fired, the mouse's left button must have been pressed down over the displayObject + * * @method mouseup + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.mouseup = null; /** - * A callback that is used when the user releases the mouse's left button that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, the mouse's left button must have been pressed down over the displayObject + * A callback that is used when the user releases the mouse's left button that was over the displayObject + * but is no longer over the displayObject for this callback to be fired, the mouse's left button must + * have been pressed down over the displayObject + * * @method mouseupoutside + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.mouseupoutside = null; //Right button /** * A callback that is used when the users clicks on the displayObject with their mouse's right button + * * @method rightclick + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.rightclick = null; /** * A callback that is used when the user clicks the mouse's right button down over the sprite + * * @method rightdown + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.rightdown = null; /** * A callback that is used when the user releases the mouse's right button that was over the displayObject * for this callback to be fired the mouse's right button must have been pressed down over the displayObject + * * @method rightup + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.rightup = null; /** - * A callback that is used when the user releases the mouse's right button that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, the mouse's right button must have been pressed down over the displayObject + * A callback that is used when the user releases the mouse's right button that was over the + * displayObject but is no longer over the displayObject for this callback to be fired, the mouse's + * right button must have been pressed down over the displayObject + * * @method rightupoutside + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.rightupoutside = null; /* * TOUCH Callbacks @@ -290,168 +305,215 @@ /** * A callback that is used when the users taps on the sprite with their finger * basically a touch version of click + * * @method tap + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.tap = null; /** * A callback that is used when the user touches over the displayObject + * * @method touchstart + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.touchstart = null; /** * A callback that is used when the user releases a touch over the displayObject + * * @method touchend + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.touchend = null; /** * A callback that is used when the user releases the touch that was over the displayObject * for this callback to be fired, The touch must have started over the sprite + * * @method touchendoutside + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.touchendoutside = null; }; // constructor -PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; +DisplayObject.prototype.constructor = DisplayObject; +module.exports = DisplayObject; -/** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * - * @property interactive - * @type Boolean - * @default false - */ -Object.defineProperty(PIXI.DisplayObject.prototype, 'interactive', { - get: function() { - return this._interactive; - }, - set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; - } -}); - -/** - * [read-only] Indicates if the sprite is globally visible. - * - * @property worldVisible - * @type Boolean - */ -Object.defineProperty(PIXI.DisplayObject.prototype, 'worldVisible', { - get: function() { - var item = this; - - do - { - if(!item.visible)return false; - item = item.parent; +Object.defineProperties(DisplayObject.prototype, { + /** + * The position of the displayObject on the x axis relative to the local coordinates of the parent. + * + * @member {number} + * @memberof DisplayObject# + */ + x: { + get: function () { + return this.position.x; + }, + set: function (value) { + this.position.x = value; } - while(item); - - return true; - } -}); - -/** - * Sets a mask for the displayObject. A mask is an object that limits the visibility of an object to the shape of the mask applied to it. - * In PIXI a regular mask must be a PIXI.Graphics object. This allows for much faster masking in canvas as it utilises shape clipping. - * To remove a mask, set this property to null. - * - * @property mask - * @type Graphics - */ -Object.defineProperty(PIXI.DisplayObject.prototype, 'mask', { - get: function() { - return this._mask; - }, - set: function(value) { - - if(this._mask)this._mask.isMask = false; - this._mask = value; - if(this._mask)this._mask.isMask = true; - } -}); - -/** - * Sets the filters for the displayObject. - * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. - * To remove filters simply set this property to 'null' - * @property filters - * @type Array(Filter) - */ -Object.defineProperty(PIXI.DisplayObject.prototype, 'filters', { - - get: function() { - return this._filters; }, - set: function(value) { + /** + * The position of the displayObject on the y axis relative to the local coordinates of the parent. + * + * @member {number} + * @memberof DisplayObject# + */ + y: { + get: function () { + return this.position.y; + }, + set: function (value) { + this.position.y = value; + } + }, - if(value) - { - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); + /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * + * @member {boolean} + * @default false + * @memberof DisplayObject# + */ + interactive: { + get: function () { + return this._interactive; + }, + set: function (value) { + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage) { + this.stage.dirty = true; + } + } + }, + + /** + * Indicates if the sprite is globally visible. + * + * @member {boolean} + * @readonly + * @memberof DisplayObject# + */ + worldVisible: { + get: function () { + var item = this; + + do { + if (!item.visible) { + return false; } + + item = item.parent; + } while(item); + + return true; + } + }, + + /** + * Sets a mask for the displayObject. A mask is an object that limits the visibility of an object to the shape of the mask applied to it. + * In PIXI a regular mask must be a PIXI.Graphics object. This allows for much faster masking in canvas as it utilises shape clipping. + * To remove a mask, set this property to null. + * + * @member {Graphics} + * @memberof DisplayObject# + */ + mask: { + get: function () { + return this._mask; + }, + set: function (value) { + if (this._mask) { + this._mask.isMask = false; } - // TODO change this as it is legacy - this._filterBlock = {target:this, filterPasses:passes}; + this._mask = value; + + if (this._mask) { + this._mask.isMask = true; + } } - - this._filters = value; - } -}); - -/** - * Set if this display object is cached as a bitmap. - * This basically takes a snap shot of the display object as it is at that moment. It can provide a performance benefit for complex static displayObjects. - * To remove simply set this property to 'null' - * @property cacheAsBitmap - * @type Boolean - */ -Object.defineProperty(PIXI.DisplayObject.prototype, 'cacheAsBitmap', { - - get: function() { - return this._cacheAsBitmap; }, - set: function(value) { + /** + * Sets the filters for the displayObject. + * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. + * To remove filters simply set this property to 'null' + * + * @member {Filter[]} + * @memberof DisplayObject# + */ + filters: { + get: function () { + return this._filters; + }, + set: function (value) { + if (value) { + // now put all the passes in one place.. + var passes = []; - if(this._cacheAsBitmap === value)return; + for (var i = 0; i < value.length; i++) { + var filterPasses = value[i].passes; - if(value) - { - this._generateCachedSprite(); + for (var j = 0; j < filterPasses.length; j++) { + passes.push(filterPasses[j]); + } + } + + // TODO change this as it is legacy + this._filterBlock = { target: this, filterPasses: passes }; + } + + this._filters = value; } - else - { - this._destroyCachedSprite(); - } + }, - this._cacheAsBitmap = value; + /** + * Set if this display object is cached as a bitmap. + * This basically takes a snap shot of the display object as it is at that moment. It can provide a performance benefit for complex static displayObjects. + * To remove simply set this property to 'null' + * + * @member {boolean} + * @memberof DisplayObject# + */ + cacheAsBitmap: { + get: function () { + return this._cacheAsBitmap; + }, + set: function (value) { + if (this._cacheAsBitmap === value) { + return; + } + + if (value) { + this._generateCachedSprite(); + } + else { + this._destroyCachedSprite(); + } + + this._cacheAsBitmap = value; + } } }); /* * Updates the object transform for rendering * - * @method updateTransform * @private */ -PIXI.DisplayObject.prototype.updateTransform = function() -{ +DisplayObject.prototype.updateTransform = function () { // create some matrix refs for easy access var pt = this.parent.worldTransform; var wt = this.worldTransform; @@ -460,7 +522,7 @@ var a, b, c, d, tx, ty; // so if rotation is between 0 then we can simplify the multiplication process.. - if(this.rotation % PIXI.PI_2) + if(this.rotation % math.PI_2) { // check to see if the rotation is the same as the previous render. This means we only need to use sin and cos when rotation actually changes if(this.rotation !== this.rotationCache) @@ -477,7 +539,7 @@ d = this._cr * this.scale.y; tx = this.position.x; ty = this.position.y; - + // check for pivot.. not often used so geared towards that fact! if(this.pivot.x || this.pivot.y) { @@ -493,7 +555,7 @@ wt.tx = tx * pt.a + ty * pt.c + pt.tx; wt.ty = tx * pt.b + ty * pt.d + pt.ty; - + } else { @@ -517,64 +579,58 @@ }; // performance increase to avoid using call.. (10x faster) -PIXI.DisplayObject.prototype.displayObjectUpdateTransform = PIXI.DisplayObject.prototype.updateTransform; +DisplayObject.prototype.displayObjectUpdateTransform = DisplayObject.prototype.updateTransform; /** * Retrieves the bounds of the displayObject as a rectangle object * - * @method getBounds * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -PIXI.DisplayObject.prototype.getBounds = function(matrix) -{ - matrix = matrix;//just to get passed js hinting (and preserve inheritance) - return PIXI.EmptyRectangle; +DisplayObject.prototype.getBounds = function (matrix) { + return math.Rectangle.EMPTY; }; /** * Retrieves the local bounds of the displayObject as a rectangle object * - * @method getLocalBounds * @return {Rectangle} the rectangular bounding area */ -PIXI.DisplayObject.prototype.getLocalBounds = function() -{ - return this.getBounds(PIXI.identityMatrix);///PIXI.EmptyRectangle(); +DisplayObject.prototype.getLocalBounds = function () { + return this.getBounds(math.Matrix.IDENTITY); }; /** * Sets the object's stage reference, the stage this object is connected to * - * @method setStageReference * @param stage {Stage} the stage that the object will have as its current stage reference */ -PIXI.DisplayObject.prototype.setStageReference = function(stage) -{ +DisplayObject.prototype.setStageReference = function (stage) { this.stage = stage; - if(this._interactive)this.stage.dirty = true; + + if (this._interactive) { + this.stage.dirty = true; + } }; /** * Useful function that returns a texture of the displayObject object that can then be used to create sprites * This can be quite useful if your displayObject is static / complicated and needs to be reused multiple times. * - * @method generateTexture * @param resolution {Number} The resolution of the texture being generated * @param scaleMode {Number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values * @param renderer {CanvasRenderer|WebGLRenderer} The renderer used to generate the texture. * @return {Texture} a texture of the graphics object */ -PIXI.DisplayObject.prototype.generateTexture = function(resolution, scaleMode, renderer) -{ +DisplayObject.prototype.generateTexture = function (resolution, scaleMode, renderer) { var bounds = this.getLocalBounds(); - var renderTexture = new PIXI.RenderTexture(bounds.width | 0, bounds.height | 0, renderer, scaleMode, resolution); - - PIXI.DisplayObject._tempMatrix.tx = -bounds.x; - PIXI.DisplayObject._tempMatrix.ty = -bounds.y; - - renderTexture.render(this, PIXI.DisplayObject._tempMatrix); + var renderTexture = new RenderTexture(bounds.width | 0, bounds.height | 0, renderer, scaleMode, resolution); + + _tempMatrix.tx = -bounds.x; + _tempMatrix.ty = -bounds.y; + + renderTexture.render(this, _tempMatrix); return renderTexture; }; @@ -582,22 +638,18 @@ /** * Generates and updates the cached sprite for this object. * - * @method updateCache */ -PIXI.DisplayObject.prototype.updateCache = function() -{ +DisplayObject.prototype.updateCache = function () { this._generateCachedSprite(); }; /** * Calculates the global position of the display object * - * @method toGlobal * @param position {Point} The world origin to calculate from * @return {Point} A point object representing the position of this object */ -PIXI.DisplayObject.prototype.toGlobal = function(position) -{ +DisplayObject.prototype.toGlobal = function (position) { // don't need to u[date the lot this.displayObjectUpdateTransform(); return this.worldTransform.apply(position); @@ -606,20 +658,16 @@ /** * Calculates the local position of the display object relative to another point * - * @method toLocal * @param position {Point} The world origin to calculate from * @param [from] {DisplayObject} The DisplayObject to calculate the global position from * @return {Point} A point object representing the position of this object */ -PIXI.DisplayObject.prototype.toLocal = function(position, from) -{ - // - if (from) - { +DisplayObject.prototype.toLocal = function (position, from) { + if (from) { position = from.toGlobal(position); } - // don't need to u[date the lot + // don't need to update the lot this.displayObjectUpdateTransform(); return this.worldTransform.applyInverse(position); }; @@ -627,60 +675,52 @@ /** * Internal method. * - * @method _renderCachedSprite * @param renderSession {Object} The render session * @private */ -PIXI.DisplayObject.prototype._renderCachedSprite = function(renderSession) -{ +DisplayObject.prototype._renderCachedSprite = function (renderSession) { this._cachedSprite.worldAlpha = this.worldAlpha; - if(renderSession.gl) - { - PIXI.Sprite.prototype._renderWebGL.call(this._cachedSprite, renderSession); + if (renderSession.gl) { + Sprite.prototype._renderWebGL.call(this._cachedSprite, renderSession); } - else - { - PIXI.Sprite.prototype._renderCanvas.call(this._cachedSprite, renderSession); + else { + Sprite.prototype._renderCanvas.call(this._cachedSprite, renderSession); } }; /** * Internal method. * - * @method _generateCachedSprite * @private */ -PIXI.DisplayObject.prototype._generateCachedSprite = function() -{ +DisplayObject.prototype._generateCachedSprite = function () { this._cacheAsBitmap = false; var bounds = this.getLocalBounds(); - if(!this._cachedSprite) - { - var renderTexture = new PIXI.RenderTexture(bounds.width | 0, bounds.height | 0);//, renderSession.renderer); + if (!this._cachedSprite) { + var renderTexture = new RenderTexture(bounds.width | 0, bounds.height | 0); //, renderSession.renderer); - this._cachedSprite = new PIXI.Sprite(renderTexture); + this._cachedSprite = new Sprite(renderTexture); this._cachedSprite.worldTransform = this.worldTransform; } - else - { + else { this._cachedSprite.texture.resize(bounds.width | 0, bounds.height | 0); } - //REMOVE filter! + // REMOVE filter! var tempFilters = this._filters; this._filters = null; this._cachedSprite.filters = tempFilters; - PIXI.DisplayObject._tempMatrix.tx = -bounds.x; - PIXI.DisplayObject._tempMatrix.ty = -bounds.y; - - this._cachedSprite.texture.render(this, PIXI.DisplayObject._tempMatrix, true); + _tempMatrix.tx = -bounds.x; + _tempMatrix.ty = -bounds.y; - this._cachedSprite.anchor.x = -( bounds.x / bounds.width ); - this._cachedSprite.anchor.y = -( bounds.y / bounds.height ); + this._cachedSprite.texture.render(this, _tempMatrix, true); + + this._cachedSprite.anchor.x = -(bounds.x / bounds.width); + this._cachedSprite.anchor.y = -(bounds.y / bounds.height); this._filters = tempFilters; @@ -688,14 +728,14 @@ }; /** -* Destroys the cached sprite. -* -* @method _destroyCachedSprite -* @private -*/ -PIXI.DisplayObject.prototype._destroyCachedSprite = function() -{ - if(!this._cachedSprite)return; + * Destroys the cached sprite. + * + * @private + */ +DisplayObject.prototype._destroyCachedSprite = function () { + if (!this._cachedSprite) { + return; + } this._cachedSprite.texture.destroy(true); @@ -704,62 +744,21 @@ }; /** -* Renders the object using the WebGL renderer -* -* @method _renderWebGL -* @param renderSession {RenderSession} -* @private -*/ -PIXI.DisplayObject.prototype._renderWebGL = function(renderSession) -{ + * Renders the object using the WebGL renderer + * + * @param renderSession {RenderSession} + * @private + */ +DisplayObject.prototype._renderWebGL = function (renderSession) { // OVERWRITE; - // this line is just here to pass jshinting :) - renderSession = renderSession; }; /** -* Renders the object using the Canvas renderer -* -* @method _renderCanvas -* @param renderSession {RenderSession} -* @private -*/ -PIXI.DisplayObject.prototype._renderCanvas = function(renderSession) -{ + * Renders the object using the Canvas renderer + * + * @param renderSession {RenderSession} + * @private + */ +DisplayObject.prototype._renderCanvas = function (renderSession) { // OVERWRITE; - // this line is just here to pass jshinting :) - renderSession = renderSession; }; - - -PIXI.DisplayObject._tempMatrix = new PIXI.Matrix(); - -/** - * The position of the displayObject on the x axis relative to the local coordinates of the parent. - * - * @property x - * @type Number - */ -Object.defineProperty(PIXI.DisplayObject.prototype, 'x', { - get: function() { - return this.position.x; - }, - set: function(value) { - this.position.x = value; - } -}); - -/** - * The position of the displayObject on the y axis relative to the local coordinates of the parent. - * - * @property y - * @type Number - */ -Object.defineProperty(PIXI.DisplayObject.prototype, 'y', { - get: function() { - return this.position.y; - }, - set: function(value) { - this.position.y = value; - } -}); diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index e3ccc20..c2fedae 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -1,118 +1,104 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var math = require('../math'), + DisplayObject = require('./DisplayObject'); /** * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class * @extends DisplayObject - * @constructor + * @namespace PIXI */ -PIXI.DisplayObjectContainer = function() -{ - PIXI.DisplayObject.call( this ); +function DisplayObjectContainer() { + DisplayObject.call( this ); /** - * [read-only] The array of children of this container. + * The array of children of this container. * - * @property children - * @type Array(DisplayObject) - * @readOnly + * @member {DisplayObject[]} + * @readonly */ this.children = []; - - // fast access to update transform.. - }; // constructor -PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); -PIXI.DisplayObjectContainer.prototype.constructor = PIXI.DisplayObjectContainer; +DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); +DisplayObjectContainer.prototype.constructor = DisplayObjectContainer; +module.exports = DisplayObjectContainer; + +Object.defineProperties(DisplayObjectContainer.prototype, { + /** + * The width of the displayObjectContainer, setting this will actually modify the scale to achieve the value set + * + * @member {number} + * @memberof DisplayObjectContainer# + */ + width: { + get: function () { + return this.scale.x * this.getLocalBounds().width; + }, + set: function (value) { + + var width = this.getLocalBounds().width; + + if(width !== 0) { + this.scale.x = value / width; + } + else { + this.scale.x = 1; + } -/** - * The width of the displayObjectContainer, setting this will actually modify the scale to achieve the value set - * - * @property width - * @type Number - */ -Object.defineProperty(PIXI.DisplayObjectContainer.prototype, 'width', { - get: function() { - return this.scale.x * this.getLocalBounds().width; + this._width = value; + } }, - set: function(value) { - - var width = this.getLocalBounds().width; - if(width !== 0) - { - this.scale.x = value / width; + /** + * The height of the displayObjectContainer, setting this will actually modify the scale to achieve the value set + * + * @member {number} + * @memberof DisplayObjectContainer# + */ + height: { + get: function () { + return this.scale.y * this.getLocalBounds().height; + }, + set: function (value) { + + var height = this.getLocalBounds().height; + + if (height !== 0) { + this.scale.y = value / height ; + } + else { + this.scale.y = 1; + } + + this._height = value; } - else - { - this.scale.x = 1; - } - - - this._width = value; - } -}); - -/** - * The height of the displayObjectContainer, setting this will actually modify the scale to achieve the value set - * - * @property height - * @type Number - */ -Object.defineProperty(PIXI.DisplayObjectContainer.prototype, 'height', { - get: function() { - return this.scale.y * this.getLocalBounds().height; - }, - set: function(value) { - - var height = this.getLocalBounds().height; - - if(height !== 0) - { - this.scale.y = value / height ; - } - else - { - this.scale.y = 1; - } - - this._height = value; } }); /** * Adds a child to the container. * - * @method addChild * @param child {DisplayObject} The DisplayObject to add to the container * @return {DisplayObject} The child that was added. */ -PIXI.DisplayObjectContainer.prototype.addChild = function(child) -{ +DisplayObjectContainer.prototype.addChild = function (child) { return this.addChildAt(child, this.children.length); }; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown * - * @method addChildAt * @param child {DisplayObject} The child to add * @param index {Number} The index to place the child in * @return {DisplayObject} The child that was added. */ -PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) -{ - if(index >= 0 && index <= this.children.length) - { - if(child.parent) - { +DisplayObjectContainer.prototype.addChildAt = function (child, index) { + if (index >= 0 && index <= this.children.length) { + if (child.parent) { child.parent.removeChild(child); } @@ -120,12 +106,13 @@ this.children.splice(index, 0, child); - if(this.stage)child.setStageReference(this.stage); + if (this.stage) { + child.setStageReference(this.stage); + } return child; } - else - { + else { throw new Error(child + 'addChildAt: The index '+ index +' supplied is out of bounds ' + this.children.length); } }; @@ -133,59 +120,54 @@ /** * Swaps the position of 2 Display Objects within this container. * - * @method swapChildren * @param child {DisplayObject} * @param child2 {DisplayObject} */ -PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) -{ - if(child === child2) { +DisplayObjectContainer.prototype.swapChildren = function (child, child2) { + if (child === child2) { return; } var index1 = this.getChildIndex(child); var index2 = this.getChildIndex(child2); - if(index1 < 0 || index2 < 0) { + if (index1 < 0 || index2 < 0) { throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); } this.children[index1] = child2; this.children[index2] = child; - }; /** * Returns the index position of a child DisplayObject instance * - * @method getChildIndex * @param child {DisplayObject} The DisplayObject instance to identify * @return {Number} The index position of the child display object to identify */ -PIXI.DisplayObjectContainer.prototype.getChildIndex = function(child) -{ +DisplayObjectContainer.prototype.getChildIndex = function (child) { var index = this.children.indexOf(child); - if (index === -1) - { + + if (index === -1) { throw new Error('The supplied DisplayObject must be a child of the caller'); } + return index; }; /** * Changes the position of an existing child in the display object container * - * @method setChildIndex * @param child {DisplayObject} The child DisplayObject instance for which you want to change the index number * @param index {Number} The resulting index number for the child display object */ -PIXI.DisplayObjectContainer.prototype.setChildIndex = function(child, index) -{ - if (index < 0 || index >= this.children.length) - { +DisplayObjectContainer.prototype.setChildIndex = function (child, index) { + if (index < 0 || index >= this.children.length) { throw new Error('The supplied index is out of bounds'); } + var currentIndex = this.getChildIndex(child); + this.children.splice(currentIndex, 1); //remove from old position this.children.splice(index, 0, child); //add at new position }; @@ -193,121 +175,119 @@ /** * Returns the child at the specified index * - * @method getChildAt * @param index {Number} The index to get the child from * @return {DisplayObject} The child at the given index, if any. */ -PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) -{ - if (index < 0 || index >= this.children.length) - { - throw new Error('getChildAt: Supplied index '+ index +' does not exist in the child list, or the supplied DisplayObject must be a child of the caller'); +DisplayObjectContainer.prototype.getChildAt = function (index) { + if (index < 0 || index >= this.children.length) { + throw new Error('getChildAt: Supplied index ' + index + ' does not exist in the child list, or the supplied DisplayObject must be a child of the caller'); } + return this.children[index]; - }; /** * Removes a child from the container. * - * @method removeChild * @param child {DisplayObject} The DisplayObject to remove * @return {DisplayObject} The child that was removed. */ -PIXI.DisplayObjectContainer.prototype.removeChild = function(child) -{ - var index = this.children.indexOf( child ); - if(index === -1)return; - - return this.removeChildAt( index ); +DisplayObjectContainer.prototype.removeChild = function (child) { + var index = this.children.indexOf(child); + + if (index === -1) { + return; + } + + return this.removeChildAt(index); }; /** * Removes a child from the specified index position. * - * @method removeChildAt * @param index {Number} The index to get the child from * @return {DisplayObject} The child that was removed. */ -PIXI.DisplayObjectContainer.prototype.removeChildAt = function(index) -{ - var child = this.getChildAt( index ); - if(this.stage) - child.removeStageReference(); +DisplayObjectContainer.prototype.removeChildAt = function (index) { + var child = this.getChildAt(index); - child.parent = undefined; - this.children.splice( index, 1 ); + if (this.stage) { + child.removeStageReference(); + } + + child.parent = null; + this.children.splice(index, 1); + return child; }; /** -* Removes all children from this container that are within the begin and end indexes. -* -* @method removeChildren -* @param beginIndex {Number} The beginning position. Default value is 0. -* @param endIndex {Number} The ending position. Default value is size of the container. -*/ -PIXI.DisplayObjectContainer.prototype.removeChildren = function(beginIndex, endIndex) -{ + * Removes all children from this container that are within the begin and end indexes. + * + * @param beginIndex {Number} The beginning position. Default value is 0. + * @param endIndex {Number} The ending position. Default value is size of the container. + */ +DisplayObjectContainer.prototype.removeChildren = function (beginIndex, endIndex) { var begin = beginIndex || 0; var end = typeof endIndex === 'number' ? endIndex : this.children.length; var range = end - begin; - if (range > 0 && range <= end) - { + if (range > 0 && range <= end) { var removed = this.children.splice(begin, range); - for (var i = 0; i < removed.length; i++) { + + for (var i = 0; i < removed.length; ++i) { var child = removed[i]; - if(this.stage) + + if (this.stage) { child.removeStageReference(); - child.parent = undefined; + } + + child.parent = null; } + return removed; } - else if (range === 0 && this.children.length === 0) - { + else if (range === 0 && this.children.length === 0) { return []; } - else - { - throw new Error( 'removeChildren: Range Error, numeric values are outside the acceptable range' ); + else { + throw new RangeError('removeChildren: numeric values are outside the acceptable range.'); } }; /* * Updates the transform on all children of this container for rendering * - * @method updateTransform * @private */ -PIXI.DisplayObjectContainer.prototype.updateTransform = function() -{ - if(!this.visible)return; +DisplayObjectContainer.prototype.updateTransform = function () { + if (!this.visible) { + return; + } this.displayObjectUpdateTransform(); - //PIXI.DisplayObject.prototype.updateTransform.call( this ); + if (this._cacheAsBitmap) { + return; + } - if(this._cacheAsBitmap)return; - - for(var i=0,j=this.children.length; i childMaxY ? maxY : childMaxY; } - if(!childVisible) - return PIXI.EmptyRectangle; + if (!childVisible) { + return math.Rectangle.EMPTY; + } - var bounds = this._bounds; - - bounds.x = minX; - bounds.y = minY; - bounds.width = maxX - minX; - bounds.height = maxY - minY; + this._bounds.x = minX; + this._bounds.y = minY; + this._bounds.width = maxX - minX; + this._bounds.height = maxY - minY; // TODO: store a reference so that if this function gets called again in the render cycle we do not have to recalculate //this._currentBounds = bounds; - - return bounds; + + return this._bounds; }; /** - * Retrieves the non-global local bounds of the displayObjectContainer as a rectangle. The calculation takes all visible children into consideration. + * Retrieves the non-global local bounds of the displayObjectContainer as a rectangle. + * The calculation takes all visible children into consideration. * - * @method getLocalBounds * @return {Rectangle} The rectangular bounding area */ -PIXI.DisplayObjectContainer.prototype.getLocalBounds = function() -{ +DisplayObjectContainer.prototype.getLocalBounds = function () { var matrixCache = this.worldTransform; - this.worldTransform = PIXI.identityMatrix; + this.worldTransform = math.Matrix.IDENTITY; - for(var i=0,j=this.children.length; i= 0 && index <= this.children.length) - { - if(child.parent) - { +DisplayObjectContainer.prototype.addChildAt = function (child, index) { + if (index >= 0 && index <= this.children.length) { + if (child.parent) { child.parent.removeChild(child); } @@ -120,12 +106,13 @@ this.children.splice(index, 0, child); - if(this.stage)child.setStageReference(this.stage); + if (this.stage) { + child.setStageReference(this.stage); + } return child; } - else - { + else { throw new Error(child + 'addChildAt: The index '+ index +' supplied is out of bounds ' + this.children.length); } }; @@ -133,59 +120,54 @@ /** * Swaps the position of 2 Display Objects within this container. * - * @method swapChildren * @param child {DisplayObject} * @param child2 {DisplayObject} */ -PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) -{ - if(child === child2) { +DisplayObjectContainer.prototype.swapChildren = function (child, child2) { + if (child === child2) { return; } var index1 = this.getChildIndex(child); var index2 = this.getChildIndex(child2); - if(index1 < 0 || index2 < 0) { + if (index1 < 0 || index2 < 0) { throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); } this.children[index1] = child2; this.children[index2] = child; - }; /** * Returns the index position of a child DisplayObject instance * - * @method getChildIndex * @param child {DisplayObject} The DisplayObject instance to identify * @return {Number} The index position of the child display object to identify */ -PIXI.DisplayObjectContainer.prototype.getChildIndex = function(child) -{ +DisplayObjectContainer.prototype.getChildIndex = function (child) { var index = this.children.indexOf(child); - if (index === -1) - { + + if (index === -1) { throw new Error('The supplied DisplayObject must be a child of the caller'); } + return index; }; /** * Changes the position of an existing child in the display object container * - * @method setChildIndex * @param child {DisplayObject} The child DisplayObject instance for which you want to change the index number * @param index {Number} The resulting index number for the child display object */ -PIXI.DisplayObjectContainer.prototype.setChildIndex = function(child, index) -{ - if (index < 0 || index >= this.children.length) - { +DisplayObjectContainer.prototype.setChildIndex = function (child, index) { + if (index < 0 || index >= this.children.length) { throw new Error('The supplied index is out of bounds'); } + var currentIndex = this.getChildIndex(child); + this.children.splice(currentIndex, 1); //remove from old position this.children.splice(index, 0, child); //add at new position }; @@ -193,121 +175,119 @@ /** * Returns the child at the specified index * - * @method getChildAt * @param index {Number} The index to get the child from * @return {DisplayObject} The child at the given index, if any. */ -PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) -{ - if (index < 0 || index >= this.children.length) - { - throw new Error('getChildAt: Supplied index '+ index +' does not exist in the child list, or the supplied DisplayObject must be a child of the caller'); +DisplayObjectContainer.prototype.getChildAt = function (index) { + if (index < 0 || index >= this.children.length) { + throw new Error('getChildAt: Supplied index ' + index + ' does not exist in the child list, or the supplied DisplayObject must be a child of the caller'); } + return this.children[index]; - }; /** * Removes a child from the container. * - * @method removeChild * @param child {DisplayObject} The DisplayObject to remove * @return {DisplayObject} The child that was removed. */ -PIXI.DisplayObjectContainer.prototype.removeChild = function(child) -{ - var index = this.children.indexOf( child ); - if(index === -1)return; - - return this.removeChildAt( index ); +DisplayObjectContainer.prototype.removeChild = function (child) { + var index = this.children.indexOf(child); + + if (index === -1) { + return; + } + + return this.removeChildAt(index); }; /** * Removes a child from the specified index position. * - * @method removeChildAt * @param index {Number} The index to get the child from * @return {DisplayObject} The child that was removed. */ -PIXI.DisplayObjectContainer.prototype.removeChildAt = function(index) -{ - var child = this.getChildAt( index ); - if(this.stage) - child.removeStageReference(); +DisplayObjectContainer.prototype.removeChildAt = function (index) { + var child = this.getChildAt(index); - child.parent = undefined; - this.children.splice( index, 1 ); + if (this.stage) { + child.removeStageReference(); + } + + child.parent = null; + this.children.splice(index, 1); + return child; }; /** -* Removes all children from this container that are within the begin and end indexes. -* -* @method removeChildren -* @param beginIndex {Number} The beginning position. Default value is 0. -* @param endIndex {Number} The ending position. Default value is size of the container. -*/ -PIXI.DisplayObjectContainer.prototype.removeChildren = function(beginIndex, endIndex) -{ + * Removes all children from this container that are within the begin and end indexes. + * + * @param beginIndex {Number} The beginning position. Default value is 0. + * @param endIndex {Number} The ending position. Default value is size of the container. + */ +DisplayObjectContainer.prototype.removeChildren = function (beginIndex, endIndex) { var begin = beginIndex || 0; var end = typeof endIndex === 'number' ? endIndex : this.children.length; var range = end - begin; - if (range > 0 && range <= end) - { + if (range > 0 && range <= end) { var removed = this.children.splice(begin, range); - for (var i = 0; i < removed.length; i++) { + + for (var i = 0; i < removed.length; ++i) { var child = removed[i]; - if(this.stage) + + if (this.stage) { child.removeStageReference(); - child.parent = undefined; + } + + child.parent = null; } + return removed; } - else if (range === 0 && this.children.length === 0) - { + else if (range === 0 && this.children.length === 0) { return []; } - else - { - throw new Error( 'removeChildren: Range Error, numeric values are outside the acceptable range' ); + else { + throw new RangeError('removeChildren: numeric values are outside the acceptable range.'); } }; /* * Updates the transform on all children of this container for rendering * - * @method updateTransform * @private */ -PIXI.DisplayObjectContainer.prototype.updateTransform = function() -{ - if(!this.visible)return; +DisplayObjectContainer.prototype.updateTransform = function () { + if (!this.visible) { + return; + } this.displayObjectUpdateTransform(); - //PIXI.DisplayObject.prototype.updateTransform.call( this ); + if (this._cacheAsBitmap) { + return; + } - if(this._cacheAsBitmap)return; - - for(var i=0,j=this.children.length; i childMaxY ? maxY : childMaxY; } - if(!childVisible) - return PIXI.EmptyRectangle; + if (!childVisible) { + return math.Rectangle.EMPTY; + } - var bounds = this._bounds; - - bounds.x = minX; - bounds.y = minY; - bounds.width = maxX - minX; - bounds.height = maxY - minY; + this._bounds.x = minX; + this._bounds.y = minY; + this._bounds.width = maxX - minX; + this._bounds.height = maxY - minY; // TODO: store a reference so that if this function gets called again in the render cycle we do not have to recalculate //this._currentBounds = bounds; - - return bounds; + + return this._bounds; }; /** - * Retrieves the non-global local bounds of the displayObjectContainer as a rectangle. The calculation takes all visible children into consideration. + * Retrieves the non-global local bounds of the displayObjectContainer as a rectangle. + * The calculation takes all visible children into consideration. * - * @method getLocalBounds * @return {Rectangle} The rectangular bounding area */ -PIXI.DisplayObjectContainer.prototype.getLocalBounds = function() -{ +DisplayObjectContainer.prototype.getLocalBounds = function () { var matrixCache = this.worldTransform; - this.worldTransform = PIXI.identityMatrix; + this.worldTransform = math.Matrix.IDENTITY; - for(var i=0,j=this.children.length; i= this.textures.length) - { + else if (round >= this.textures.length) { this.gotoAndStop(this.textures.length - 1); - if(this.onComplete) - { + + if (this.onComplete) { this.onComplete(); } } @@ -170,36 +154,30 @@ * A short hand way of creating a movieclip from an array of frame ids * * @static - * @method fromFrames - * @param frames {Array} the array of frames ids the movieclip will use as its texture frames + * @param frames {string[]} the array of frames ids the movieclip will use as its texture frames */ -PIXI.MovieClip.fromFrames = function(frames) -{ +MovieClip.fromFrames = function (frames) { var textures = []; - for (var i = 0; i < frames.length; i++) - { + for (var i = 0; i < frames.length; ++i) { textures.push(new PIXI.Texture.fromFrame(frames[i])); } - return new PIXI.MovieClip(textures); + return new MovieClip(textures); }; /** * A short hand way of creating a movieclip from an array of image ids * * @static - * @method fromImages - * @param frames {Array} the array of image ids the movieclip will use as its texture frames + * @param images {string[]} the array of image urls the movieclip will use as its texture frames */ -PIXI.MovieClip.fromImages = function(images) -{ +MovieClip.fromImages = function (images) { var textures = []; - for (var i = 0; i < images.length; i++) - { + for (var i = 0; i < images.length; ++i) { textures.push(new PIXI.Texture.fromImage(images[i])); } - return new PIXI.MovieClip(textures); + return new MovieClip(textures); }; diff --git a/src/display/DisplayObject.js b/src/display/DisplayObject.js index 58b375c..e8f8f3e 100644 --- a/src/display/DisplayObject.js +++ b/src/display/DisplayObject.js @@ -1,150 +1,140 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var math = require('../math'), + Sprite = require('./Sprite'), + RenderTexture = require('../textures/RenderTexture'), + _tempMatrix = new math.Matrix(); /** * The base class for all objects that are rendered on the screen. * This is an abstract class and should not be used on its own rather it should be extended. * - * @class DisplayObject - * @constructor + * @class + * @namespace PIXI */ -PIXI.DisplayObject = function() -{ +function DisplayObject() { /** * The coordinate of the object relative to the local coordinates of the parent. * - * @property position - * @type Point + * @member {Point} */ - this.position = new PIXI.Point(); + this.position = new math.Point(); /** * The scale factor of the object. * - * @property scale - * @type Point + * @member {Point} */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + this.scale = new math.Point(1,1);//{x:1, y:1}; /** * The pivot point of the displayObject that it rotates around * - * @property pivot - * @type Point + * @member {Point} */ - this.pivot = new PIXI.Point(0,0); + this.pivot = new math.Point(0,0); /** * The rotation of the object in radians. * - * @property rotation - * @type Number + * @member {number} */ this.rotation = 0; /** * The opacity of the object. * - * @property alpha - * @type Number + * @member {number} */ this.alpha = 1; /** - * The visibility of the object. + * The visibility of the object. If false the object will not be drawn, and + * the updateTransform function will not be called. * - * @property visible - * @type Boolean + * @member {boolean} */ this.visible = true; /** * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * Setting it is a neat way of optimising the hitTest function that the interactionManager + * will use (as it will not need to hit test all the children) * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon + * @member {Rectangle|Circle|Ellipse|Polygon} */ this.hitArea = null; /** * This is used to indicate if the displayObject should display a mouse hand cursor on rollover * - * @property buttonMode - * @type Boolean + * @member {boolean} */ this.buttonMode = false; /** - * Can this object be rendered + * Can this object be rendered, if false the object will not be drawn but the updateTransform + * methods will still be called. * - * @property renderable - * @type Boolean + * @member {boolean} */ this.renderable = false; /** - * [read-only] The display object container that contains this display object. + * The display object container that contains this display object. * - * @property parent - * @type DisplayObjectContainer + * @member {DisplayObjectContainer} * @readOnly */ this.parent = null; /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * The stage the display object is connected to, or undefined if it is not + * connected to the stage. * - * @property stage - * @type Stage + * @member {Stage} * @readOnly */ this.stage = null; /** - * [read-only] The multiplied alpha of the displayObject + * The multiplied alpha of the displayObject * - * @property worldAlpha - * @type Number + * @member {number} * @readOnly */ this.worldAlpha = 1; /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * Whether or not the object is interactive, do not toggle directly! use + * the `interactive` property * - * @property _interactive - * @type Boolean + * @member {Boolean} * @readOnly * @private */ this._interactive = false; /** - * This is the cursor that will be used when the mouse is over this object. To enable this the element must have interaction = true and buttonMode = true + * This is the cursor that will be used when the mouse is over this object. To enable this + * the element must have interaction = true and buttonMode = true * - * @property defaultCursor - * @type String + * @member {string} * */ this.defaultCursor = 'pointer'; /** - * [read-only] Current transform of the object based on world (parent) factors + * Current transform of the object based on world (parent) factors * - * @property worldTransform - * @type Matrix + * @member {Matrix} * @readOnly * @private */ - this.worldTransform = new PIXI.Matrix(); + this.worldTransform = new math.Matrix(); /** * cached sin rotation and cos rotation * - * @property _sr - * @type Number + * @member {number} * @private */ this._sr = 0; @@ -152,8 +142,7 @@ /** * cached sin rotation and cos rotation * - * @property _cr - * @type Number + * @member {number} * @private */ this._cr = 1; @@ -162,25 +151,22 @@ * The area the filter is applied to like the hitArea this is used as more of an optimisation * rather than figuring out the dimensions of the displayObject each frame you can set this rectangle * - * @property filterArea - * @type Rectangle + * @member {Rectangle} */ - this.filterArea = null;//new PIXI.Rectangle(0,0,1,1); + this.filterArea = null; // new math.Rectangle(0,0,1,1); /** * The original, cached bounds of the object * - * @property _bounds - * @type Rectangle + * @member {Rectangle} * @private */ - this._bounds = new PIXI.Rectangle(0, 0, 1, 1); + this._bounds = new math.Rectangle(0, 0, 1, 1); /** * The most up-to-date bounds of the object * - * @property _currentBounds - * @type Rectangle + * @member {Rectangle} * @private */ this._currentBounds = null; @@ -188,8 +174,7 @@ /** * The original, cached mask of the object * - * @property _currentBounds - * @type Rectangle + * @member {Rectangle} * @private */ this._mask = null; @@ -197,8 +182,7 @@ /** * Cached internal flag. * - * @property _cacheAsBitmap - * @type Boolean + * @member {boolean} * @private */ this._cacheAsBitmap = false; @@ -206,8 +190,7 @@ /** * Cached internal flag. * - * @property _cacheIsDirty - * @type Boolean + * @member {boolean} * @private */ this._cacheIsDirty = false; @@ -216,72 +199,104 @@ /* * MOUSE Callbacks */ - + /** * A callback that is used when the users mouse rolls over the displayObject + * * @method mouseover + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.mouseover = null; /** * A callback that is used when the users mouse leaves the displayObject + * * @method mouseout + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.mouseout = null; //Left button /** * A callback that is used when the users clicks on the displayObject with their mouse's left button + * * @method click + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.click = null; /** * A callback that is used when the user clicks the mouse's left button down over the sprite + * * @method mousedown + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.mousedown = null; /** * A callback that is used when the user releases the mouse's left button that was over the displayObject * for this callback to be fired, the mouse's left button must have been pressed down over the displayObject + * * @method mouseup + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.mouseup = null; /** - * A callback that is used when the user releases the mouse's left button that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, the mouse's left button must have been pressed down over the displayObject + * A callback that is used when the user releases the mouse's left button that was over the displayObject + * but is no longer over the displayObject for this callback to be fired, the mouse's left button must + * have been pressed down over the displayObject + * * @method mouseupoutside + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.mouseupoutside = null; //Right button /** * A callback that is used when the users clicks on the displayObject with their mouse's right button + * * @method rightclick + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.rightclick = null; /** * A callback that is used when the user clicks the mouse's right button down over the sprite + * * @method rightdown + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.rightdown = null; /** * A callback that is used when the user releases the mouse's right button that was over the displayObject * for this callback to be fired the mouse's right button must have been pressed down over the displayObject + * * @method rightup + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.rightup = null; /** - * A callback that is used when the user releases the mouse's right button that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, the mouse's right button must have been pressed down over the displayObject + * A callback that is used when the user releases the mouse's right button that was over the + * displayObject but is no longer over the displayObject for this callback to be fired, the mouse's + * right button must have been pressed down over the displayObject + * * @method rightupoutside + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.rightupoutside = null; /* * TOUCH Callbacks @@ -290,168 +305,215 @@ /** * A callback that is used when the users taps on the sprite with their finger * basically a touch version of click + * * @method tap + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.tap = null; /** * A callback that is used when the user touches over the displayObject + * * @method touchstart + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.touchstart = null; /** * A callback that is used when the user releases a touch over the displayObject + * * @method touchend + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.touchend = null; /** * A callback that is used when the user releases the touch that was over the displayObject * for this callback to be fired, The touch must have started over the sprite + * * @method touchendoutside + * @memberof DisplayObject# * @param interactionData {InteractionData} */ + this.touchendoutside = null; }; // constructor -PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; +DisplayObject.prototype.constructor = DisplayObject; +module.exports = DisplayObject; -/** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * - * @property interactive - * @type Boolean - * @default false - */ -Object.defineProperty(PIXI.DisplayObject.prototype, 'interactive', { - get: function() { - return this._interactive; - }, - set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; - } -}); - -/** - * [read-only] Indicates if the sprite is globally visible. - * - * @property worldVisible - * @type Boolean - */ -Object.defineProperty(PIXI.DisplayObject.prototype, 'worldVisible', { - get: function() { - var item = this; - - do - { - if(!item.visible)return false; - item = item.parent; +Object.defineProperties(DisplayObject.prototype, { + /** + * The position of the displayObject on the x axis relative to the local coordinates of the parent. + * + * @member {number} + * @memberof DisplayObject# + */ + x: { + get: function () { + return this.position.x; + }, + set: function (value) { + this.position.x = value; } - while(item); - - return true; - } -}); - -/** - * Sets a mask for the displayObject. A mask is an object that limits the visibility of an object to the shape of the mask applied to it. - * In PIXI a regular mask must be a PIXI.Graphics object. This allows for much faster masking in canvas as it utilises shape clipping. - * To remove a mask, set this property to null. - * - * @property mask - * @type Graphics - */ -Object.defineProperty(PIXI.DisplayObject.prototype, 'mask', { - get: function() { - return this._mask; - }, - set: function(value) { - - if(this._mask)this._mask.isMask = false; - this._mask = value; - if(this._mask)this._mask.isMask = true; - } -}); - -/** - * Sets the filters for the displayObject. - * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. - * To remove filters simply set this property to 'null' - * @property filters - * @type Array(Filter) - */ -Object.defineProperty(PIXI.DisplayObject.prototype, 'filters', { - - get: function() { - return this._filters; }, - set: function(value) { + /** + * The position of the displayObject on the y axis relative to the local coordinates of the parent. + * + * @member {number} + * @memberof DisplayObject# + */ + y: { + get: function () { + return this.position.y; + }, + set: function (value) { + this.position.y = value; + } + }, - if(value) - { - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); + /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * + * @member {boolean} + * @default false + * @memberof DisplayObject# + */ + interactive: { + get: function () { + return this._interactive; + }, + set: function (value) { + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage) { + this.stage.dirty = true; + } + } + }, + + /** + * Indicates if the sprite is globally visible. + * + * @member {boolean} + * @readonly + * @memberof DisplayObject# + */ + worldVisible: { + get: function () { + var item = this; + + do { + if (!item.visible) { + return false; } + + item = item.parent; + } while(item); + + return true; + } + }, + + /** + * Sets a mask for the displayObject. A mask is an object that limits the visibility of an object to the shape of the mask applied to it. + * In PIXI a regular mask must be a PIXI.Graphics object. This allows for much faster masking in canvas as it utilises shape clipping. + * To remove a mask, set this property to null. + * + * @member {Graphics} + * @memberof DisplayObject# + */ + mask: { + get: function () { + return this._mask; + }, + set: function (value) { + if (this._mask) { + this._mask.isMask = false; } - // TODO change this as it is legacy - this._filterBlock = {target:this, filterPasses:passes}; + this._mask = value; + + if (this._mask) { + this._mask.isMask = true; + } } - - this._filters = value; - } -}); - -/** - * Set if this display object is cached as a bitmap. - * This basically takes a snap shot of the display object as it is at that moment. It can provide a performance benefit for complex static displayObjects. - * To remove simply set this property to 'null' - * @property cacheAsBitmap - * @type Boolean - */ -Object.defineProperty(PIXI.DisplayObject.prototype, 'cacheAsBitmap', { - - get: function() { - return this._cacheAsBitmap; }, - set: function(value) { + /** + * Sets the filters for the displayObject. + * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. + * To remove filters simply set this property to 'null' + * + * @member {Filter[]} + * @memberof DisplayObject# + */ + filters: { + get: function () { + return this._filters; + }, + set: function (value) { + if (value) { + // now put all the passes in one place.. + var passes = []; - if(this._cacheAsBitmap === value)return; + for (var i = 0; i < value.length; i++) { + var filterPasses = value[i].passes; - if(value) - { - this._generateCachedSprite(); + for (var j = 0; j < filterPasses.length; j++) { + passes.push(filterPasses[j]); + } + } + + // TODO change this as it is legacy + this._filterBlock = { target: this, filterPasses: passes }; + } + + this._filters = value; } - else - { - this._destroyCachedSprite(); - } + }, - this._cacheAsBitmap = value; + /** + * Set if this display object is cached as a bitmap. + * This basically takes a snap shot of the display object as it is at that moment. It can provide a performance benefit for complex static displayObjects. + * To remove simply set this property to 'null' + * + * @member {boolean} + * @memberof DisplayObject# + */ + cacheAsBitmap: { + get: function () { + return this._cacheAsBitmap; + }, + set: function (value) { + if (this._cacheAsBitmap === value) { + return; + } + + if (value) { + this._generateCachedSprite(); + } + else { + this._destroyCachedSprite(); + } + + this._cacheAsBitmap = value; + } } }); /* * Updates the object transform for rendering * - * @method updateTransform * @private */ -PIXI.DisplayObject.prototype.updateTransform = function() -{ +DisplayObject.prototype.updateTransform = function () { // create some matrix refs for easy access var pt = this.parent.worldTransform; var wt = this.worldTransform; @@ -460,7 +522,7 @@ var a, b, c, d, tx, ty; // so if rotation is between 0 then we can simplify the multiplication process.. - if(this.rotation % PIXI.PI_2) + if(this.rotation % math.PI_2) { // check to see if the rotation is the same as the previous render. This means we only need to use sin and cos when rotation actually changes if(this.rotation !== this.rotationCache) @@ -477,7 +539,7 @@ d = this._cr * this.scale.y; tx = this.position.x; ty = this.position.y; - + // check for pivot.. not often used so geared towards that fact! if(this.pivot.x || this.pivot.y) { @@ -493,7 +555,7 @@ wt.tx = tx * pt.a + ty * pt.c + pt.tx; wt.ty = tx * pt.b + ty * pt.d + pt.ty; - + } else { @@ -517,64 +579,58 @@ }; // performance increase to avoid using call.. (10x faster) -PIXI.DisplayObject.prototype.displayObjectUpdateTransform = PIXI.DisplayObject.prototype.updateTransform; +DisplayObject.prototype.displayObjectUpdateTransform = DisplayObject.prototype.updateTransform; /** * Retrieves the bounds of the displayObject as a rectangle object * - * @method getBounds * @param matrix {Matrix} * @return {Rectangle} the rectangular bounding area */ -PIXI.DisplayObject.prototype.getBounds = function(matrix) -{ - matrix = matrix;//just to get passed js hinting (and preserve inheritance) - return PIXI.EmptyRectangle; +DisplayObject.prototype.getBounds = function (matrix) { + return math.Rectangle.EMPTY; }; /** * Retrieves the local bounds of the displayObject as a rectangle object * - * @method getLocalBounds * @return {Rectangle} the rectangular bounding area */ -PIXI.DisplayObject.prototype.getLocalBounds = function() -{ - return this.getBounds(PIXI.identityMatrix);///PIXI.EmptyRectangle(); +DisplayObject.prototype.getLocalBounds = function () { + return this.getBounds(math.Matrix.IDENTITY); }; /** * Sets the object's stage reference, the stage this object is connected to * - * @method setStageReference * @param stage {Stage} the stage that the object will have as its current stage reference */ -PIXI.DisplayObject.prototype.setStageReference = function(stage) -{ +DisplayObject.prototype.setStageReference = function (stage) { this.stage = stage; - if(this._interactive)this.stage.dirty = true; + + if (this._interactive) { + this.stage.dirty = true; + } }; /** * Useful function that returns a texture of the displayObject object that can then be used to create sprites * This can be quite useful if your displayObject is static / complicated and needs to be reused multiple times. * - * @method generateTexture * @param resolution {Number} The resolution of the texture being generated * @param scaleMode {Number} See {{#crossLink "PIXI/scaleModes:property"}}PIXI.scaleModes{{/crossLink}} for possible values * @param renderer {CanvasRenderer|WebGLRenderer} The renderer used to generate the texture. * @return {Texture} a texture of the graphics object */ -PIXI.DisplayObject.prototype.generateTexture = function(resolution, scaleMode, renderer) -{ +DisplayObject.prototype.generateTexture = function (resolution, scaleMode, renderer) { var bounds = this.getLocalBounds(); - var renderTexture = new PIXI.RenderTexture(bounds.width | 0, bounds.height | 0, renderer, scaleMode, resolution); - - PIXI.DisplayObject._tempMatrix.tx = -bounds.x; - PIXI.DisplayObject._tempMatrix.ty = -bounds.y; - - renderTexture.render(this, PIXI.DisplayObject._tempMatrix); + var renderTexture = new RenderTexture(bounds.width | 0, bounds.height | 0, renderer, scaleMode, resolution); + + _tempMatrix.tx = -bounds.x; + _tempMatrix.ty = -bounds.y; + + renderTexture.render(this, _tempMatrix); return renderTexture; }; @@ -582,22 +638,18 @@ /** * Generates and updates the cached sprite for this object. * - * @method updateCache */ -PIXI.DisplayObject.prototype.updateCache = function() -{ +DisplayObject.prototype.updateCache = function () { this._generateCachedSprite(); }; /** * Calculates the global position of the display object * - * @method toGlobal * @param position {Point} The world origin to calculate from * @return {Point} A point object representing the position of this object */ -PIXI.DisplayObject.prototype.toGlobal = function(position) -{ +DisplayObject.prototype.toGlobal = function (position) { // don't need to u[date the lot this.displayObjectUpdateTransform(); return this.worldTransform.apply(position); @@ -606,20 +658,16 @@ /** * Calculates the local position of the display object relative to another point * - * @method toLocal * @param position {Point} The world origin to calculate from * @param [from] {DisplayObject} The DisplayObject to calculate the global position from * @return {Point} A point object representing the position of this object */ -PIXI.DisplayObject.prototype.toLocal = function(position, from) -{ - // - if (from) - { +DisplayObject.prototype.toLocal = function (position, from) { + if (from) { position = from.toGlobal(position); } - // don't need to u[date the lot + // don't need to update the lot this.displayObjectUpdateTransform(); return this.worldTransform.applyInverse(position); }; @@ -627,60 +675,52 @@ /** * Internal method. * - * @method _renderCachedSprite * @param renderSession {Object} The render session * @private */ -PIXI.DisplayObject.prototype._renderCachedSprite = function(renderSession) -{ +DisplayObject.prototype._renderCachedSprite = function (renderSession) { this._cachedSprite.worldAlpha = this.worldAlpha; - if(renderSession.gl) - { - PIXI.Sprite.prototype._renderWebGL.call(this._cachedSprite, renderSession); + if (renderSession.gl) { + Sprite.prototype._renderWebGL.call(this._cachedSprite, renderSession); } - else - { - PIXI.Sprite.prototype._renderCanvas.call(this._cachedSprite, renderSession); + else { + Sprite.prototype._renderCanvas.call(this._cachedSprite, renderSession); } }; /** * Internal method. * - * @method _generateCachedSprite * @private */ -PIXI.DisplayObject.prototype._generateCachedSprite = function() -{ +DisplayObject.prototype._generateCachedSprite = function () { this._cacheAsBitmap = false; var bounds = this.getLocalBounds(); - if(!this._cachedSprite) - { - var renderTexture = new PIXI.RenderTexture(bounds.width | 0, bounds.height | 0);//, renderSession.renderer); + if (!this._cachedSprite) { + var renderTexture = new RenderTexture(bounds.width | 0, bounds.height | 0); //, renderSession.renderer); - this._cachedSprite = new PIXI.Sprite(renderTexture); + this._cachedSprite = new Sprite(renderTexture); this._cachedSprite.worldTransform = this.worldTransform; } - else - { + else { this._cachedSprite.texture.resize(bounds.width | 0, bounds.height | 0); } - //REMOVE filter! + // REMOVE filter! var tempFilters = this._filters; this._filters = null; this._cachedSprite.filters = tempFilters; - PIXI.DisplayObject._tempMatrix.tx = -bounds.x; - PIXI.DisplayObject._tempMatrix.ty = -bounds.y; - - this._cachedSprite.texture.render(this, PIXI.DisplayObject._tempMatrix, true); + _tempMatrix.tx = -bounds.x; + _tempMatrix.ty = -bounds.y; - this._cachedSprite.anchor.x = -( bounds.x / bounds.width ); - this._cachedSprite.anchor.y = -( bounds.y / bounds.height ); + this._cachedSprite.texture.render(this, _tempMatrix, true); + + this._cachedSprite.anchor.x = -(bounds.x / bounds.width); + this._cachedSprite.anchor.y = -(bounds.y / bounds.height); this._filters = tempFilters; @@ -688,14 +728,14 @@ }; /** -* Destroys the cached sprite. -* -* @method _destroyCachedSprite -* @private -*/ -PIXI.DisplayObject.prototype._destroyCachedSprite = function() -{ - if(!this._cachedSprite)return; + * Destroys the cached sprite. + * + * @private + */ +DisplayObject.prototype._destroyCachedSprite = function () { + if (!this._cachedSprite) { + return; + } this._cachedSprite.texture.destroy(true); @@ -704,62 +744,21 @@ }; /** -* Renders the object using the WebGL renderer -* -* @method _renderWebGL -* @param renderSession {RenderSession} -* @private -*/ -PIXI.DisplayObject.prototype._renderWebGL = function(renderSession) -{ + * Renders the object using the WebGL renderer + * + * @param renderSession {RenderSession} + * @private + */ +DisplayObject.prototype._renderWebGL = function (renderSession) { // OVERWRITE; - // this line is just here to pass jshinting :) - renderSession = renderSession; }; /** -* Renders the object using the Canvas renderer -* -* @method _renderCanvas -* @param renderSession {RenderSession} -* @private -*/ -PIXI.DisplayObject.prototype._renderCanvas = function(renderSession) -{ + * Renders the object using the Canvas renderer + * + * @param renderSession {RenderSession} + * @private + */ +DisplayObject.prototype._renderCanvas = function (renderSession) { // OVERWRITE; - // this line is just here to pass jshinting :) - renderSession = renderSession; }; - - -PIXI.DisplayObject._tempMatrix = new PIXI.Matrix(); - -/** - * The position of the displayObject on the x axis relative to the local coordinates of the parent. - * - * @property x - * @type Number - */ -Object.defineProperty(PIXI.DisplayObject.prototype, 'x', { - get: function() { - return this.position.x; - }, - set: function(value) { - this.position.x = value; - } -}); - -/** - * The position of the displayObject on the y axis relative to the local coordinates of the parent. - * - * @property y - * @type Number - */ -Object.defineProperty(PIXI.DisplayObject.prototype, 'y', { - get: function() { - return this.position.y; - }, - set: function(value) { - this.position.y = value; - } -}); diff --git a/src/display/DisplayObjectContainer.js b/src/display/DisplayObjectContainer.js index e3ccc20..c2fedae 100644 --- a/src/display/DisplayObjectContainer.js +++ b/src/display/DisplayObjectContainer.js @@ -1,118 +1,104 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var math = require('../math'), + DisplayObject = require('./DisplayObject'); /** * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class * @extends DisplayObject - * @constructor + * @namespace PIXI */ -PIXI.DisplayObjectContainer = function() -{ - PIXI.DisplayObject.call( this ); +function DisplayObjectContainer() { + DisplayObject.call( this ); /** - * [read-only] The array of children of this container. + * The array of children of this container. * - * @property children - * @type Array(DisplayObject) - * @readOnly + * @member {DisplayObject[]} + * @readonly */ this.children = []; - - // fast access to update transform.. - }; // constructor -PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); -PIXI.DisplayObjectContainer.prototype.constructor = PIXI.DisplayObjectContainer; +DisplayObjectContainer.prototype = Object.create(DisplayObject.prototype); +DisplayObjectContainer.prototype.constructor = DisplayObjectContainer; +module.exports = DisplayObjectContainer; + +Object.defineProperties(DisplayObjectContainer.prototype, { + /** + * The width of the displayObjectContainer, setting this will actually modify the scale to achieve the value set + * + * @member {number} + * @memberof DisplayObjectContainer# + */ + width: { + get: function () { + return this.scale.x * this.getLocalBounds().width; + }, + set: function (value) { + + var width = this.getLocalBounds().width; + + if(width !== 0) { + this.scale.x = value / width; + } + else { + this.scale.x = 1; + } -/** - * The width of the displayObjectContainer, setting this will actually modify the scale to achieve the value set - * - * @property width - * @type Number - */ -Object.defineProperty(PIXI.DisplayObjectContainer.prototype, 'width', { - get: function() { - return this.scale.x * this.getLocalBounds().width; + this._width = value; + } }, - set: function(value) { - - var width = this.getLocalBounds().width; - if(width !== 0) - { - this.scale.x = value / width; + /** + * The height of the displayObjectContainer, setting this will actually modify the scale to achieve the value set + * + * @member {number} + * @memberof DisplayObjectContainer# + */ + height: { + get: function () { + return this.scale.y * this.getLocalBounds().height; + }, + set: function (value) { + + var height = this.getLocalBounds().height; + + if (height !== 0) { + this.scale.y = value / height ; + } + else { + this.scale.y = 1; + } + + this._height = value; } - else - { - this.scale.x = 1; - } - - - this._width = value; - } -}); - -/** - * The height of the displayObjectContainer, setting this will actually modify the scale to achieve the value set - * - * @property height - * @type Number - */ -Object.defineProperty(PIXI.DisplayObjectContainer.prototype, 'height', { - get: function() { - return this.scale.y * this.getLocalBounds().height; - }, - set: function(value) { - - var height = this.getLocalBounds().height; - - if(height !== 0) - { - this.scale.y = value / height ; - } - else - { - this.scale.y = 1; - } - - this._height = value; } }); /** * Adds a child to the container. * - * @method addChild * @param child {DisplayObject} The DisplayObject to add to the container * @return {DisplayObject} The child that was added. */ -PIXI.DisplayObjectContainer.prototype.addChild = function(child) -{ +DisplayObjectContainer.prototype.addChild = function (child) { return this.addChildAt(child, this.children.length); }; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown * - * @method addChildAt * @param child {DisplayObject} The child to add * @param index {Number} The index to place the child in * @return {DisplayObject} The child that was added. */ -PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) -{ - if(index >= 0 && index <= this.children.length) - { - if(child.parent) - { +DisplayObjectContainer.prototype.addChildAt = function (child, index) { + if (index >= 0 && index <= this.children.length) { + if (child.parent) { child.parent.removeChild(child); } @@ -120,12 +106,13 @@ this.children.splice(index, 0, child); - if(this.stage)child.setStageReference(this.stage); + if (this.stage) { + child.setStageReference(this.stage); + } return child; } - else - { + else { throw new Error(child + 'addChildAt: The index '+ index +' supplied is out of bounds ' + this.children.length); } }; @@ -133,59 +120,54 @@ /** * Swaps the position of 2 Display Objects within this container. * - * @method swapChildren * @param child {DisplayObject} * @param child2 {DisplayObject} */ -PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) -{ - if(child === child2) { +DisplayObjectContainer.prototype.swapChildren = function (child, child2) { + if (child === child2) { return; } var index1 = this.getChildIndex(child); var index2 = this.getChildIndex(child2); - if(index1 < 0 || index2 < 0) { + if (index1 < 0 || index2 < 0) { throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); } this.children[index1] = child2; this.children[index2] = child; - }; /** * Returns the index position of a child DisplayObject instance * - * @method getChildIndex * @param child {DisplayObject} The DisplayObject instance to identify * @return {Number} The index position of the child display object to identify */ -PIXI.DisplayObjectContainer.prototype.getChildIndex = function(child) -{ +DisplayObjectContainer.prototype.getChildIndex = function (child) { var index = this.children.indexOf(child); - if (index === -1) - { + + if (index === -1) { throw new Error('The supplied DisplayObject must be a child of the caller'); } + return index; }; /** * Changes the position of an existing child in the display object container * - * @method setChildIndex * @param child {DisplayObject} The child DisplayObject instance for which you want to change the index number * @param index {Number} The resulting index number for the child display object */ -PIXI.DisplayObjectContainer.prototype.setChildIndex = function(child, index) -{ - if (index < 0 || index >= this.children.length) - { +DisplayObjectContainer.prototype.setChildIndex = function (child, index) { + if (index < 0 || index >= this.children.length) { throw new Error('The supplied index is out of bounds'); } + var currentIndex = this.getChildIndex(child); + this.children.splice(currentIndex, 1); //remove from old position this.children.splice(index, 0, child); //add at new position }; @@ -193,121 +175,119 @@ /** * Returns the child at the specified index * - * @method getChildAt * @param index {Number} The index to get the child from * @return {DisplayObject} The child at the given index, if any. */ -PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) -{ - if (index < 0 || index >= this.children.length) - { - throw new Error('getChildAt: Supplied index '+ index +' does not exist in the child list, or the supplied DisplayObject must be a child of the caller'); +DisplayObjectContainer.prototype.getChildAt = function (index) { + if (index < 0 || index >= this.children.length) { + throw new Error('getChildAt: Supplied index ' + index + ' does not exist in the child list, or the supplied DisplayObject must be a child of the caller'); } + return this.children[index]; - }; /** * Removes a child from the container. * - * @method removeChild * @param child {DisplayObject} The DisplayObject to remove * @return {DisplayObject} The child that was removed. */ -PIXI.DisplayObjectContainer.prototype.removeChild = function(child) -{ - var index = this.children.indexOf( child ); - if(index === -1)return; - - return this.removeChildAt( index ); +DisplayObjectContainer.prototype.removeChild = function (child) { + var index = this.children.indexOf(child); + + if (index === -1) { + return; + } + + return this.removeChildAt(index); }; /** * Removes a child from the specified index position. * - * @method removeChildAt * @param index {Number} The index to get the child from * @return {DisplayObject} The child that was removed. */ -PIXI.DisplayObjectContainer.prototype.removeChildAt = function(index) -{ - var child = this.getChildAt( index ); - if(this.stage) - child.removeStageReference(); +DisplayObjectContainer.prototype.removeChildAt = function (index) { + var child = this.getChildAt(index); - child.parent = undefined; - this.children.splice( index, 1 ); + if (this.stage) { + child.removeStageReference(); + } + + child.parent = null; + this.children.splice(index, 1); + return child; }; /** -* Removes all children from this container that are within the begin and end indexes. -* -* @method removeChildren -* @param beginIndex {Number} The beginning position. Default value is 0. -* @param endIndex {Number} The ending position. Default value is size of the container. -*/ -PIXI.DisplayObjectContainer.prototype.removeChildren = function(beginIndex, endIndex) -{ + * Removes all children from this container that are within the begin and end indexes. + * + * @param beginIndex {Number} The beginning position. Default value is 0. + * @param endIndex {Number} The ending position. Default value is size of the container. + */ +DisplayObjectContainer.prototype.removeChildren = function (beginIndex, endIndex) { var begin = beginIndex || 0; var end = typeof endIndex === 'number' ? endIndex : this.children.length; var range = end - begin; - if (range > 0 && range <= end) - { + if (range > 0 && range <= end) { var removed = this.children.splice(begin, range); - for (var i = 0; i < removed.length; i++) { + + for (var i = 0; i < removed.length; ++i) { var child = removed[i]; - if(this.stage) + + if (this.stage) { child.removeStageReference(); - child.parent = undefined; + } + + child.parent = null; } + return removed; } - else if (range === 0 && this.children.length === 0) - { + else if (range === 0 && this.children.length === 0) { return []; } - else - { - throw new Error( 'removeChildren: Range Error, numeric values are outside the acceptable range' ); + else { + throw new RangeError('removeChildren: numeric values are outside the acceptable range.'); } }; /* * Updates the transform on all children of this container for rendering * - * @method updateTransform * @private */ -PIXI.DisplayObjectContainer.prototype.updateTransform = function() -{ - if(!this.visible)return; +DisplayObjectContainer.prototype.updateTransform = function () { + if (!this.visible) { + return; + } this.displayObjectUpdateTransform(); - //PIXI.DisplayObject.prototype.updateTransform.call( this ); + if (this._cacheAsBitmap) { + return; + } - if(this._cacheAsBitmap)return; - - for(var i=0,j=this.children.length; i childMaxY ? maxY : childMaxY; } - if(!childVisible) - return PIXI.EmptyRectangle; + if (!childVisible) { + return math.Rectangle.EMPTY; + } - var bounds = this._bounds; - - bounds.x = minX; - bounds.y = minY; - bounds.width = maxX - minX; - bounds.height = maxY - minY; + this._bounds.x = minX; + this._bounds.y = minY; + this._bounds.width = maxX - minX; + this._bounds.height = maxY - minY; // TODO: store a reference so that if this function gets called again in the render cycle we do not have to recalculate //this._currentBounds = bounds; - - return bounds; + + return this._bounds; }; /** - * Retrieves the non-global local bounds of the displayObjectContainer as a rectangle. The calculation takes all visible children into consideration. + * Retrieves the non-global local bounds of the displayObjectContainer as a rectangle. + * The calculation takes all visible children into consideration. * - * @method getLocalBounds * @return {Rectangle} The rectangular bounding area */ -PIXI.DisplayObjectContainer.prototype.getLocalBounds = function() -{ +DisplayObjectContainer.prototype.getLocalBounds = function () { var matrixCache = this.worldTransform; - this.worldTransform = PIXI.identityMatrix; + this.worldTransform = math.Matrix.IDENTITY; - for(var i=0,j=this.children.length; i= this.textures.length) - { + else if (round >= this.textures.length) { this.gotoAndStop(this.textures.length - 1); - if(this.onComplete) - { + + if (this.onComplete) { this.onComplete(); } } @@ -170,36 +154,30 @@ * A short hand way of creating a movieclip from an array of frame ids * * @static - * @method fromFrames - * @param frames {Array} the array of frames ids the movieclip will use as its texture frames + * @param frames {string[]} the array of frames ids the movieclip will use as its texture frames */ -PIXI.MovieClip.fromFrames = function(frames) -{ +MovieClip.fromFrames = function (frames) { var textures = []; - for (var i = 0; i < frames.length; i++) - { + for (var i = 0; i < frames.length; ++i) { textures.push(new PIXI.Texture.fromFrame(frames[i])); } - return new PIXI.MovieClip(textures); + return new MovieClip(textures); }; /** * A short hand way of creating a movieclip from an array of image ids * * @static - * @method fromImages - * @param frames {Array} the array of image ids the movieclip will use as its texture frames + * @param images {string[]} the array of image urls the movieclip will use as its texture frames */ -PIXI.MovieClip.fromImages = function(images) -{ +MovieClip.fromImages = function (images) { var textures = []; - for (var i = 0; i < images.length; i++) - { + for (var i = 0; i < images.length; ++i) { textures.push(new PIXI.Texture.fromImage(images[i])); } - return new PIXI.MovieClip(textures); + return new MovieClip(textures); }; diff --git a/src/display/Sprite.js b/src/display/Sprite.js index aab559a..849e0f3 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,23 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var math = require('../math'), + Texture = require('../textures/Texture'), + DisplayObjectContainer = require('./DisplayObjectContainer'); /** * The Sprite object is the base for all textured objects that are rendered to the screen * + * A sprite can be created directly from an image like this: + * + * ```js + * var sprite = new Sprite.fromImage('assets/image.png'); + * yourStage.addChild(sprite); + * ``` + * + * then obviously don't forget to add it to the stage you have already created + * * @class Sprite * @extends DisplayObjectContainer - * @constructor + * @namespace PIXI * @param texture {Texture} The texture for this sprite - * - * A sprite can be created directly from an image like this : - * var sprite = new PIXI.Sprite.fromImage('assets/image.png'); - * yourStage.addChild(sprite); - * then obviously don't forget to add it to the stage you have already created */ -PIXI.Sprite = function(texture) -{ - PIXI.DisplayObjectContainer.call( this ); +function Sprite(texture) { + DisplayObjectContainer.call(this); /** * The anchor sets the origin point of the texture. @@ -25,24 +28,21 @@ * Setting than anchor to 0.5,0.5 means the textures origin is centered * Setting the anchor to 1,1 would mean the textures origin points will be the bottom right corner * - * @property anchor - * @type Point + * @member {Point} */ - this.anchor = new PIXI.Point(); + this.anchor = new math.Point(); /** * The texture that the sprite is using * - * @property texture - * @type Texture + * @member {Texture} */ - this.texture = texture || PIXI.Texture.emptyTexture; - + this.texture = texture || Texture.EMPTY; + /** * The width of the sprite (this is initially set by the texture) * - * @property _width - * @type Number + * @member {number} * @private */ this._width = 0; @@ -50,8 +50,7 @@ /** * The height of the sprite (this is initially set by the texture) * - * @property _height - * @type Number + * @member {number} * @private */ this._height = 0; @@ -59,8 +58,7 @@ /** * The tint applied to the sprite. This is a hex value. A value of 0xFFFFFF will remove any tint effect. * - * @property tint - * @type Number + * @member {number} * @default 0xFFFFFF */ this.tint = 0xFFFFFF; @@ -68,8 +66,7 @@ /** * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. * - * @property blendMode - * @type Number + * @member {number} * @default PIXI.blendModes.NORMAL; */ this.blendMode = PIXI.blendModes.NORMAL; @@ -77,69 +74,66 @@ /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. * - * @property shader - * @type AbstractFilter - * @default null + * @member {AbstractFilter} */ this.shader = null; - if(this.texture.baseTexture.hasLoaded) - { + // wait for the texture to load + if (this.texture.baseTexture.hasLoaded) { this.onTextureUpdate(); } - else - { - this.texture.on( 'update', this.onTextureUpdate.bind(this) ); + else { + this.texture.on('update', this.onTextureUpdate.bind(this)); } this.renderable = true; - -}; +} // constructor -PIXI.Sprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); -PIXI.Sprite.prototype.constructor = PIXI.Sprite; +Sprite.prototype = Object.create(DisplayObjectContainer.prototype); +Sprite.prototype.constructor = Sprite; +module.exports = Sprite; -/** - * The width of the sprite, setting this will actually modify the scale to achieve the value set - * - * @property width - * @type Number - */ -Object.defineProperty(PIXI.Sprite.prototype, 'width', { - get: function() { - return this.scale.x * this.texture.frame.width; +Object.defineProperties(Sprite.prototype, { + /** + * The width of the sprite, setting this will actually modify the scale to achieve the value set + * + * @member + * @memberof Sprite# + */ + width: { + get: function () { + return this.scale.x * this.texture.frame.width; + }, + set: function (value) { + this.scale.x = value / this.texture.frame.width; + this._width = value; + } }, - set: function(value) { - this.scale.x = value / this.texture.frame.width; - this._width = value; - } -}); -/** - * The height of the sprite, setting this will actually modify the scale to achieve the value set - * - * @property height - * @type Number - */ -Object.defineProperty(PIXI.Sprite.prototype, 'height', { - get: function() { - return this.scale.y * this.texture.frame.height; - }, - set: function(value) { - this.scale.y = value / this.texture.frame.height; - this._height = value; + /** + * The height of the sprite, setting this will actually modify the scale to achieve the value set + * + * @member + * @memberof Sprite# + */ + height: { + get: function () { + return this.scale.y * this.texture.frame.height; + }, + set: function (value) { + this.scale.y = value / this.texture.frame.height; + this._height = value; + } } }); /** * Sets the texture of the sprite * - * @method setTexture * @param texture {Texture} The PIXI texture that is displayed by the sprite */ -PIXI.Sprite.prototype.setTexture = function(texture) -{ +Sprite.prototype.setTexture = function (texture) { this.texture = texture; this.cachedTint = 0xFFFFFF; }; @@ -147,28 +141,26 @@ /** * When the texture is updated, this event will fire to update the scale and frame * - * @method onTextureUpdate - * @param event * @private */ -PIXI.Sprite.prototype.onTextureUpdate = function() -{ +Sprite.prototype.onTextureUpdate = function () { // so if _width is 0 then width was not set.. - if(this._width)this.scale.x = this._width / this.texture.frame.width; - if(this._height)this.scale.y = this._height / this.texture.frame.height; + if (this._width) { + this.scale.x = this._width / this.texture.frame.width; + } - //this.updateFrame = true; + if (this._height) { + this.scale.y = this._height / this.texture.frame.height; + } }; /** -* Returns the bounds of the Sprite as a rectangle. The bounds calculation takes the worldTransform into account. -* -* @method getBounds -* @param matrix {Matrix} the transformation matrix of the sprite -* @return {Rectangle} the framing rectangle -*/ -PIXI.Sprite.prototype.getBounds = function(matrix) -{ + * Returns the bounds of the Sprite as a rectangle. The bounds calculation takes the worldTransform into account. + * + * @param matrix {Matrix} the transformation matrix of the sprite + * @return {Rectangle} the framing rectangle + */ +Sprite.prototype.getBounds = function (matrix) { var width = this.texture.frame.width; var height = this.texture.frame.height; @@ -200,7 +192,7 @@ if(d < 0)d *= -1; // this means there is no rotation going on right? RIGHT? - // if thats the case then we can avoid checking the bound values! yay + // if thats the case then we can avoid checking the bound values! yay minX = a * w1 + tx; maxX = a * w0 + tx; minY = d * h1 + ty; @@ -256,33 +248,30 @@ }; /** -* Renders the object using the WebGL renderer -* -* @method _renderWebGL -* @param renderSession {RenderSession} -* @private -*/ -PIXI.Sprite.prototype._renderWebGL = function(renderSession) -{ + * Renders the object using the WebGL renderer + * + * @param renderSession {RenderSession} + * @private + */ +Sprite.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } - var i,j; + var i, j; // do a quick check to see if this element has a mask or a filter. - if(this._mask || this._filters) - { - var spriteBatch = renderSession.spriteBatch; + if (this._mask || this._filters) { + var spriteBatch = renderSession.spriteBatch; // push filter first as we need to ensure the stencil buffer is correct for any masking - if(this._filters) - { + if (this._filters) { spriteBatch.flush(); renderSession.filterManager.pushFilter(this._filterBlock); } - if(this._mask) - { + if (this._mask) { spriteBatch.stop(); renderSession.maskManager.pushMask(this.mask, renderSession); spriteBatch.start(); @@ -292,26 +281,28 @@ spriteBatch.render(this); // now loop through the children and make sure they get rendered - for(i=0,j=this.children.length; i= 0 && index <= this.children.length) - { - if(child.parent) - { +DisplayObjectContainer.prototype.addChildAt = function (child, index) { + if (index >= 0 && index <= this.children.length) { + if (child.parent) { child.parent.removeChild(child); } @@ -120,12 +106,13 @@ this.children.splice(index, 0, child); - if(this.stage)child.setStageReference(this.stage); + if (this.stage) { + child.setStageReference(this.stage); + } return child; } - else - { + else { throw new Error(child + 'addChildAt: The index '+ index +' supplied is out of bounds ' + this.children.length); } }; @@ -133,59 +120,54 @@ /** * Swaps the position of 2 Display Objects within this container. * - * @method swapChildren * @param child {DisplayObject} * @param child2 {DisplayObject} */ -PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) -{ - if(child === child2) { +DisplayObjectContainer.prototype.swapChildren = function (child, child2) { + if (child === child2) { return; } var index1 = this.getChildIndex(child); var index2 = this.getChildIndex(child2); - if(index1 < 0 || index2 < 0) { + if (index1 < 0 || index2 < 0) { throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); } this.children[index1] = child2; this.children[index2] = child; - }; /** * Returns the index position of a child DisplayObject instance * - * @method getChildIndex * @param child {DisplayObject} The DisplayObject instance to identify * @return {Number} The index position of the child display object to identify */ -PIXI.DisplayObjectContainer.prototype.getChildIndex = function(child) -{ +DisplayObjectContainer.prototype.getChildIndex = function (child) { var index = this.children.indexOf(child); - if (index === -1) - { + + if (index === -1) { throw new Error('The supplied DisplayObject must be a child of the caller'); } + return index; }; /** * Changes the position of an existing child in the display object container * - * @method setChildIndex * @param child {DisplayObject} The child DisplayObject instance for which you want to change the index number * @param index {Number} The resulting index number for the child display object */ -PIXI.DisplayObjectContainer.prototype.setChildIndex = function(child, index) -{ - if (index < 0 || index >= this.children.length) - { +DisplayObjectContainer.prototype.setChildIndex = function (child, index) { + if (index < 0 || index >= this.children.length) { throw new Error('The supplied index is out of bounds'); } + var currentIndex = this.getChildIndex(child); + this.children.splice(currentIndex, 1); //remove from old position this.children.splice(index, 0, child); //add at new position }; @@ -193,121 +175,119 @@ /** * Returns the child at the specified index * - * @method getChildAt * @param index {Number} The index to get the child from * @return {DisplayObject} The child at the given index, if any. */ -PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) -{ - if (index < 0 || index >= this.children.length) - { - throw new Error('getChildAt: Supplied index '+ index +' does not exist in the child list, or the supplied DisplayObject must be a child of the caller'); +DisplayObjectContainer.prototype.getChildAt = function (index) { + if (index < 0 || index >= this.children.length) { + throw new Error('getChildAt: Supplied index ' + index + ' does not exist in the child list, or the supplied DisplayObject must be a child of the caller'); } + return this.children[index]; - }; /** * Removes a child from the container. * - * @method removeChild * @param child {DisplayObject} The DisplayObject to remove * @return {DisplayObject} The child that was removed. */ -PIXI.DisplayObjectContainer.prototype.removeChild = function(child) -{ - var index = this.children.indexOf( child ); - if(index === -1)return; - - return this.removeChildAt( index ); +DisplayObjectContainer.prototype.removeChild = function (child) { + var index = this.children.indexOf(child); + + if (index === -1) { + return; + } + + return this.removeChildAt(index); }; /** * Removes a child from the specified index position. * - * @method removeChildAt * @param index {Number} The index to get the child from * @return {DisplayObject} The child that was removed. */ -PIXI.DisplayObjectContainer.prototype.removeChildAt = function(index) -{ - var child = this.getChildAt( index ); - if(this.stage) - child.removeStageReference(); +DisplayObjectContainer.prototype.removeChildAt = function (index) { + var child = this.getChildAt(index); - child.parent = undefined; - this.children.splice( index, 1 ); + if (this.stage) { + child.removeStageReference(); + } + + child.parent = null; + this.children.splice(index, 1); + return child; }; /** -* Removes all children from this container that are within the begin and end indexes. -* -* @method removeChildren -* @param beginIndex {Number} The beginning position. Default value is 0. -* @param endIndex {Number} The ending position. Default value is size of the container. -*/ -PIXI.DisplayObjectContainer.prototype.removeChildren = function(beginIndex, endIndex) -{ + * Removes all children from this container that are within the begin and end indexes. + * + * @param beginIndex {Number} The beginning position. Default value is 0. + * @param endIndex {Number} The ending position. Default value is size of the container. + */ +DisplayObjectContainer.prototype.removeChildren = function (beginIndex, endIndex) { var begin = beginIndex || 0; var end = typeof endIndex === 'number' ? endIndex : this.children.length; var range = end - begin; - if (range > 0 && range <= end) - { + if (range > 0 && range <= end) { var removed = this.children.splice(begin, range); - for (var i = 0; i < removed.length; i++) { + + for (var i = 0; i < removed.length; ++i) { var child = removed[i]; - if(this.stage) + + if (this.stage) { child.removeStageReference(); - child.parent = undefined; + } + + child.parent = null; } + return removed; } - else if (range === 0 && this.children.length === 0) - { + else if (range === 0 && this.children.length === 0) { return []; } - else - { - throw new Error( 'removeChildren: Range Error, numeric values are outside the acceptable range' ); + else { + throw new RangeError('removeChildren: numeric values are outside the acceptable range.'); } }; /* * Updates the transform on all children of this container for rendering * - * @method updateTransform * @private */ -PIXI.DisplayObjectContainer.prototype.updateTransform = function() -{ - if(!this.visible)return; +DisplayObjectContainer.prototype.updateTransform = function () { + if (!this.visible) { + return; + } this.displayObjectUpdateTransform(); - //PIXI.DisplayObject.prototype.updateTransform.call( this ); + if (this._cacheAsBitmap) { + return; + } - if(this._cacheAsBitmap)return; - - for(var i=0,j=this.children.length; i childMaxY ? maxY : childMaxY; } - if(!childVisible) - return PIXI.EmptyRectangle; + if (!childVisible) { + return math.Rectangle.EMPTY; + } - var bounds = this._bounds; - - bounds.x = minX; - bounds.y = minY; - bounds.width = maxX - minX; - bounds.height = maxY - minY; + this._bounds.x = minX; + this._bounds.y = minY; + this._bounds.width = maxX - minX; + this._bounds.height = maxY - minY; // TODO: store a reference so that if this function gets called again in the render cycle we do not have to recalculate //this._currentBounds = bounds; - - return bounds; + + return this._bounds; }; /** - * Retrieves the non-global local bounds of the displayObjectContainer as a rectangle. The calculation takes all visible children into consideration. + * Retrieves the non-global local bounds of the displayObjectContainer as a rectangle. + * The calculation takes all visible children into consideration. * - * @method getLocalBounds * @return {Rectangle} The rectangular bounding area */ -PIXI.DisplayObjectContainer.prototype.getLocalBounds = function() -{ +DisplayObjectContainer.prototype.getLocalBounds = function () { var matrixCache = this.worldTransform; - this.worldTransform = PIXI.identityMatrix; + this.worldTransform = math.Matrix.IDENTITY; - for(var i=0,j=this.children.length; i= this.textures.length) - { + else if (round >= this.textures.length) { this.gotoAndStop(this.textures.length - 1); - if(this.onComplete) - { + + if (this.onComplete) { this.onComplete(); } } @@ -170,36 +154,30 @@ * A short hand way of creating a movieclip from an array of frame ids * * @static - * @method fromFrames - * @param frames {Array} the array of frames ids the movieclip will use as its texture frames + * @param frames {string[]} the array of frames ids the movieclip will use as its texture frames */ -PIXI.MovieClip.fromFrames = function(frames) -{ +MovieClip.fromFrames = function (frames) { var textures = []; - for (var i = 0; i < frames.length; i++) - { + for (var i = 0; i < frames.length; ++i) { textures.push(new PIXI.Texture.fromFrame(frames[i])); } - return new PIXI.MovieClip(textures); + return new MovieClip(textures); }; /** * A short hand way of creating a movieclip from an array of image ids * * @static - * @method fromImages - * @param frames {Array} the array of image ids the movieclip will use as its texture frames + * @param images {string[]} the array of image urls the movieclip will use as its texture frames */ -PIXI.MovieClip.fromImages = function(images) -{ +MovieClip.fromImages = function (images) { var textures = []; - for (var i = 0; i < images.length; i++) - { + for (var i = 0; i < images.length; ++i) { textures.push(new PIXI.Texture.fromImage(images[i])); } - return new PIXI.MovieClip(textures); + return new MovieClip(textures); }; diff --git a/src/display/Sprite.js b/src/display/Sprite.js index aab559a..849e0f3 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,23 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var math = require('../math'), + Texture = require('../textures/Texture'), + DisplayObjectContainer = require('./DisplayObjectContainer'); /** * The Sprite object is the base for all textured objects that are rendered to the screen * + * A sprite can be created directly from an image like this: + * + * ```js + * var sprite = new Sprite.fromImage('assets/image.png'); + * yourStage.addChild(sprite); + * ``` + * + * then obviously don't forget to add it to the stage you have already created + * * @class Sprite * @extends DisplayObjectContainer - * @constructor + * @namespace PIXI * @param texture {Texture} The texture for this sprite - * - * A sprite can be created directly from an image like this : - * var sprite = new PIXI.Sprite.fromImage('assets/image.png'); - * yourStage.addChild(sprite); - * then obviously don't forget to add it to the stage you have already created */ -PIXI.Sprite = function(texture) -{ - PIXI.DisplayObjectContainer.call( this ); +function Sprite(texture) { + DisplayObjectContainer.call(this); /** * The anchor sets the origin point of the texture. @@ -25,24 +28,21 @@ * Setting than anchor to 0.5,0.5 means the textures origin is centered * Setting the anchor to 1,1 would mean the textures origin points will be the bottom right corner * - * @property anchor - * @type Point + * @member {Point} */ - this.anchor = new PIXI.Point(); + this.anchor = new math.Point(); /** * The texture that the sprite is using * - * @property texture - * @type Texture + * @member {Texture} */ - this.texture = texture || PIXI.Texture.emptyTexture; - + this.texture = texture || Texture.EMPTY; + /** * The width of the sprite (this is initially set by the texture) * - * @property _width - * @type Number + * @member {number} * @private */ this._width = 0; @@ -50,8 +50,7 @@ /** * The height of the sprite (this is initially set by the texture) * - * @property _height - * @type Number + * @member {number} * @private */ this._height = 0; @@ -59,8 +58,7 @@ /** * The tint applied to the sprite. This is a hex value. A value of 0xFFFFFF will remove any tint effect. * - * @property tint - * @type Number + * @member {number} * @default 0xFFFFFF */ this.tint = 0xFFFFFF; @@ -68,8 +66,7 @@ /** * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. * - * @property blendMode - * @type Number + * @member {number} * @default PIXI.blendModes.NORMAL; */ this.blendMode = PIXI.blendModes.NORMAL; @@ -77,69 +74,66 @@ /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. * - * @property shader - * @type AbstractFilter - * @default null + * @member {AbstractFilter} */ this.shader = null; - if(this.texture.baseTexture.hasLoaded) - { + // wait for the texture to load + if (this.texture.baseTexture.hasLoaded) { this.onTextureUpdate(); } - else - { - this.texture.on( 'update', this.onTextureUpdate.bind(this) ); + else { + this.texture.on('update', this.onTextureUpdate.bind(this)); } this.renderable = true; - -}; +} // constructor -PIXI.Sprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); -PIXI.Sprite.prototype.constructor = PIXI.Sprite; +Sprite.prototype = Object.create(DisplayObjectContainer.prototype); +Sprite.prototype.constructor = Sprite; +module.exports = Sprite; -/** - * The width of the sprite, setting this will actually modify the scale to achieve the value set - * - * @property width - * @type Number - */ -Object.defineProperty(PIXI.Sprite.prototype, 'width', { - get: function() { - return this.scale.x * this.texture.frame.width; +Object.defineProperties(Sprite.prototype, { + /** + * The width of the sprite, setting this will actually modify the scale to achieve the value set + * + * @member + * @memberof Sprite# + */ + width: { + get: function () { + return this.scale.x * this.texture.frame.width; + }, + set: function (value) { + this.scale.x = value / this.texture.frame.width; + this._width = value; + } }, - set: function(value) { - this.scale.x = value / this.texture.frame.width; - this._width = value; - } -}); -/** - * The height of the sprite, setting this will actually modify the scale to achieve the value set - * - * @property height - * @type Number - */ -Object.defineProperty(PIXI.Sprite.prototype, 'height', { - get: function() { - return this.scale.y * this.texture.frame.height; - }, - set: function(value) { - this.scale.y = value / this.texture.frame.height; - this._height = value; + /** + * The height of the sprite, setting this will actually modify the scale to achieve the value set + * + * @member + * @memberof Sprite# + */ + height: { + get: function () { + return this.scale.y * this.texture.frame.height; + }, + set: function (value) { + this.scale.y = value / this.texture.frame.height; + this._height = value; + } } }); /** * Sets the texture of the sprite * - * @method setTexture * @param texture {Texture} The PIXI texture that is displayed by the sprite */ -PIXI.Sprite.prototype.setTexture = function(texture) -{ +Sprite.prototype.setTexture = function (texture) { this.texture = texture; this.cachedTint = 0xFFFFFF; }; @@ -147,28 +141,26 @@ /** * When the texture is updated, this event will fire to update the scale and frame * - * @method onTextureUpdate - * @param event * @private */ -PIXI.Sprite.prototype.onTextureUpdate = function() -{ +Sprite.prototype.onTextureUpdate = function () { // so if _width is 0 then width was not set.. - if(this._width)this.scale.x = this._width / this.texture.frame.width; - if(this._height)this.scale.y = this._height / this.texture.frame.height; + if (this._width) { + this.scale.x = this._width / this.texture.frame.width; + } - //this.updateFrame = true; + if (this._height) { + this.scale.y = this._height / this.texture.frame.height; + } }; /** -* Returns the bounds of the Sprite as a rectangle. The bounds calculation takes the worldTransform into account. -* -* @method getBounds -* @param matrix {Matrix} the transformation matrix of the sprite -* @return {Rectangle} the framing rectangle -*/ -PIXI.Sprite.prototype.getBounds = function(matrix) -{ + * Returns the bounds of the Sprite as a rectangle. The bounds calculation takes the worldTransform into account. + * + * @param matrix {Matrix} the transformation matrix of the sprite + * @return {Rectangle} the framing rectangle + */ +Sprite.prototype.getBounds = function (matrix) { var width = this.texture.frame.width; var height = this.texture.frame.height; @@ -200,7 +192,7 @@ if(d < 0)d *= -1; // this means there is no rotation going on right? RIGHT? - // if thats the case then we can avoid checking the bound values! yay + // if thats the case then we can avoid checking the bound values! yay minX = a * w1 + tx; maxX = a * w0 + tx; minY = d * h1 + ty; @@ -256,33 +248,30 @@ }; /** -* Renders the object using the WebGL renderer -* -* @method _renderWebGL -* @param renderSession {RenderSession} -* @private -*/ -PIXI.Sprite.prototype._renderWebGL = function(renderSession) -{ + * Renders the object using the WebGL renderer + * + * @param renderSession {RenderSession} + * @private + */ +Sprite.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } - var i,j; + var i, j; // do a quick check to see if this element has a mask or a filter. - if(this._mask || this._filters) - { - var spriteBatch = renderSession.spriteBatch; + if (this._mask || this._filters) { + var spriteBatch = renderSession.spriteBatch; // push filter first as we need to ensure the stencil buffer is correct for any masking - if(this._filters) - { + if (this._filters) { spriteBatch.flush(); renderSession.filterManager.pushFilter(this._filterBlock); } - if(this._mask) - { + if (this._mask) { spriteBatch.stop(); renderSession.maskManager.pushMask(this.mask, renderSession); spriteBatch.start(); @@ -292,26 +281,28 @@ spriteBatch.render(this); // now loop through the children and make sure they get rendered - for(i=0,j=this.children.length; i= 0 && index <= this.children.length) - { - if(child.parent) - { +DisplayObjectContainer.prototype.addChildAt = function (child, index) { + if (index >= 0 && index <= this.children.length) { + if (child.parent) { child.parent.removeChild(child); } @@ -120,12 +106,13 @@ this.children.splice(index, 0, child); - if(this.stage)child.setStageReference(this.stage); + if (this.stage) { + child.setStageReference(this.stage); + } return child; } - else - { + else { throw new Error(child + 'addChildAt: The index '+ index +' supplied is out of bounds ' + this.children.length); } }; @@ -133,59 +120,54 @@ /** * Swaps the position of 2 Display Objects within this container. * - * @method swapChildren * @param child {DisplayObject} * @param child2 {DisplayObject} */ -PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) -{ - if(child === child2) { +DisplayObjectContainer.prototype.swapChildren = function (child, child2) { + if (child === child2) { return; } var index1 = this.getChildIndex(child); var index2 = this.getChildIndex(child2); - if(index1 < 0 || index2 < 0) { + if (index1 < 0 || index2 < 0) { throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); } this.children[index1] = child2; this.children[index2] = child; - }; /** * Returns the index position of a child DisplayObject instance * - * @method getChildIndex * @param child {DisplayObject} The DisplayObject instance to identify * @return {Number} The index position of the child display object to identify */ -PIXI.DisplayObjectContainer.prototype.getChildIndex = function(child) -{ +DisplayObjectContainer.prototype.getChildIndex = function (child) { var index = this.children.indexOf(child); - if (index === -1) - { + + if (index === -1) { throw new Error('The supplied DisplayObject must be a child of the caller'); } + return index; }; /** * Changes the position of an existing child in the display object container * - * @method setChildIndex * @param child {DisplayObject} The child DisplayObject instance for which you want to change the index number * @param index {Number} The resulting index number for the child display object */ -PIXI.DisplayObjectContainer.prototype.setChildIndex = function(child, index) -{ - if (index < 0 || index >= this.children.length) - { +DisplayObjectContainer.prototype.setChildIndex = function (child, index) { + if (index < 0 || index >= this.children.length) { throw new Error('The supplied index is out of bounds'); } + var currentIndex = this.getChildIndex(child); + this.children.splice(currentIndex, 1); //remove from old position this.children.splice(index, 0, child); //add at new position }; @@ -193,121 +175,119 @@ /** * Returns the child at the specified index * - * @method getChildAt * @param index {Number} The index to get the child from * @return {DisplayObject} The child at the given index, if any. */ -PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) -{ - if (index < 0 || index >= this.children.length) - { - throw new Error('getChildAt: Supplied index '+ index +' does not exist in the child list, or the supplied DisplayObject must be a child of the caller'); +DisplayObjectContainer.prototype.getChildAt = function (index) { + if (index < 0 || index >= this.children.length) { + throw new Error('getChildAt: Supplied index ' + index + ' does not exist in the child list, or the supplied DisplayObject must be a child of the caller'); } + return this.children[index]; - }; /** * Removes a child from the container. * - * @method removeChild * @param child {DisplayObject} The DisplayObject to remove * @return {DisplayObject} The child that was removed. */ -PIXI.DisplayObjectContainer.prototype.removeChild = function(child) -{ - var index = this.children.indexOf( child ); - if(index === -1)return; - - return this.removeChildAt( index ); +DisplayObjectContainer.prototype.removeChild = function (child) { + var index = this.children.indexOf(child); + + if (index === -1) { + return; + } + + return this.removeChildAt(index); }; /** * Removes a child from the specified index position. * - * @method removeChildAt * @param index {Number} The index to get the child from * @return {DisplayObject} The child that was removed. */ -PIXI.DisplayObjectContainer.prototype.removeChildAt = function(index) -{ - var child = this.getChildAt( index ); - if(this.stage) - child.removeStageReference(); +DisplayObjectContainer.prototype.removeChildAt = function (index) { + var child = this.getChildAt(index); - child.parent = undefined; - this.children.splice( index, 1 ); + if (this.stage) { + child.removeStageReference(); + } + + child.parent = null; + this.children.splice(index, 1); + return child; }; /** -* Removes all children from this container that are within the begin and end indexes. -* -* @method removeChildren -* @param beginIndex {Number} The beginning position. Default value is 0. -* @param endIndex {Number} The ending position. Default value is size of the container. -*/ -PIXI.DisplayObjectContainer.prototype.removeChildren = function(beginIndex, endIndex) -{ + * Removes all children from this container that are within the begin and end indexes. + * + * @param beginIndex {Number} The beginning position. Default value is 0. + * @param endIndex {Number} The ending position. Default value is size of the container. + */ +DisplayObjectContainer.prototype.removeChildren = function (beginIndex, endIndex) { var begin = beginIndex || 0; var end = typeof endIndex === 'number' ? endIndex : this.children.length; var range = end - begin; - if (range > 0 && range <= end) - { + if (range > 0 && range <= end) { var removed = this.children.splice(begin, range); - for (var i = 0; i < removed.length; i++) { + + for (var i = 0; i < removed.length; ++i) { var child = removed[i]; - if(this.stage) + + if (this.stage) { child.removeStageReference(); - child.parent = undefined; + } + + child.parent = null; } + return removed; } - else if (range === 0 && this.children.length === 0) - { + else if (range === 0 && this.children.length === 0) { return []; } - else - { - throw new Error( 'removeChildren: Range Error, numeric values are outside the acceptable range' ); + else { + throw new RangeError('removeChildren: numeric values are outside the acceptable range.'); } }; /* * Updates the transform on all children of this container for rendering * - * @method updateTransform * @private */ -PIXI.DisplayObjectContainer.prototype.updateTransform = function() -{ - if(!this.visible)return; +DisplayObjectContainer.prototype.updateTransform = function () { + if (!this.visible) { + return; + } this.displayObjectUpdateTransform(); - //PIXI.DisplayObject.prototype.updateTransform.call( this ); + if (this._cacheAsBitmap) { + return; + } - if(this._cacheAsBitmap)return; - - for(var i=0,j=this.children.length; i childMaxY ? maxY : childMaxY; } - if(!childVisible) - return PIXI.EmptyRectangle; + if (!childVisible) { + return math.Rectangle.EMPTY; + } - var bounds = this._bounds; - - bounds.x = minX; - bounds.y = minY; - bounds.width = maxX - minX; - bounds.height = maxY - minY; + this._bounds.x = minX; + this._bounds.y = minY; + this._bounds.width = maxX - minX; + this._bounds.height = maxY - minY; // TODO: store a reference so that if this function gets called again in the render cycle we do not have to recalculate //this._currentBounds = bounds; - - return bounds; + + return this._bounds; }; /** - * Retrieves the non-global local bounds of the displayObjectContainer as a rectangle. The calculation takes all visible children into consideration. + * Retrieves the non-global local bounds of the displayObjectContainer as a rectangle. + * The calculation takes all visible children into consideration. * - * @method getLocalBounds * @return {Rectangle} The rectangular bounding area */ -PIXI.DisplayObjectContainer.prototype.getLocalBounds = function() -{ +DisplayObjectContainer.prototype.getLocalBounds = function () { var matrixCache = this.worldTransform; - this.worldTransform = PIXI.identityMatrix; + this.worldTransform = math.Matrix.IDENTITY; - for(var i=0,j=this.children.length; i= this.textures.length) - { + else if (round >= this.textures.length) { this.gotoAndStop(this.textures.length - 1); - if(this.onComplete) - { + + if (this.onComplete) { this.onComplete(); } } @@ -170,36 +154,30 @@ * A short hand way of creating a movieclip from an array of frame ids * * @static - * @method fromFrames - * @param frames {Array} the array of frames ids the movieclip will use as its texture frames + * @param frames {string[]} the array of frames ids the movieclip will use as its texture frames */ -PIXI.MovieClip.fromFrames = function(frames) -{ +MovieClip.fromFrames = function (frames) { var textures = []; - for (var i = 0; i < frames.length; i++) - { + for (var i = 0; i < frames.length; ++i) { textures.push(new PIXI.Texture.fromFrame(frames[i])); } - return new PIXI.MovieClip(textures); + return new MovieClip(textures); }; /** * A short hand way of creating a movieclip from an array of image ids * * @static - * @method fromImages - * @param frames {Array} the array of image ids the movieclip will use as its texture frames + * @param images {string[]} the array of image urls the movieclip will use as its texture frames */ -PIXI.MovieClip.fromImages = function(images) -{ +MovieClip.fromImages = function (images) { var textures = []; - for (var i = 0; i < images.length; i++) - { + for (var i = 0; i < images.length; ++i) { textures.push(new PIXI.Texture.fromImage(images[i])); } - return new PIXI.MovieClip(textures); + return new MovieClip(textures); }; diff --git a/src/display/Sprite.js b/src/display/Sprite.js index aab559a..849e0f3 100644 --- a/src/display/Sprite.js +++ b/src/display/Sprite.js @@ -1,23 +1,26 @@ -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ +var math = require('../math'), + Texture = require('../textures/Texture'), + DisplayObjectContainer = require('./DisplayObjectContainer'); /** * The Sprite object is the base for all textured objects that are rendered to the screen * + * A sprite can be created directly from an image like this: + * + * ```js + * var sprite = new Sprite.fromImage('assets/image.png'); + * yourStage.addChild(sprite); + * ``` + * + * then obviously don't forget to add it to the stage you have already created + * * @class Sprite * @extends DisplayObjectContainer - * @constructor + * @namespace PIXI * @param texture {Texture} The texture for this sprite - * - * A sprite can be created directly from an image like this : - * var sprite = new PIXI.Sprite.fromImage('assets/image.png'); - * yourStage.addChild(sprite); - * then obviously don't forget to add it to the stage you have already created */ -PIXI.Sprite = function(texture) -{ - PIXI.DisplayObjectContainer.call( this ); +function Sprite(texture) { + DisplayObjectContainer.call(this); /** * The anchor sets the origin point of the texture. @@ -25,24 +28,21 @@ * Setting than anchor to 0.5,0.5 means the textures origin is centered * Setting the anchor to 1,1 would mean the textures origin points will be the bottom right corner * - * @property anchor - * @type Point + * @member {Point} */ - this.anchor = new PIXI.Point(); + this.anchor = new math.Point(); /** * The texture that the sprite is using * - * @property texture - * @type Texture + * @member {Texture} */ - this.texture = texture || PIXI.Texture.emptyTexture; - + this.texture = texture || Texture.EMPTY; + /** * The width of the sprite (this is initially set by the texture) * - * @property _width - * @type Number + * @member {number} * @private */ this._width = 0; @@ -50,8 +50,7 @@ /** * The height of the sprite (this is initially set by the texture) * - * @property _height - * @type Number + * @member {number} * @private */ this._height = 0; @@ -59,8 +58,7 @@ /** * The tint applied to the sprite. This is a hex value. A value of 0xFFFFFF will remove any tint effect. * - * @property tint - * @type Number + * @member {number} * @default 0xFFFFFF */ this.tint = 0xFFFFFF; @@ -68,8 +66,7 @@ /** * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode. * - * @property blendMode - * @type Number + * @member {number} * @default PIXI.blendModes.NORMAL; */ this.blendMode = PIXI.blendModes.NORMAL; @@ -77,69 +74,66 @@ /** * The shader that will be used to render the texture to the stage. Set to null to remove a current shader. * - * @property shader - * @type AbstractFilter - * @default null + * @member {AbstractFilter} */ this.shader = null; - if(this.texture.baseTexture.hasLoaded) - { + // wait for the texture to load + if (this.texture.baseTexture.hasLoaded) { this.onTextureUpdate(); } - else - { - this.texture.on( 'update', this.onTextureUpdate.bind(this) ); + else { + this.texture.on('update', this.onTextureUpdate.bind(this)); } this.renderable = true; - -}; +} // constructor -PIXI.Sprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); -PIXI.Sprite.prototype.constructor = PIXI.Sprite; +Sprite.prototype = Object.create(DisplayObjectContainer.prototype); +Sprite.prototype.constructor = Sprite; +module.exports = Sprite; -/** - * The width of the sprite, setting this will actually modify the scale to achieve the value set - * - * @property width - * @type Number - */ -Object.defineProperty(PIXI.Sprite.prototype, 'width', { - get: function() { - return this.scale.x * this.texture.frame.width; +Object.defineProperties(Sprite.prototype, { + /** + * The width of the sprite, setting this will actually modify the scale to achieve the value set + * + * @member + * @memberof Sprite# + */ + width: { + get: function () { + return this.scale.x * this.texture.frame.width; + }, + set: function (value) { + this.scale.x = value / this.texture.frame.width; + this._width = value; + } }, - set: function(value) { - this.scale.x = value / this.texture.frame.width; - this._width = value; - } -}); -/** - * The height of the sprite, setting this will actually modify the scale to achieve the value set - * - * @property height - * @type Number - */ -Object.defineProperty(PIXI.Sprite.prototype, 'height', { - get: function() { - return this.scale.y * this.texture.frame.height; - }, - set: function(value) { - this.scale.y = value / this.texture.frame.height; - this._height = value; + /** + * The height of the sprite, setting this will actually modify the scale to achieve the value set + * + * @member + * @memberof Sprite# + */ + height: { + get: function () { + return this.scale.y * this.texture.frame.height; + }, + set: function (value) { + this.scale.y = value / this.texture.frame.height; + this._height = value; + } } }); /** * Sets the texture of the sprite * - * @method setTexture * @param texture {Texture} The PIXI texture that is displayed by the sprite */ -PIXI.Sprite.prototype.setTexture = function(texture) -{ +Sprite.prototype.setTexture = function (texture) { this.texture = texture; this.cachedTint = 0xFFFFFF; }; @@ -147,28 +141,26 @@ /** * When the texture is updated, this event will fire to update the scale and frame * - * @method onTextureUpdate - * @param event * @private */ -PIXI.Sprite.prototype.onTextureUpdate = function() -{ +Sprite.prototype.onTextureUpdate = function () { // so if _width is 0 then width was not set.. - if(this._width)this.scale.x = this._width / this.texture.frame.width; - if(this._height)this.scale.y = this._height / this.texture.frame.height; + if (this._width) { + this.scale.x = this._width / this.texture.frame.width; + } - //this.updateFrame = true; + if (this._height) { + this.scale.y = this._height / this.texture.frame.height; + } }; /** -* Returns the bounds of the Sprite as a rectangle. The bounds calculation takes the worldTransform into account. -* -* @method getBounds -* @param matrix {Matrix} the transformation matrix of the sprite -* @return {Rectangle} the framing rectangle -*/ -PIXI.Sprite.prototype.getBounds = function(matrix) -{ + * Returns the bounds of the Sprite as a rectangle. The bounds calculation takes the worldTransform into account. + * + * @param matrix {Matrix} the transformation matrix of the sprite + * @return {Rectangle} the framing rectangle + */ +Sprite.prototype.getBounds = function (matrix) { var width = this.texture.frame.width; var height = this.texture.frame.height; @@ -200,7 +192,7 @@ if(d < 0)d *= -1; // this means there is no rotation going on right? RIGHT? - // if thats the case then we can avoid checking the bound values! yay + // if thats the case then we can avoid checking the bound values! yay minX = a * w1 + tx; maxX = a * w0 + tx; minY = d * h1 + ty; @@ -256,33 +248,30 @@ }; /** -* Renders the object using the WebGL renderer -* -* @method _renderWebGL -* @param renderSession {RenderSession} -* @private -*/ -PIXI.Sprite.prototype._renderWebGL = function(renderSession) -{ + * Renders the object using the WebGL renderer + * + * @param renderSession {RenderSession} + * @private + */ +Sprite.prototype._renderWebGL = function (renderSession) { // if the sprite is not visible or the alpha is 0 then no need to render this element - if(!this.visible || this.alpha <= 0)return; + if (!this.visible || this.alpha <= 0) { + return; + } - var i,j; + var i, j; // do a quick check to see if this element has a mask or a filter. - if(this._mask || this._filters) - { - var spriteBatch = renderSession.spriteBatch; + if (this._mask || this._filters) { + var spriteBatch = renderSession.spriteBatch; // push filter first as we need to ensure the stencil buffer is correct for any masking - if(this._filters) - { + if (this._filters) { spriteBatch.flush(); renderSession.filterManager.pushFilter(this._filterBlock); } - if(this._mask) - { + if (this._mask) { spriteBatch.stop(); renderSession.maskManager.pushMask(this.mask, renderSession); spriteBatch.start(); @@ -292,26 +281,28 @@ spriteBatch.render(this); // now loop through the children and make sure they get rendered - for(i=0,j=this.children.length; i