diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 50505fb..e5b86fd 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -1,10 +1,10 @@ /** * @license - * pixi.js - v1.6.1 + * pixi.js - v2.0.0 * Copyright (c) 2012-2014, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2014-10-14 + * Compiled: 2014-10-23 * * pixi.js is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -35,7 +35,7 @@ PIXI.CANVAS_RENDERER = 1; // useful for testing against if your lib is using pixi. -PIXI.VERSION = "v1.6.1"; +PIXI.VERSION = "v2.0.0"; // the various blend modes supported by pixi @@ -84,12 +84,25 @@ PIXI.INTERACTION_FREQUENCY = 30; PIXI.AUTO_PREVENT_DEFAULT = true; +PIXI.PI_2 = Math.PI * 2; PIXI.RAD_TO_DEG = 180 / Math.PI; PIXI.DEG_TO_RAD = Math.PI / 180; +PIXI.RETINA_PREFIX = "@2x"; +//PIXI.SCALE_PREFIX "@x%%"; PIXI.dontSayHello = false; + +PIXI.defaultRenderOptions = { + view:null, + transparent:false, + antialias:false, + preserveDrawingBuffer:false, + resolution:1, + clearBeforeRender:true +} + PIXI.sayHello = function (type) { if(PIXI.dontSayHello)return; @@ -163,7 +176,7 @@ /** * Sets the point to a new x and y position. - * If y is ommited, both x and y will be set to x. + * If y is omitted, both x and y will be set to x. * * @method set * @param [x=0] {Number} position of the point on the x axis @@ -186,8 +199,8 @@ * * @class Rectangle * @constructor - * @param x {Number} The X coord of the upper-left corner of the rectangle - * @param y {Number} The Y coord of the upper-left corner of the rectangle + * @param x {Number} The X coordinate of the upper-left corner of the rectangle + * @param y {Number} The Y coordinate of the upper-left corner of the rectangle * @param width {Number} The overall width of this rectangle * @param height {Number} The overall height of this rectangle */ @@ -234,12 +247,12 @@ }; /** - * Checks whether the x and y coordinates passed to this function are contained within this Rectangle + * Checks whether the x and y coordinates given are contained within this Rectangle * * @method contains * @param x {Number} The X coordinate of the point to test * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coords are within this Rectangle + * @return {Boolean} Whether the x/y coordinates are within this Rectangle */ PIXI.Rectangle.prototype.contains = function(x, y) { @@ -280,21 +293,21 @@ PIXI.Polygon = function(points) { //if points isn't an array, use arguments as the array - if(!(points instanceof Array)) - points = Array.prototype.slice.call(arguments); + if(!(points instanceof Array))points = Array.prototype.slice.call(arguments); //if this is a flat array of numbers, convert it to points - if(typeof points[0] === 'number') { + if(points[0] instanceof PIXI.Point) + { var p = []; - for(var i = 0, il = points.length; i < il; i+=2) { - p.push( - new PIXI.Point(points[i], points[i + 1]) - ); + for(var i = 0, il = points.length; i < il; i++) + { + p.push(points[i].x, points[i].y); } points = p; } + this.closed = true; this.points = points; }; @@ -306,11 +319,7 @@ */ PIXI.Polygon.prototype.clone = function() { - var points = []; - for (var i=0; i y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; @@ -383,7 +395,7 @@ * Creates a clone of this Circle instance * * @method clone - * @return {Circle} a copy of the polygon + * @return {Circle} a copy of the Circle */ PIXI.Circle.prototype.clone = function() { @@ -391,12 +403,12 @@ }; /** - * Checks whether the x, and y coordinates passed to this function are contained within this circle + * Checks whether the x and y coordinates given are contained within this circle * * @method contains * @param x {Number} The X coordinate of the point to test * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coordinates are within this polygon + * @return {Boolean} Whether the x/y coordinates are within this Circle */ PIXI.Circle.prototype.contains = function(x, y) { @@ -421,13 +433,12 @@ */ PIXI.Circle.prototype.getBounds = function() { - return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.width, this.height); + return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); }; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; - /** * @author Chad Engler */ @@ -485,7 +496,7 @@ }; /** - * Checks whether the x and y coordinates passed to this function are contained within this ellipse + * Checks whether the x and y coordinates given are contained within this ellipse * * @method contains * @param x {Number} The X coordinate of the point to test @@ -537,19 +548,61 @@ */ PIXI.Matrix = function() { + /** + * @property a + * @type Number + * @default 1 + */ this.a = 1; + + /** + * @property b + * @type Number + * @default 0 + */ this.b = 0; + + /** + * @property c + * @type Number + * @default 0 + */ this.c = 0; + + /** + * @property d + * @type Number + * @default 1 + */ this.d = 1; + + /** + * @property tx + * @type Number + * @default 0 + */ this.tx = 0; + + /** + * @property ty + * @type Number + * @default 0 + */ this.ty = 0; }; /** - * Creates a pixi matrix object based on the array given as a parameter + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] * * @method fromArray - * @param array {Array} The array that the matrix will be filled with + * @param array {Array} The array that the matrix will be populated from. */ PIXI.Matrix.prototype.fromArray = function(array) { @@ -562,7 +615,7 @@ }; /** - * Creates an array from the current Matrix object + * Creates an array from the current Matrix object. * * @method toArray * @param transpose {Boolean} Whether we need to transpose the matrix or not @@ -570,15 +623,15 @@ */ PIXI.Matrix.prototype.toArray = function(transpose) { - if(!this.array) this.array = new Float32Array(9); + if(!this.array) this.array = new PIXI.Float32Array(9); var array = this.array; if(transpose) { array[0] = this.a; - array[1] = this.c; + array[1] = this.b; array[2] = 0; - array[3] = this.b; + array[3] = this.c; array[4] = this.d; array[5] = 0; array[6] = this.tx; @@ -588,9 +641,9 @@ else { array[0] = this.a; - array[1] = this.b; + array[1] = this.c; array[2] = this.tx; - array[3] = this.c; + array[3] = this.b; array[4] = this.d; array[5] = this.ty; array[6] = 0; @@ -601,27 +654,159 @@ return array; }; -PIXI.identityMatrix = new PIXI.Matrix(); +/** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @method apply + * @param pos {Point} The origin + * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) + * @return {Point} The new point, transformed through this matrix + */ +PIXI.Matrix.prototype.apply = function(pos, newPos) +{ + newPos = newPos || new PIXI.Point(); -PIXI.determineMatrixArrayType = function() { - return (typeof Float32Array !== 'undefined') ? Float32Array : Array; + newPos.x = this.a * pos.x + this.c * pos.y + this.tx; + newPos.y = this.b * pos.x + this.d * pos.y + this.ty; + + return newPos; }; /** - * The Matrix2 class will choose the best type of array to use between - * a regular javascript Array and a Float32Array if the latter is available + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) * - * @class Matrix2 - * @constructor + * @method applyInverse + * @param pos {Point} The origin + * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) + * @return {Point} The new point, inverse-transformed through this matrix */ -PIXI.Matrix2 = PIXI.determineMatrixArrayType(); +PIXI.Matrix.prototype.applyInverse = function(pos, newPos) +{ + newPos = newPos || new PIXI.Point(); + + var id = 1 / (this.a * this.d + this.c * -this.b); + + newPos.x = this.d * id * pos.x + -this.c * id * pos.y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * pos.y + -this.b * id * pos.x + (-this.ty * this.a + this.tx * this.b) * id; + + return newPos; +}; + +/** + * Translates the matrix on the x and y. + * + * @method translate + * @param {Number} x + * @param {Number} y + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.translate = function(x, y) +{ + this.tx += x; + this.ty += y; + + return this; +}; + +/** + * Applies a scale transformation to the matrix. + * + * @method scale + * @param {Number} x The amount to scale horizontally + * @param {Number} y The amount to scale vertically + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.scale = function(x, y) +{ + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; + + return this; +}; + + +/** + * Applies a rotation transformation to the matrix. + * @method rotate + * @param {Number} angle The angle in radians. + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.rotate = function(angle) +{ + var cos = Math.cos( angle ); + var sin = Math.sin( angle ); + + var a1 = this.a; + var c1 = this.c; + var tx1 = this.tx; + + this.a = a1 * cos-this.b * sin; + this.b = a1 * sin+this.b * cos; + this.c = c1 * cos-this.d * sin; + this.d = c1 * sin+this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; + + return this; +}; + +/** + * Appends the given Matrix to this Matrix. + * + * @method append + * @param {Matrix} matrix + * @return {Matrix} This matrix. Good for chaining method calls. + */ +PIXI.Matrix.prototype.append = function(matrix) +{ + var a1 = this.a; + var b1 = this.b; + var c1 = this.c; + var d1 = this.d; + + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; + + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + + return this; +}; + +/** + * Resets this Matix to an identity (default) matrix. + * + * @method identity + * @return {Matrix} This matrix. Good for chaining method calls. + */ +PIXI.Matrix.prototype.identity = function() +{ + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; + + return this; +}; + +PIXI.identityMatrix = new PIXI.Matrix(); /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * The base class for all objects that are rendered on the screen. + * 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 @@ -741,7 +926,7 @@ /** * 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 * @@ -752,32 +937,28 @@ * [read-only] Current transform of the object based on world (parent) factors * * @property worldTransform - * @type Mat3 + * @type Matrix * @readOnly * @private */ this.worldTransform = new PIXI.Matrix(); /** - * [NYI] Unknown + * cached sin rotation and cos rotation * - * @property color - * @type Array<> + * @property _sr + * @type Number * @private */ - this.color = []; + this._sr = 0; /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * cached sin rotation and cos rotation * - * @property dynamic - * @type Boolean + * @property _cr + * @type Number * @private */ - this.dynamic = true; - - // cached sin rotation and cos rotation - this._sr = 0; this._cr = 1; /** @@ -797,6 +978,7 @@ * @private */ this._bounds = new PIXI.Rectangle(0, 0, 1, 1); + /** * The most up-to-date bounds of the object * @@ -805,6 +987,7 @@ * @private */ this._currentBounds = null; + /** * The original, cached mask of the object * @@ -814,40 +997,29 @@ */ this._mask = null; + /** + * Cached internal flag. + * + * @property _cacheAsBitmap + * @type Boolean + * @private + */ this._cacheAsBitmap = false; + + /** + * Cached internal flag. + * + * @property _cacheIsDirty + * @type Boolean + * @private + */ this._cacheIsDirty = false; /* * MOUSE Callbacks */ - - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ - + /** * A callback that is used when the users mouse rolls over the displayObject * @method mouseover @@ -860,6 +1032,59 @@ * @param interactionData {InteractionData} */ + //Left button + /** + * A callback that is used when the users clicks on the displayObject with their mouse's left button + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse's left button down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * 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 + * @param interactionData {InteractionData} + */ + + /** + * 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 + * @param interactionData {InteractionData} + */ + + //Right button + /** + * A callback that is used when the users clicks on the displayObject with their mouse's right button + * @method rightclick + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse's right button down over the sprite + * @method rightdown + * @param interactionData {InteractionData} + */ + + /** + * 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 + * @param interactionData {InteractionData} + */ + + /** + * 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 + * @param interactionData {InteractionData} + */ /* * TOUCH Callbacks @@ -896,19 +1121,6 @@ PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; /** - * [Deprecated] Indicates if the sprite will have touch and mouse interactivity. It is false by default - * Instead of using this function you can now simply set the interactive property to true or false - * - * @method setInteractive - * @param interactive {Boolean} - * @deprecated Simply set the `interactive` property directly - */ -PIXI.DisplayObject.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; -}; - -/** * Indicates if the sprite will have touch and mouse interactivity. It is false by default * * @property interactive @@ -929,7 +1141,7 @@ }); /** - * [read-only] Indicates if the sprite is globaly visible. + * [read-only] Indicates if the sprite is globally visible. * * @property worldVisible * @type Boolean @@ -977,9 +1189,11 @@ * @type Array An array of filters */ Object.defineProperty(PIXI.DisplayObject.prototype, 'filters', { + get: function() { return this._filters; }, + set: function(value) { if(value) @@ -1004,23 +1218,24 @@ }); /** - * Set weather or not a the display objects 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 filters simply set this property to 'null' + * 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) { if(this._cacheAsBitmap === value)return; if(value) { - //this._cacheIsDirty = true; this._generateCachedSprite(); } else @@ -1040,39 +1255,67 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { + // create some matrix refs for easy access + var pt = this.parent.worldTransform; + var wt = this.worldTransform; - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); + // temporary matrix variables + var a, b, c, d, tx, ty; + + // TODO create a const for 2_PI + // so if rotation is between 0 then we can simplify the multiplication process.. + if(this.rotation % PIXI.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) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + // get the matrix values of the displayobject based on its transform properties.. + a = this._cr * this.scale.x; + b = this._sr * this.scale.x; + c = -this._sr * this.scale.y; + 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) + { + tx -= this.pivot.x * a + this.pivot.y * c; + ty -= this.pivot.x * b + this.pivot.y * d; + } + + // concat the parent matrix with the objects transform. + wt.a = a * pt.a + b * pt.c; + wt.b = a * pt.b + b * pt.d; + wt.c = c * pt.a + d * pt.c; + wt.d = c * pt.b + d * pt.d; + wt.tx = tx * pt.a + ty * pt.c + pt.tx; + wt.ty = tx * pt.b + ty * pt.d + pt.ty; + + + } + else + { + // lets do the fast version as we know there is no rotation.. + a = this.scale.x; + d = this.scale.y; + tx = this.position.x - this.pivot.x * a; + ty = this.position.y - this.pivot.y * d; + + wt.a = pt.a * a; + wt.b = pt.b * d; + wt.c = pt.c * a; + wt.d = pt.d * d; + wt.tx = tx * pt.a + ty * pt.c + pt.tx; + wt.ty = tx * pt.b + ty * pt.d + pt.ty; } - // var localTransform = this.localTransform//.toArray(); - var parentTransform = this.parent.worldTransform;//.toArray(); - var worldTransform = this.worldTransform;//.toArray(); - - var px = this.pivot.x; - var py = this.pivot.y; - - var a00 = this._cr * this.scale.x, - a01 = -this._sr * this.scale.y, - a10 = this._sr * this.scale.x, - a11 = this._cr * this.scale.y, - a02 = this.position.x - a00 * px - py * a01, - a12 = this.position.y - a11 * py - px * a10, - b00 = parentTransform.a, b01 = parentTransform.b, - b10 = parentTransform.c, b11 = parentTransform.d; - - worldTransform.a = b00 * a00 + b01 * a10; - worldTransform.b = b00 * a01 + b01 * a11; - worldTransform.tx = b00 * a02 + b01 * a12 + parentTransform.tx; - - worldTransform.c = b10 * a00 + b11 * a10; - worldTransform.d = b10 * a01 + b11 * a11; - worldTransform.ty = b10 * a02 + b11 * a12 + parentTransform.ty; - + // multiply the alphas.. this.worldAlpha = this.alpha * this.parent.worldAlpha; }; @@ -1080,9 +1323,10 @@ * 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 ) +PIXI.DisplayObject.prototype.getBounds = function(matrix) { matrix = matrix;//just to get passed js hinting (and preserve inheritance) return PIXI.EmptyRectangle; @@ -1099,7 +1343,6 @@ return this.getBounds(PIXI.identityMatrix);///PIXI.EmptyRectangle(); }; - /** * Sets the object's stage reference, the stage this object is connected to * @@ -1112,25 +1355,84 @@ if(this._interactive)this.stage.dirty = true; }; -PIXI.DisplayObject.prototype.generateTexture = function(renderer) +/** + * 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} Should be one of the PIXI.scaleMode consts + * @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) { var bounds = this.getLocalBounds(); - var renderTexture = new PIXI.RenderTexture(bounds.width | 0, bounds.height | 0, renderer); - renderTexture.render(this, new PIXI.Point(-bounds.x, -bounds.y) ); + 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); return renderTexture; }; +/** + * Generates and updates the cached sprite for this object. + * + * @method updateCache + */ PIXI.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) +{ + this.updateTransform(); + return this.worldTransform.apply(position); +}; + +/** + * 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) + { + position = from.toGlobal(position); + } + + this.updateTransform(); + + return this.worldTransform.applyInverse(position); +}; + +/** + * Internal method. + * + * @method _renderCachedSprite + * @param renderSession {Object} The render session + * @private + */ PIXI.DisplayObject.prototype._renderCachedSprite = function(renderSession) { this._cachedSprite.worldAlpha = this.worldAlpha; - + if(renderSession.gl) { PIXI.Sprite.prototype._renderWebGL.call(this._cachedSprite, renderSession); @@ -1141,15 +1443,21 @@ } }; -PIXI.DisplayObject.prototype._generateCachedSprite = function()//renderSession) +/** + * Internal method. + * + * @method _generateCachedSprite + * @private + */ +PIXI.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); - + this._cachedSprite = new PIXI.Sprite(renderTexture); this._cachedSprite.worldTransform = this.worldTransform; } @@ -1163,7 +1471,11 @@ this._filters = null; this._cachedSprite.filters = tempFilters; - this._cachedSprite.texture.render(this, new PIXI.Point(-bounds.x, -bounds.y) ); + + PIXI.DisplayObject._tempMatrix.tx = -bounds.x; + PIXI.DisplayObject._tempMatrix.ty = -bounds.y; + + this._cachedSprite.texture.render(this, PIXI.DisplayObject._tempMatrix ); this._cachedSprite.anchor.x = -( bounds.x / bounds.width ); this._cachedSprite.anchor.y = -( bounds.y / bounds.height ); @@ -1174,10 +1486,9 @@ }; /** -* Renders the object using the WebGL renderer +* Destroys the cached sprite. * -* @method _renderWebGL -* @param renderSession {RenderSession} +* @method _destroyCachedSprite * @private */ PIXI.DisplayObject.prototype._destroyCachedSprite = function() @@ -1185,13 +1496,18 @@ if(!this._cachedSprite)return; this._cachedSprite.texture.destroy(true); - // console.log("DESTROY") - // let the gc collect the unused sprite + // TODO could be object pooled! this._cachedSprite = null; }; - +/** +* Renders the object using the WebGL renderer +* +* @method _renderWebGL +* @param renderSession {RenderSession} +* @private +*/ PIXI.DisplayObject.prototype._renderWebGL = function(renderSession) { // OVERWRITE; @@ -1203,7 +1519,7 @@ * Renders the object using the Canvas renderer * * @method _renderCanvas -* @param renderSession {RenderSession} +* @param renderSession {RenderSession} * @private */ PIXI.DisplayObject.prototype._renderCanvas = function(renderSession) @@ -1213,6 +1529,9 @@ 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. * @@ -1247,7 +1566,6 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * 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. @@ -1280,8 +1598,6 @@ * @property width * @type Number */ - - Object.defineProperty(PIXI.DisplayObjectContainer.prototype, 'width', { get: function() { return this.scale.x * this.getLocalBounds().width; @@ -1304,14 +1620,12 @@ } }); - /** * 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; @@ -1333,12 +1647,12 @@ } }); - /** * 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) { @@ -1351,6 +1665,7 @@ * @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) { @@ -1371,17 +1686,16 @@ } else { - throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + throw new Error(child + 'addChildAt: The index '+ index +' supplied is out of bounds ' + this.children.length); } }; /** - * [NYI] Swaps the depth of 2 displayObjects + * Swaps the position of 2 Display Objects within this container. * * @method swapChildren * @param child {DisplayObject} * @param child2 {DisplayObject} - * @private */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { @@ -1389,8 +1703,8 @@ return; } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); + var index1 = this.getChildIndex(child); + var index2 = this.getChildIndex(child2); if(index1 < 0 || index2 < 0) { throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); @@ -1398,7 +1712,42 @@ 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) +{ + var index = this.children.indexOf(child); + 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) + { + 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 }; /** @@ -1406,17 +1755,16 @@ * * @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) + if (index < 0 || index >= this.children.length) { - return this.children[index]; + 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'); } - else - { - throw new Error('Supplied index does not exist in the child list, or the supplied DisplayObject must be a child of the caller'); - } + return this.children[index]; + }; /** @@ -1424,17 +1772,22 @@ * * @method removeChild * @param child {DisplayObject} The DisplayObject to remove + * @return {DisplayObject} The child that was removed. */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - return this.removeChildAt( this.children.indexOf( child ) ); + var index = this.children.indexOf( child ); + if(index === -1)return; + + return this.removeChildAt( index ); }; /** - * Removes a child from the specified index position in the child list of the container. + * 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) { @@ -1448,11 +1801,11 @@ }; /** -* Removes all child instances from the child list of the container. +* Removes all children from this container that are within the begin and end indexes. * * @method removeChildren -* @param beginIndex {Number} The beginning position. Predefined value is 0. -* @param endIndex {Number} The ending position. Predefined value is children's array length. +* @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) { @@ -1471,22 +1824,24 @@ } return removed; } + else if (range === 0 && this.children.length === 0) + { + return []; + } else { - throw new Error( 'Range Error, numeric values are outside the acceptable range' ); + throw new Error( 'removeChildren: Range Error, numeric values are outside the acceptable range' ); } }; /* - * Updates the container's childrens transform for rendering + * Updates the transform on all children of this container for rendering * * @method updateTransform * @private */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - //this._currentBounds = null; - if(!this.visible)return; PIXI.DisplayObject.prototype.updateTransform.call( this ); @@ -1500,23 +1855,16 @@ }; /** - * Retrieves the bounds of the displayObjectContainer as a rectangle object + * Retrieves the bounds of the displayObjectContainer as a rectangle. The bounds calculation takes all visible children into consideration. * * @method getBounds - * @return {Rectangle} the rectangular bounding area + * @return {Rectangle} The rectangular bounding area */ -PIXI.DisplayObjectContainer.prototype.getBounds = function(matrix) +PIXI.DisplayObjectContainer.prototype.getBounds = function() { if(this.children.length === 0)return PIXI.EmptyRectangle; // TODO the bounds have already been calculated this render session so return what we have - if(matrix) - { - var matrixCache = this.worldTransform; - this.worldTransform = matrix; - this.updateTransform(); - this.worldTransform = matrixCache; - } var minX = Infinity; var minY = Infinity; @@ -1538,7 +1886,7 @@ childVisible = true; - childBounds = this.children[i].getBounds( matrix ); + childBounds = this.children[i].getBounds(); minX = minX < childBounds.x ? minX : childBounds.x; minY = minY < childBounds.y ? minY : childBounds.y; @@ -1566,6 +1914,12 @@ return bounds; }; +/** + * 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() { var matrixCache = this.worldTransform; @@ -1585,7 +1939,7 @@ }; /** - * Sets the container's stage reference, the stage this object is connected to + * Sets the containers Stage reference. This is the Stage that this object, and all of its children, is connected to. * * @method setStageReference * @param stage {Stage} the stage that the container will have as its current stage reference @@ -1603,7 +1957,7 @@ }; /** - * removes the current stage reference of the container + * Removes the current stage reference from the container and all of its children. * * @method removeStageReference */ @@ -1700,7 +2054,7 @@ if(this._mask) { - renderSession.maskManager.pushMask(this._mask, renderSession.context); + renderSession.maskManager.pushMask(this._mask, renderSession); } for(var i=0,j=this.children.length; i baseline; i--) + { + for(j = 0; j < line; j += 4) + { + if(imagedata[idx + j] !== 255) + { + stop = true; + break; + } + } + if(!stop) + { + idx -= line; + } + else + { + break; + } + } + + properties.descent = i - baseline; + properties.fontSize = properties.ascent + properties.descent; + + PIXI.Text.fontPropertiesCache[fontStyle] = properties; } - return result; + return properties; }; /** @@ -2958,7 +3427,7 @@ }; /** - * Destroys this text object + * Destroys this text object. * * @method destroy * @param destroyBaseTexture {Boolean} whether to destroy the base texture as well @@ -2972,14 +3441,16 @@ this.texture.destroy(destroyBaseTexture === undefined ? true : destroyBaseTexture); }; -PIXI.Text.heightCache = {}; +PIXI.Text.fontPropertiesCache = {}; +PIXI.Text.fontPropertiesCanvas = document.createElement('canvas'); +PIXI.Text.fontPropertiesContext = PIXI.Text.fontPropertiesCanvas.getContext('2d'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * A Text Object will create a line(s) of text using bitmap font. To split a line you can use '\n', '\r' or '\r\n' + * A BitmapText object will create a line or multiple lines of text using bitmap font. To split a line you can use '\n', '\r' or '\r\n' in your string. * You can generate the fnt files using * http://www.angelcode.com/products/bmfont/ for windows or * http://www.bmglyph.com/ for mac. @@ -2996,11 +3467,42 @@ { PIXI.DisplayObjectContainer.call(this); + /** + * [read-only] The width of the overall text, different from fontSize, + * which is defined in the style object + * + * @property textWidth + * @type Number + * @readOnly + */ + this.textWidth = 0; + + /** + * [read-only] The height of the overall text, different from fontSize, + * which is defined in the style object + * + * @property textHeight + * @type Number + * @readOnly + */ + this.textHeight = 0; + + /** + * @property _pool + * @type Array + * @private + */ this._pool = []; this.setText(text); this.setStyle(style); this.updateText(); + + /** + * The dirty state of this object. + * @property dirty + * @type Boolean + */ this.dirty = false; }; @@ -3009,10 +3511,10 @@ PIXI.BitmapText.prototype.constructor = PIXI.BitmapText; /** - * Set the copy for the text object + * Set the text string to be rendered. * * @method setText - * @param text {String} The copy that you would like the text to display + * @param text {String} The text that you would like displayed */ PIXI.BitmapText.prototype.setText = function(text) { @@ -3023,7 +3525,7 @@ /** * Set the style of the text * style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously) - * [style.align='left'] {String} Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * [style.align='left'] {String} Alignment for multiline text ('left', 'center' or 'right'), does not affect single lines of text * * @method setStyle * @param style {Object} The style parameters, contained as properties of an object @@ -3058,11 +3560,11 @@ var lineWidths = []; var line = 0; var scale = this.fontSize / data.size; - for(var i = 0; i < this.text.length; i++) { var charCode = this.text.charCodeAt(i); + if(/(?:\r\n|\r|\n)/.test(this.text.charAt(i))) { lineWidths.push(pos.x); @@ -3076,12 +3578,14 @@ } var charData = data.chars[charCode]; + if(!charData) continue; - if(prevCharCode && charData[prevCharCode]) + if(prevCharCode && charData.kerning[prevCharCode]) { pos.x += charData.kerning[prevCharCode]; } + chars.push({texture:charData.texture, line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); pos.x += charData.xAdvance; @@ -3092,6 +3596,7 @@ maxLineWidth = Math.max(maxLineWidth, pos.x); var lineAlignOffsets = []; + for(i = 0; i <= line; i++) { var alignOffset = 0; @@ -3109,6 +3614,7 @@ var lenChildren = this.children.length; var lenChars = chars.length; var tint = this.tint || 0xFFFFFF; + for(i = 0; i < lenChars; i++) { var c = i < lenChildren ? this.children[i] : this._pool.pop(); // get old child if have. if not - take from pool. @@ -3132,23 +3638,7 @@ this.removeChild(child); } - - /** - * [read-only] The width of the overall text, different from fontSize, - * which is defined in the style object - * - * @property textWidth - * @type Number - */ this.textWidth = maxLineWidth * scale; - - /** - * [read-only] The height of the overall text, different from fontSize, - * which is defined in the style object - * - * @property textHeight - * @type Number - */ this.textHeight = (pos.y + data.lineHeight) * scale; }; @@ -3174,7 +3664,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * Holds all information related to an Interaction event * @@ -3191,7 +3681,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * @@ -3214,9 +3703,10 @@ * * @method getLocalPosition * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @param [point] {Point} A Point object in which to store the value, optional (otherwise will create a new point) * @return {Point} A point containing the coordinates of the InteractionData position relative to the DisplayObject */ -PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject, point) { var worldTransform = displayObject.worldTransform; var global = this.global; @@ -3225,13 +3715,19 @@ var a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx, a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); + + point = point || new PIXI.Point(); + + point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); + return point; }; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -3248,7 +3744,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -3256,7 +3752,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -3264,18 +3760,21 @@ this.mouse = new PIXI.InteractionData(); /** - * an object that stores current touches (InteractionData) by id reference + * An object that stores current touches (InteractionData) by id reference * - * @property touchs + * @property touches * @type Object */ - this.touchs = {}; + this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -3283,8 +3782,8 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! - * + * Tiny little interactiveData pool ! + * * @property pool * @type Array */ @@ -3295,7 +3794,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -3307,23 +3805,60 @@ */ this.interactionDOMElement = null; - //this will make it so that you dont have to call bind all the time + //this will make it so that you don't have to call bind all the time + + /** + * @property onMouseMove + * @type Function + */ this.onMouseMove = this.onMouseMove.bind( this ); + + /** + * @property onMouseDown + * @type Function + */ this.onMouseDown = this.onMouseDown.bind(this); + + /** + * @property onMouseOut + * @type Function + */ this.onMouseOut = this.onMouseOut.bind(this); + + /** + * @property onMouseUp + * @type Function + */ this.onMouseUp = this.onMouseUp.bind(this); + /** + * @property onTouchStart + * @type Function + */ this.onTouchStart = this.onTouchStart.bind(this); + + /** + * @property onTouchEnd + * @type Function + */ this.onTouchEnd = this.onTouchEnd.bind(this); + + /** + * @property onTouchMove + * @type Function + */ this.onTouchMove = this.onTouchMove.bind(this); + /** + * @property last + * @type Number + */ this.last = 0; /** * The css style of the cursor that is being used * @property currentCursorStyle * @type String - * */ this.currentCursorStyle = 'inherit'; @@ -3331,9 +3866,14 @@ * Is set to true when the mouse is moved out of the canvas * @property mouseOut * @type Boolean - * */ this.mouseOut = false; + + /** + * @property resolution + * @type Number + */ + this.resolution = 1; }; // constructor @@ -3353,27 +3893,25 @@ var length = children.length; // make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) + for (var i = length - 1; i >= 0; i--) { var child = children[i]; // push all interactive bits - if(child._interactive) + if (child._interactive) { iParent.interactiveChildren = true; //child.__iParent = iParent; this.interactiveItems.push(child); - if(child.children.length > 0) - { + if (child.children.length > 0) { this.collectInteractiveSprite(child, child); } } else { child.__iParent = null; - - if(child.children.length > 0) + if (child.children.length > 0) { this.collectInteractiveSprite(child, iParent); } @@ -3392,17 +3930,14 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; + this.resolution = target.resolution; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + // Check if the dom element has been set. If it has don't do anything. + if (this.interactionDOMElement !== null) return; - this.setTargetDomElement( target.view ); - } - - + this.setTargetDomElement (target.view); }; - /** * Sets the DOM element which will receive mouse/touch events. This is useful for when you have other DOM * elements on top of the renderers Canvas element. With this you'll be able to delegate another DOM element @@ -3414,17 +3949,13 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - this.removeEvents(); - if (window.navigator.msPointerEnabled) { // time to remove some of that zoom in ja.. domElement.style['-ms-content-zooming'] = 'none'; domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! } this.interactionDOMElement = domElement; @@ -3441,10 +3972,13 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { - if(!this.interactionDOMElement)return; + if (!this.interactionDOMElement) return; this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -3471,13 +4005,13 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; + if (!this.target) return; // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * PIXI.INTERACTION_FREQUENCY ) / 1000; - if(diff < 1)return; + if (diff < 1) return; this.last = now; var i = 0; @@ -3485,7 +4019,7 @@ // ok.. so mouse events?? // yes for now :) // OPTIMISE - how often to check?? - if(this.dirty) + if (this.dirty) { this.rebuildInteractiveGraph(); } @@ -3502,43 +4036,56 @@ // OPTIMISATION - only calculate every time if the mousemove function exists.. // OK so.. does the object have any other interactive functions? // hit-test the clip! - // if(item.mouseover || item.mouseout || item.buttonMode) + // if (item.mouseover || item.mouseout || item.buttonMode) // { // ok so there are some functions so lets hit test it.. item.__hit = this.hitTest(item, this.mouse); this.mouse.target = item; // ok so deal with interactions.. // looks like there was a hit! - if(item.__hit && !over) + if (item.__hit && !over) { - if(item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) cursor = item.defaultCursor; - if(!item.interactiveChildren)over = true; - - if(!item.__isOver) + if (!item.interactiveChildren) { - if(item.mouseover)item.mouseover(this.mouse); + over = true; + } + + if (!item.__isOver) + { + if (item.mouseover) + { + item.mouseover (this.mouse); + } item.__isOver = true; } } else { - if(item.__isOver) + if (item.__isOver) { // roll out! - if(item.mouseout)item.mouseout(this.mouse); + if (item.mouseout) + { + item.mouseout (this.mouse); + } item.__isOver = false; } } } - if( this.currentCursorStyle !== cursor ) + if (this.currentCursorStyle !== cursor) { this.currentCursorStyle = cursor; this.interactionDOMElement.style.cursor = cursor; } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -3551,8 +4098,12 @@ this.interactiveItems = []; - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. + if (this.stage.interactive) + { + this.interactiveItems.push(this.stage); + } + + // Go through and collect all the objects that are interactive.. this.collectInteractiveSprite(this.stage, this.stage); }; @@ -3565,17 +4116,18 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - if(this.dirty) + if (this.dirty) { this.rebuildInteractiveGraph(); } - this.mouse.originalEvent = event || window.event; //IE uses window.event + this.mouse.originalEvent = event; + // TODO optimize by not check EVERY TIME! maybe half as often? // var rect = this.interactionDOMElement.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width) / this.resolution; + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height) / this.resolution; var length = this.interactiveItems.length; @@ -3583,9 +4135,9 @@ { var item = this.interactiveItems[i]; - if(item.mousemove) + // Call the function! + if (item.mousemove) { - //call the function! item.mousemove(this.mouse); } } @@ -3600,14 +4152,17 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - if(this.dirty) + if (this.dirty) { this.rebuildInteractiveGraph(); } - this.mouse.originalEvent = event || window.event; //IE uses window.event + this.mouse.originalEvent = event; - if(PIXI.AUTO_PREVENT_DEFAULT)this.mouse.originalEvent.preventDefault(); + if (PIXI.AUTO_PREVENT_DEFAULT) + { + this.mouse.originalEvent.preventDefault(); + } // loop through interaction tree... // hit test each item! -> @@ -3615,44 +4170,56 @@ //stage.__i var length = this.interactiveItems.length; + var e = this.mouse.originalEvent; + var isRightButton = e.button === 2 || e.which === 3; + var downFunction = isRightButton ? 'rightdown' : 'mousedown'; + var clickFunction = isRightButton ? 'rightclick' : 'click'; + var buttonIsDown = isRightButton ? '__rightIsDown' : '__mouseIsDown'; + var isDown = isRightButton ? '__isRightDown' : '__isDown'; + // while // hit test for (var i = 0; i < length; i++) { var item = this.interactiveItems[i]; - if(item.mousedown || item.click) + if (item[downFunction] || item[clickFunction]) { - item.__mouseIsDown = true; + item[buttonIsDown] = true; item.__hit = this.hitTest(item, this.mouse); - if(item.__hit) + if (item.__hit) { //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; + if (item[downFunction]) + { + item[downFunction](this.mouse); + } + item[isDown] = true; // just the one! - if(!item.interactiveChildren)break; + if (!item.interactiveChildren) break; } } } }; /** - * Is called when the mouse button is moved out of the renderer element + * Is called when the mouse is moved out of the renderer element * * @method onMouseOut - * @param event {Event} The DOM event of a mouse button being moved out - * @private + * @param event {Event} The DOM event of a mouse being moved out + * @private */ -PIXI.InteractionManager.prototype.onMouseOut = function() +PIXI.InteractionManager.prototype.onMouseOut = function(event) { - if(this.dirty) + if (this.dirty) { this.rebuildInteractiveGraph(); } + this.mouse.originalEvent = event; + var length = this.interactiveItems.length; this.interactionDOMElement.style.cursor = 'inherit'; @@ -3660,10 +4227,13 @@ for (var i = 0; i < length; i++) { var item = this.interactiveItems[i]; - if(item.__isOver) + if (item.__isOver) { this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); + if (item.mouseout) + { + item.mouseout(this.mouse); + } item.__isOver = false; } } @@ -3684,46 +4254,62 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.dirty) + if (this.dirty) { this.rebuildInteractiveGraph(); } - this.mouse.originalEvent = event || window.event; //IE uses window.event + this.mouse.originalEvent = event; var length = this.interactiveItems.length; var up = false; + var e = this.mouse.originalEvent; + var isRightButton = e.button === 2 || e.which === 3; + + var upFunction = isRightButton ? 'rightup' : 'mouseup'; + var clickFunction = isRightButton ? 'rightclick' : 'click'; + var upOutsideFunction = isRightButton ? 'rightupoutside' : 'mouseupoutside'; + var isDown = isRightButton ? '__isRightDown' : '__isDown'; + for (var i = 0; i < length; i++) { var item = this.interactiveItems[i]; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) + if (item[clickFunction] || item[upFunction] || item[upOutsideFunction]) { - //call the function! - if(item.mouseup) + item.__hit = this.hitTest(item, this.mouse); + + if (item.__hit && !up) { - item.mouseup(this.mouse); + //call the function! + if (item[upFunction]) + { + item[upFunction](this.mouse); + } + if (item[isDown]) + { + if (item[clickFunction]) + { + item[clickFunction](this.mouse); + } + } + + if (!item.interactiveChildren) + { + up = true; + } } - if(item.__isDown) + else { - if(item.click)item.click(this.mouse); + if (item[isDown]) + { + if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + } } - if(!item.interactiveChildren)up = true; + item[isDown] = false; } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - //} } }; @@ -3739,44 +4325,48 @@ { var global = interactionData.global; - if( !item.worldVisible )return false; + if (!item.worldVisible) + { + return false; + } // temp fix for if the element is in a non visible - - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx, - a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty, - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var worldTransform = item.worldTransform, i, + a = worldTransform.a, b = worldTransform.b, + c = worldTransform.c, tx = worldTransform.tx, + d = worldTransform.d, ty = worldTransform.ty, + + id = 1 / (a * d + c * -b), + x = d * id * global.x + -c * id * global.y + (ty * c - tx * d) * id, + y = a * id * global.y + -b * id * global.x + (-ty * a + tx * b) * id; + interactionData.target = item; //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) + if (item.hitArea && item.hitArea.contains) + { + if (item.hitArea.contains(x, y)) + { interactionData.target = item; - return true; } - return false; } // a sprite with no hitarea defined - else if(isSprite) + else if(item instanceof PIXI.Sprite) { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; + var width = item.texture.frame.width; + var height = item.texture.frame.height; + var x1 = -width * item.anchor.x; + var y1; - if(x > x1 && x < x1 + width) + if (x > x1 && x < x1 + width) { y1 = -height * item.anchor.y; - if(y > y1 && y < y1 + height) + if (y > y1 && y < y1 + height) { // set the target property if a hit is true! interactionData.target = item; @@ -3784,21 +4374,39 @@ } } } + else if(item instanceof PIXI.Graphics) + { + var graphicsData = item.graphicsData; + for (i = 0; i < graphicsData.length; i++) + { + var data = graphicsData[i]; + if(!data.fill)continue; + + // only deal with fills.. + if(data.shape) + { + if(data.shape.contains(x, y)) + { + interactionData.target = item; + return true; + } + } + } + } var length = item.children.length; - for (var i = 0; i < length; i++) + for (i = 0; i < length; i++) { var tempItem = item.children[i]; var hit = this.hitTest(tempItem, interactionData); - if(hit) + if (hit) { // hmm.. TODO SET CORRECT TARGET? interactionData.target = item; return true; } } - return false; }; @@ -3811,7 +4419,7 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - if(this.dirty) + if (this.dirty) { this.rebuildInteractiveGraph(); } @@ -3824,13 +4432,15 @@ for (i = 0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; + touchData = this.touches[touchEvent.identifier]; + touchData.originalEvent = event; // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(navigator.isCocoonJS) { + touchData.global.x = ( (touchEvent.clientX - rect.left) * (this.target.width / rect.width) ) / this.resolution; + touchData.global.y = ( (touchEvent.clientY - rect.top) * (this.target.height / rect.height) ) / this.resolution; + if (navigator.isCocoonJS && !rect.left && !rect.top && !event.target.style.width && !event.target.style.height) + { + //Support for CocoonJS fullscreen scale modes touchData.global.x = touchEvent.clientX; touchData.global.y = touchEvent.clientY; } @@ -3838,7 +4448,10 @@ for (var j = 0; j < this.interactiveItems.length; j++) { var item = this.interactiveItems[j]; - if(item.touchmove && item.__touchData && item.__touchData[touchEvent.identifier]) item.touchmove(touchData); + if (item.touchmove && item.__touchData && item.__touchData[touchEvent.identifier]) + { + item.touchmove(touchData); + } } } }; @@ -3852,29 +4465,37 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - if(this.dirty) + if (this.dirty) { this.rebuildInteractiveGraph(); } var rect = this.interactionDOMElement.getBoundingClientRect(); - if(PIXI.AUTO_PREVENT_DEFAULT)event.preventDefault(); - + if (PIXI.AUTO_PREVENT_DEFAULT) + { + event.preventDefault(); + } + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); + if (!touchData) + { + touchData = new PIXI.InteractionData(); + } - touchData.originalEvent = event || window.event; + touchData.originalEvent = event; - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(navigator.isCocoonJS) { + this.touches[touchEvent.identifier] = touchData; + touchData.global.x = ( (touchEvent.clientX - rect.left) * (this.target.width / rect.width) ) / this.resolution; + touchData.global.y = ( (touchEvent.clientY - rect.top) * (this.target.height / rect.height) ) / this.resolution; + if (navigator.isCocoonJS && !rect.left && !rect.top && !event.target.style.width && !event.target.style.height) + { + //Support for CocoonJS fullscreen scale modes touchData.global.x = touchEvent.clientX; touchData.global.y = touchEvent.clientY; } @@ -3885,19 +4506,19 @@ { var item = this.interactiveItems[j]; - if(item.touchstart || item.tap) + if (item.touchstart || item.tap) { item.__hit = this.hitTest(item, touchData); - if(item.__hit) + if (item.__hit) { //call the function! - if(item.touchstart)item.touchstart(touchData); + if (item.touchstart)item.touchstart(touchData); item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if(!item.interactiveChildren)break; + if (!item.interactiveChildren) break; } } } @@ -3913,23 +4534,24 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - if(this.dirty) + if (this.dirty) { this.rebuildInteractiveGraph(); } - - //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; + var touchData = this.touches[touchEvent.identifier]; var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(navigator.isCocoonJS) { + touchData.global.x = ( (touchEvent.clientX - rect.left) * (this.target.width / rect.width) ) / this.resolution; + touchData.global.y = ( (touchEvent.clientY - rect.top) * (this.target.height / rect.height) ) / this.resolution; + if (navigator.isCocoonJS && !rect.left && !rect.top && !event.target.style.width && !event.target.style.height) + { + //Support for CocoonJS fullscreen scale modes touchData.global.x = touchEvent.clientX; touchData.global.y = touchEvent.clientY; } @@ -3939,31 +4561,37 @@ { var item = this.interactiveItems[j]; - if(item.__touchData && item.__touchData[touchEvent.identifier]) { + if (item.__touchData && item.__touchData[touchEvent.identifier]) + { item.__hit = this.hitTest(item, item.__touchData[touchEvent.identifier]); // so this one WAS down... - touchData.originalEvent = event || window.event; + touchData.originalEvent = event; // hitTest?? - if(item.touchend || item.tap) + if (item.touchend || item.tap) { - if(item.__hit && !up) + if (item.__hit && !up) { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) + if (item.touchend) { - if(item.tap)item.tap(touchData); + item.touchend(touchData); } - - if(!item.interactiveChildren)up = true; + if (item.__isDown && item.tap) + { + item.tap(touchData); + } + if (!item.interactiveChildren) + { + up = true; + } } else { - if(item.__isDown) + if (item.__isDown && item.touchendoutside) { - if(item.touchendoutside)item.touchendoutside(touchData); + item.touchendoutside(touchData); } } @@ -3975,7 +4603,7 @@ } // remove the touch.. this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; + this.touches[touchEvent.identifier] = null; } }; @@ -4007,7 +4635,7 @@ * [read-only] Current transform of the object based on world (parent) factors * * @property worldTransform - * @type Mat3 + * @type Matrix * @readOnly * @private */ @@ -4042,7 +4670,7 @@ this.stage = this; //optimize hit detection a bit - this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); + this.stage.hitArea = new PIXI.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); }; @@ -4105,10 +4733,10 @@ }; /** - * This will return the point containing global coords of the mouse. + * This will return the point containing global coordinates of the mouse. * * @method getMousePosition - * @return {Point} The point containing the coords of the global InteractionData position. + * @return {Point} A point containing the coordinates of the global InteractionData position. */ PIXI.Stage.prototype.getMousePosition = function() { @@ -4133,37 +4761,40 @@ * * @method requestAnimationFrame */ + /** * A polyfill for cancelAnimationFrame * * @method cancelAnimationFrame */ -var lastTime = 0; -var vendors = ['ms', 'moz', 'webkit', 'o']; -for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { - window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']; - window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || - window[vendors[x] + 'CancelRequestAnimationFrame']; -} +(function(window) { + var lastTime = 0; + var vendors = ['ms', 'moz', 'webkit', 'o']; + for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { + window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || + window[vendors[x] + 'CancelRequestAnimationFrame']; + } -if (!window.requestAnimationFrame) { - window.requestAnimationFrame = function(callback) { - var currTime = new Date().getTime(); - var timeToCall = Math.max(0, 16 - (currTime - lastTime)); - var id = window.setTimeout(function() { callback(currTime + timeToCall); }, - timeToCall); - lastTime = currTime + timeToCall; - return id; - }; -} + if (!window.requestAnimationFrame) { + window.requestAnimationFrame = function(callback) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, + timeToCall); + lastTime = currTime + timeToCall; + return id; + }; + } -if (!window.cancelAnimationFrame) { - window.cancelAnimationFrame = function(id) { - clearTimeout(id); - }; -} + if (!window.cancelAnimationFrame) { + window.cancelAnimationFrame = function(id) { + clearTimeout(id); + }; + } -window.requestAnimFrame = window.requestAnimationFrame; + window.requestAnimFrame = window.requestAnimationFrame; +})(this); /** * Converts a hex color number to an [R, G, B] array @@ -4192,15 +4823,21 @@ */ if (typeof Function.prototype.bind !== 'function') { Function.prototype.bind = (function () { - var slice = Array.prototype.slice; return function (thisArg) { - var target = this, boundArgs = slice.call(arguments, 1); + var target = this, i = arguments.length - 1, boundArgs = []; + if (i > 0) + { + boundArgs.length = i; + while (i--) boundArgs[i] = arguments[i + 1]; + } if (typeof target !== 'function') throw new TypeError(); function bound() { - var args = boundArgs.concat(slice.call(arguments)); - target.apply(this instanceof bound ? this : thisArg, args); + var i = arguments.length, args = new Array(i); + while (i--) args[i] = arguments[i]; + args = boundArgs.concat(args); + return target.apply(this instanceof bound ? this : thisArg, args); } bound.prototype = (function F(proto) { @@ -4281,6 +4918,7 @@ */ PIXI.canUseNewCanvasBlendModes = function() { + if (typeof document === 'undefined') return false; var canvas = document.createElement('canvas'); canvas.width = 1; canvas.height = 1; @@ -4315,115 +4953,287 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * https://github.com/mrdoob/eventtarget.js/ - * THankS mr DOob! + * @author Chad Engler https://github.com/englercj @Rolnaaba */ /** - * Adds event emitter functionality to a class + * Originally based on https://github.com/mrdoob/eventtarget.js/ from mr Doob. + * Currently takes inspiration from the nodejs EventEmitter, EventEmitter3, and smokesignals + */ + +/** + * Mixins event emitter functionality to a class * * @class EventTarget * @example - * function MyEmitter() { - * PIXI.EventTarget.call(this); //mixes in event target stuff - * } + * function MyEmitter() {} + * + * PIXI.EventTarget.mixin(MyEmitter.prototype); * * var em = new MyEmitter(); - * em.emit({ type: 'eventName', data: 'some data' }); + * em.emit('eventName', 'some data', 'some more data', {}, null, ...); */ -PIXI.EventTarget = function () { +PIXI.EventTarget = { + /** + * Backward compat from when this used to be a function + */ + call: function callCompat(obj) { + if(obj) { + obj = obj.prototype || obj; + PIXI.EventTarget.mixin(obj); + } + }, /** - * Holds all the listeners + * Mixes in the properties of the EventTarget prototype onto another object * - * @property listeners + * @method mixin + * @param object {Object} The obj to mix into + */ + mixin: function mixin(obj) { + /** + * Return a list of assigned event listeners. + * + * @method listeners + * @param eventName {String} The events that should be listed. + * @returns {Array} An array of listener functions + */ + obj.listeners = function listeners(eventName) { + this._listeners = this._listeners || {}; + + return this._listeners[eventName] ? this._listeners[eventName].slice() : []; + }; + + /** + * Emit an event to all registered event listeners. + * + * @method emit + * @alias dispatchEvent + * @param eventName {String} The name of the event. + * @returns {Boolean} Indication if we've emitted an event. + */ + obj.emit = obj.dispatchEvent = function emit(eventName, data) { + this._listeners = this._listeners || {}; + + //backwards compat with old method ".emit({ type: 'something' })" + if(typeof eventName === 'object') { + data = eventName; + eventName = eventName.type; + } + + //ensure we are using a real pixi event + if(!data || data.__isEventObject !== true) { + data = new PIXI.Event(this, eventName, data); + } + + //iterate the listeners + if(this._listeners && this._listeners[eventName]) { + var listeners = this._listeners[eventName], + length = listeners.length, + fn = listeners[0], + i; + + for(i = 0; i < length; fn = listeners[++i]) { + //call the event listener + fn.call(this, data); + + //if "stopImmediatePropagation" is called, stop calling sibling events + if(data.stoppedImmediate) { + return this; + } + } + + //if "stopPropagation" is called then don't bubble the event + if(data.stopped) { + return this; + } + } + + //bubble this event up the scene graph + if(this.parent && this.parent.emit) { + this.parent.emit.call(this.parent, eventName, data); + } + + return this; + }; + + /** + * Register a new EventListener for the given event. + * + * @method on + * @alias addEventListener + * @param eventName {String} Name of the event. + * @param callback {Functon} fn Callback function. + */ + obj.on = obj.addEventListener = function on(eventName, fn) { + this._listeners = this._listeners || {}; + + (this._listeners[eventName] = this._listeners[eventName] || []) + .push(fn); + + return this; + }; + + /** + * Add an EventListener that's only called once. + * + * @method once + * @param eventName {String} Name of the event. + * @param callback {Function} Callback function. + */ + obj.once = function once(eventName, fn) { + this._listeners = this._listeners || {}; + + var self = this; + function onceHandlerWrapper() { + fn.apply(self.off(eventName, onceHandlerWrapper), arguments); + } + onceHandlerWrapper._originalHandler = fn; + + return this.on(eventName, onceHandlerWrapper); + }; + + /** + * Remove event listeners. + * + * @method off + * @alias removeEventListener + * @param eventName {String} The event we want to remove. + * @param callback {Function} The listener that we need to find. + */ + obj.off = obj.removeEventListener = function off(eventName, fn) { + this._listeners = this._listeners || {}; + + if(!this._listeners[eventName]) + return this; + + var list = this._listeners[eventName], + i = fn ? list.length : 0; + + while(i-- > 0) { + if(list[i] === fn || list[i]._originalHandler === fn) { + list.splice(i, 1); + } + } + + if(list.length === 0) { + delete this._listeners[eventName]; + } + + return this; + }; + + /** + * Remove all listeners or only the listeners for the specified event. + * + * @method removeAllListeners + * @param eventName {String} The event you want to remove all listeners for. + */ + obj.removeAllListeners = function removeAllListeners(eventName) { + this._listeners = this._listeners || {}; + + if(!this._listeners[eventName]) + return this; + + delete this._listeners[eventName]; + + return this; + }; + } +}; + +/** + * Creates an homogenous object for tracking events so users can know what to expect. + * + * @class Event + * @extends Object + * @constructor + * @param target {Object} The target object that the event is called on + * @param name {String} The string name of the event that was triggered + * @param data {Object} Arbitrary event data to pass along + */ +PIXI.Event = function(target, name, data) { + //for duck typing in the ".on()" function + this.__isEventObject = true; + + /** + * Tracks the state of bubbling propagation. Do not + * set this directly, instead use `event.stopPropagation()` + * + * @property stopped + * @type Boolean + * @private + * @readOnly + */ + this.stopped = false; + + /** + * Tracks the state of sibling listener propagation. Do not + * set this directly, instead use `event.stopImmediatePropagation()` + * + * @property stoppedImmediate + * @type Boolean + * @private + * @readOnly + */ + this.stoppedImmediate = false; + + /** + * The original target the event triggered on. + * + * @property target * @type Object + * @readOnly */ - var listeners = {}; + this.target = target; /** - * Adds a listener for a specific event + * The string name of the event that this represents. * - * @method addEventListener - * @param type {string} A string representing the event type to listen for. - * @param listener {function} The callback function that will be fired when the event occurs + * @property type + * @type String + * @readOnly */ - this.addEventListener = this.on = function ( type, listener ) { - - - if ( listeners[ type ] === undefined ) { - - listeners[ type ] = []; - - } - - if ( listeners[ type ].indexOf( listener ) === - 1 ) { - - listeners[ type ].unshift( listener ); - } - - }; + this.type = name; /** - * Fires the event, ie pretends that the event has happened + * The data that was passed in with this event. * - * @method dispatchEvent - * @param event {Event} the event object + * @property data + * @type Object + * @readOnly */ - this.dispatchEvent = this.emit = function ( event ) { + this.data = data; - if ( !listeners[ event.type ] || !listeners[ event.type ].length ) { - - return; - - } - - - for(var i = listeners[ event.type ].length-1; i >= 0; i--) { -// for(var i = 0, l=listeners[ event.type ].length; i < l; i++) { - - - listeners[ event.type ][ i ]( event ); - - } - - }; + //backwards compat with older version of events + this.content = data; /** - * Removes the specified listener that was assigned to the specified event type + * The timestamp when the event occurred. * - * @method removeEventListener - * @param type {string} A string representing the event type which will have its listener removed - * @param listener {function} The callback function that was be fired when the event occured + * @property timeStamp + * @type Number + * @readOnly */ - this.removeEventListener = this.off = function ( type, listener ) { + this.timeStamp = Date.now(); +}; - if ( listeners[ type ] === undefined ) return; +/** + * Stops the propagation of events up the scene graph (prevents bubbling). + * + * @method stopPropagation + */ +PIXI.Event.prototype.stopPropagation = function stopPropagation() { + this.stopped = true; +}; - var index = listeners[ type ].indexOf( listener ); - - if ( index !== - 1 ) { - - listeners[ type ].splice( index, 1 ); - - } - - }; - - /** - * Removes all the listeners that were active for the specified event type - * - * @method removeAllEventListeners - * @param type {string} A string representing the event type which will have all its listeners removed - */ - this.removeAllEventListeners = function( type ) { - var a = listeners[type]; - if (a) - a.length = 0; - }; +/** + * Stops the propagation of events to sibling listeners (no longer calls any listeners). + * + * @method stopImmediatePropagation + */ +PIXI.Event.prototype.stopImmediatePropagation = function stopImmediatePropagation() { + this.stoppedImmediate = true; }; /** @@ -4438,12 +5248,16 @@ * @static * @param width=800 {Number} the width of the renderers view * @param height=600 {Number} the height of the renderers view - * @param [view] {Canvas} the canvas to use as a view, optional - * @param [transparent=false] {Boolean} the transparency of the render view, default false - * @param [antialias=false] {Boolean} sets antialias (only applicable in webGL chrome at the moment) - * + * + * @param [options] {Object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {Boolean} If the render view is transparent, default false + * @param [options.antialias=false] {Boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {Boolean} enables drawing buffer preservation, enable this if you need to call toDataUrl on the webgl context + * @param [options.resolution=1] {Number} the resolution of the renderer retina would be 2 + * */ -PIXI.autoDetectRenderer = function(width, height, view, transparent, antialias) +PIXI.autoDetectRenderer = function(width, height, options) { if(!width)width = 800; if(!height)height = 600; @@ -4459,27 +5273,32 @@ if( webgl ) { - return new PIXI.WebGLRenderer(width, height, view, transparent, antialias); + return new PIXI.WebGLRenderer(width, height, options); } - return new PIXI.CanvasRenderer(width, height, view, transparent); + return new PIXI.CanvasRenderer(width, height, options); }; /** * This helper function will automatically detect which renderer you should be using. * This function is very similar to the autoDetectRenderer function except that is will return a canvas renderer for android. - * Even thought both android chrome suports webGL the canvas implementation perform better at the time of writing. - * This function will likely change and update as webGL performance imporoves on thease devices. - * @class getRecommendedRenderer + * Even thought both android chrome supports webGL the canvas implementation perform better at the time of writing. + * This function will likely change and update as webGL performance improves on these devices. + * + * @class autoDetectRecommendedRenderer * @static * @param width=800 {Number} the width of the renderers view * @param height=600 {Number} the height of the renderers view - * @param [view] {Canvas} the canvas to use as a view, optional - * @param [transparent=false] {Boolean} the transparency of the render view, default false - * @param [antialias=false] {Boolean} sets antialias (only applicable in webGL chrome at the moment) - * + * + * @param [options] {Object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {Boolean} If the render view is transparent, default false + * @param [options.antialias=false] {Boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {Boolean} enables drawing buffer preservation, enable this if you need to call toDataUrl on the webgl context + * @param [options.resolution=1] {Number} the resolution of the renderer retina would be 2 + * */ -PIXI.autoDetectRecommendedRenderer = function(width, height, view, transparent, antialias) +PIXI.autoDetectRecommendedRenderer = function(width, height, options) { if(!width)width = 800; if(!height)height = 600; @@ -4497,10 +5316,10 @@ if( webgl && !isAndroid) { - return new PIXI.WebGLRenderer(width, height, view, transparent, antialias); + return new PIXI.WebGLRenderer(width, height, options); } - return new PIXI.CanvasRenderer(width, height, view, transparent); + return new PIXI.CanvasRenderer(width, height, options); }; /* @@ -4533,23 +5352,21 @@ This is an amazing lib! - slightly modified by Mat Groves (matgroves.com); + Slightly modified by Mat Groves (matgroves.com); */ /** * Based on the Polyk library http://polyk.ivank.net released under MIT licence. * This is an amazing lib! - * slightly modified by Mat Groves (matgroves.com); + * Slightly modified by Mat Groves (matgroves.com); * @class PolyK - * */ PIXI.PolyK = {}; /** - * Triangulates shapes for webGL graphic fills + * Triangulates shapes for webGL graphic fills. * * @method Triangulate - * */ PIXI.PolyK.Triangulate = function(p) { @@ -4637,6 +5454,7 @@ * @param cx {Number} x coordinate of the c point of the triangle * @param cy {Number} y coordinate of the c point of the triangle * @private + * @return {Boolean} */ PIXI.PolyK._PointInTriangle = function(px, py, ax, ay, bx, by, cx, cy) { @@ -4665,8 +5483,8 @@ * Checks whether a shape is convex * * @method _convex - * * @private + * @return {Boolean} */ PIXI.PolyK._convex = function(ax, ay, bx, by, cx, cy, sign) { @@ -4677,27 +5495,48 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ -// TODO Alvin and Mat -// Should we eventually create a Utils class ? -// Or just move this file to the pixi.js file ? +/** +* @method initDefaultShaders +* @static +* @private +*/ PIXI.initDefaultShaders = function() { - - // PIXI.stripShader = new PIXI.StripShader(); -// PIXI.stripShader.init(); - }; +/** +* @method CompileVertexShader +* @static +* @param gl {WebGLContext} the current WebGL drawing context +* @param shaderSrc {Array} +* @return {Any} +*/ PIXI.CompileVertexShader = function(gl, shaderSrc) { return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER); }; +/** +* @method CompileFragmentShader +* @static +* @param gl {WebGLContext} the current WebGL drawing context +* @param shaderSrc {Array} +* @return {Any} +*/ PIXI.CompileFragmentShader = function(gl, shaderSrc) { return PIXI._CompileShader(gl, shaderSrc, gl.FRAGMENT_SHADER); }; +/** +* @method _CompileShader +* @static +* @private +* @param gl {WebGLContext} the current WebGL drawing context +* @param shaderSrc {Array} +* @param shaderType {Number} +* @return {Any} +*/ PIXI._CompileShader = function(gl, shaderSrc, shaderType) { var src = shaderSrc.join("\n"); @@ -4705,7 +5544,8 @@ gl.shaderSource(shader, src); gl.compileShader(shader); - if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { + if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) + { window.console.log(gl.getShaderInfoLog(shader)); return null; } @@ -4713,6 +5553,14 @@ return shader; }; +/** +* @method compileProgram +* @static +* @param gl {WebGLContext} the current WebGL drawing context +* @param vertexSrc {Array} +* @param fragmentSrc {Array} +* @return {Any} +*/ PIXI.compileProgram = function(gl, vertexSrc, fragmentSrc) { var fragmentShader = PIXI.CompileFragmentShader(gl, fragmentSrc); @@ -4724,7 +5572,8 @@ gl.attachShader(shaderProgram, fragmentShader); gl.linkProgram(shaderProgram); - if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { + if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) + { window.console.log("Could not initialise shaders"); } @@ -4739,9 +5588,15 @@ /** * @class PixiShader * @constructor +* @param gl {WebGLContext} the current WebGL drawing context */ PIXI.PixiShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -4751,13 +5606,17 @@ this.gl = gl; /** - * @property {any} program - The WebGL program. - */ + * The WebGL program. + * @property program + * @type {Any} + */ this.program = null; /** - * @property {array} fragmentSrc - The fragment shader. - */ + * The fragment shader. + * @property fragmentSrc + * @type Array + */ this.fragmentSrc = [ 'precision lowp float;', 'varying vec2 vTextureCoord;', @@ -4769,19 +5628,44 @@ ]; /** - * @property {number} textureCount - A local texture counter for multi-texture shaders. - */ + * A local texture counter for multi-texture shaders. + * @property textureCount + * @type Number + */ this.textureCount = 0; + /** + * A local flag + * @property firstRun + * @type Boolean + * @private + */ + this.firstRun = true; + + /** + * A dirty flag + * @property dirty + * @type Boolean + */ + this.dirty = true; + + /** + * Uniform attributes cache. + * @property attributes + * @type Array + * @private + */ this.attributes = []; this.init(); }; +PIXI.PixiShader.prototype.constructor = PIXI.PixiShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.PixiShader.prototype.init = function() { @@ -4802,12 +5686,11 @@ this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); this.colorAttribute = gl.getAttribLocation(program, 'aColor'); - // Begin worst hack eva // // WHY??? ONLY on my chrome pixel the line above returns -1 when using filters? // maybe its something to do with the current state of the gl context. - // Im convinced this is a bug in the chrome browser as there is NO reason why this should be returning -1 especially as it only manifests on my chrome pixel + // I'm convinced this is a bug in the chrome browser as there is NO reason why this should be returning -1 especially as it only manifests on my chrome pixel // If theres any webGL people that know why could happen please help :) if(this.colorAttribute === -1) { @@ -4832,6 +5715,7 @@ /** * Initialises the shader uniform values. +* * Uniforms are specified in the GLSL_ES Specification: http://www.khronos.org/registry/webgl/specs/latest/1.0/ * http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf * @@ -5022,7 +5906,18 @@ if (uniform._init) { gl.activeTexture(gl['TEXTURE' + this.textureCount]); - gl.bindTexture(gl.TEXTURE_2D, uniform.value.baseTexture._glTextures[gl.id] || PIXI.createWebGLTexture( uniform.value.baseTexture, gl)); + + if(uniform.value.baseTexture._dirty[gl.id]) + { + PIXI.defaultRenderer.updateTexture(uniform.value.baseTexture); + } + else + { + // bind the current texture + gl.bindTexture(gl.TEXTURE_2D, uniform.value.baseTexture._glTextures[gl.id]); + } + + // gl.bindTexture(gl.TEXTURE_2D, uniform.value.baseTexture._glTextures[gl.id] || PIXI.createWebGLTexture( uniform.value.baseTexture, gl)); gl.uniform1i(uniform.uniformLocation, this.textureCount); this.textureCount++; } @@ -5036,7 +5931,8 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy */ PIXI.PixiShader.prototype.destroy = function() @@ -5049,14 +5945,15 @@ }; /** -* The Default Vertex shader source +* The Default Vertex shader source. +* * @property defaultVertexSrc * @type String */ PIXI.PixiShader.defaultVertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', - 'attribute vec2 aColor;', + 'attribute vec4 aColor;', 'uniform vec2 projectionVector;', 'uniform vec2 offsetVector;', @@ -5076,7 +5973,6 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -5086,6 +5982,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -5095,12 +5996,16 @@ this.gl = gl; /** - * @property {any} program - The WebGL program. + * The WebGL program. + * @property program + * @type {Any} */ this.program = null; /** - * @property {array} fragmentSrc - The fragment shader. + * The fragment shader. + * @property fragmentSrc + * @type Array */ this.fragmentSrc = [ 'precision lowp float;', @@ -5113,8 +6018,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -5145,24 +6052,25 @@ '}' ]; - /** - * @property {number} textureCount - A local texture counter for multi-texture shaders. - */ + * A local texture counter for multi-texture shaders. + * @property textureCount + * @type Number + */ this.textureCount = 0; - this.init(); }; +PIXI.PixiFastShader.prototype.constructor = PIXI.PixiFastShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.PixiFastShader.prototype.init = function() { - var gl = this.gl; var program = PIXI.compileProgram(gl, this.vertexSrc, this.fragmentSrc); @@ -5187,8 +6095,6 @@ this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); this.colorAttribute = gl.getAttribLocation(program, 'aColor'); - - // Begin worst hack eva // // WHY??? ONLY on my chrome pixel the line above returns -1 when using filters? @@ -5204,14 +6110,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { @@ -5226,20 +6131,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - +/** +* @class StripShader +* @constructor +* @param gl {WebGLContext} the current WebGL drawing context +*/ PIXI.StripShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** + * @property gl + * @type WebGLContext + */ this.gl = gl; /** - * @property {any} program - The WebGL program. - */ + * The WebGL program. + * @property program + * @type {Any} + */ this.program = null; /** - * @property {array} fragmentSrc - The fragment shader. + * The fragment shader. + * @property fragmentSrc + * @type Array */ this.fragmentSrc = [ 'precision mediump float;', @@ -5254,9 +6176,11 @@ '}' ]; - /** - * @property {array} fragmentSrc - The fragment shader. - */ + /** + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -5280,10 +6204,12 @@ this.init(); }; +PIXI.StripShader.prototype.constructor = PIXI.StripShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.StripShader.prototype.init = function() { @@ -5312,6 +6238,20 @@ }; /** +* Destroys the shader. +* +* @method destroy +*/ +PIXI.StripShader.prototype.destroy = function() +{ + this.gl.deleteProgram( this.program ); + this.uniforms = null; + this.gl = null; + + this.attribute = null; +}; + +/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5322,6 +6262,11 @@ */ PIXI.PrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -5331,11 +6276,14 @@ this.gl = gl; /** - * @property {any} program - The WebGL program. - */ + * The WebGL program. + * @property program + * @type {Any} + */ this.program = null; /** + * The fragment shader. * @property fragmentSrc * @type Array */ @@ -5349,6 +6297,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -5373,14 +6322,15 @@ this.init(); }; +PIXI.PrimitiveShader.prototype.constructor = PIXI.PrimitiveShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.PrimitiveShader.prototype.init = function() { - var gl = this.gl; var program = PIXI.compileProgram(gl, this.vertexSrc, this.fragmentSrc); @@ -5391,7 +6341,6 @@ this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); this.tintColor = gl.getUniformLocation(program, 'tint'); - // get and store the attributes this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); this.colorAttribute = gl.getAttribLocation(program, 'aColor'); @@ -5405,9 +6354,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PrimitiveShader.prototype.destroy = function() { @@ -5415,7 +6364,7 @@ this.uniforms = null; this.gl = null; - this.attribute = null; + this.attributes = null; }; /** @@ -5429,7 +6378,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -5437,18 +6392,20 @@ this.gl = gl; /** - * @property {any} program - The WebGL program. - */ + * The WebGL program. + * @property program + * @type {Any} + */ this.program = null; /** + * The fragment shader. * @property fragmentSrc * @type Array */ this.fragmentSrc = [ - 'precision mediump float;', - + 'precision mediump float;', 'varying vec4 vColor;', @@ -5458,6 +6415,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -5485,14 +6443,15 @@ this.init(); }; +PIXI.ComplexPrimitiveShader.prototype.constructor = PIXI.ComplexPrimitiveShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.ComplexPrimitiveShader.prototype.init = function() { - var gl = this.gl; var program = PIXI.compileProgram(gl, this.vertexSrc, this.fragmentSrc); @@ -5504,7 +6463,6 @@ this.tintColor = gl.getUniformLocation(program, 'tint'); this.color = gl.getUniformLocation(program, 'color'); - // get and store the attributes this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); // this.colorAttribute = gl.getAttribLocation(program, 'aColor'); @@ -5518,9 +6476,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { @@ -5544,7 +6502,6 @@ */ PIXI.WebGLGraphics = function() { - }; /** @@ -5585,8 +6542,6 @@ gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 ); renderSession.stencilManager.popStencil(graphics, webGLData, renderSession); - - this.last = webGLData.mode; } else { @@ -5655,7 +6610,6 @@ webGL.data = []; webGL.lastIndex = 0; } - var webGLData; @@ -5668,10 +6622,21 @@ if(data.type === PIXI.Graphics.POLY) { + // need to add the points the the graphics object.. + data.points = data.shape.points.slice(); + if(data.shape.closed) + { + // close the poly if the valu is true! + if(data.points[0] !== data.points[data.points.length-2] && data.points[1] !== data.points[data.points.length-1]) + { + data.points.push(data.points[0], data.points[1]); + } + } + // MAKE SURE WE HAVE THE CORRECT TYPE.. if(data.fill) { - if(data.points.length > 6) + if(data.points.length >= 6) { if(data.points.length > 5 * 2) { @@ -5711,7 +6676,6 @@ } } - webGL.lastIndex++; } @@ -5723,7 +6687,13 @@ } }; - +/** + * @static + * @private + * @method switchMode + * @param webGL {WebGLContext} + * @param type {Number} + */ PIXI.WebGLGraphics.switchMode = function(webGL, type) { var webGLData; @@ -5765,12 +6735,11 @@ // --- // // need to convert points to a nice regular data // - var rectData = graphicsData.points; - var x = rectData[0]; - var y = rectData[1]; - var width = rectData[2]; - var height = rectData[3]; - + var rectData = graphicsData.shape; + var x = rectData.x; + var y = rectData.y; + var width = rectData.width; + var height = rectData.height; if(graphicsData.fill) { @@ -5831,15 +6800,13 @@ */ PIXI.WebGLGraphics.buildRoundedRectangle = function(graphicsData, webGLData) { - - var points = graphicsData.points; + var points = graphicsData.shape.points; var x = points[0]; var y = points[1]; var width = points[2]; var height = points[3]; var radius = points[4]; - var recPoints = []; recPoints.push(x, y + radius); recPoints = recPoints.concat(PIXI.WebGLGraphics.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height)); @@ -5847,7 +6814,6 @@ recPoints = recPoints.concat(PIXI.WebGLGraphics.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y)); recPoints = recPoints.concat(PIXI.WebGLGraphics.quadraticBezierCurve(x + radius, y, x, y, x, y + radius)); - if (graphicsData.fill) { var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; @@ -5891,18 +6857,22 @@ }; /** - * Calcul the points for a quadratic bezier curve. (helper function..) - * Based on : https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c + * Calculate the points for a quadratic bezier curve. (helper function..) + * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c * - * @param {number} fromX Origin point x - * @param {number} fromY Origin point x - * @param {number} cpX Control point x - * @param {number} cpY Control point y - * @param {number} toX Destination point x - * @param {number} toY Destination point y - * @return {number[]} + * @static + * @private + * @method quadraticBezierCurve + * @param fromX {Number} Origin point x + * @param fromY {Number} Origin point x + * @param cpX {Number} Control point x + * @param cpY {Number} Control point y + * @param toX {Number} Destination point x + * @param toY {Number} Destination point y + * @return {Array} */ PIXI.WebGLGraphics.quadraticBezierCurve = function(fromX, fromY, cpX, cpY, toX, toY) { + var xa, ya, xb, @@ -5949,13 +6919,24 @@ */ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData) { - // need to convert points to a nice regular data - var rectData = graphicsData.points; - var x = rectData[0]; - var y = rectData[1]; - var width = rectData[2]; - var height = rectData[3]; + var circleData = graphicsData.shape; + var x = circleData.x; + var y = circleData.y; + var width; + var height; + + // TODO - bit hacky?? + if(graphicsData.type === PIXI.Graphics.CIRC) + { + width = circleData.radius; + height = circleData.radius; + } + else + { + width = circleData.width; + height = circleData.height; + } var totalSegs = 40; var seg = (Math.PI * 2) / totalSegs ; @@ -6023,7 +7004,6 @@ { // TODO OPTIMISE! var i = 0; - var points = graphicsData.points; if(points.length === 0)return; @@ -6228,13 +7208,12 @@ * * @static * @private - * @method buildPoly + * @method buildComplexPoly * @param graphicsData {Graphics} The graphics object containing all the necessary properties * @param webGLData {Object} */ PIXI.WebGLGraphics.buildComplexPoly = function(graphicsData, webGLData) { - //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. var points = graphicsData.points.slice(); if(points.length < 6)return; @@ -6286,11 +7265,20 @@ }; +/** + * Builds a polygon to draw + * + * @static + * @private + * @method buildPoly + * @param graphicsData {Graphics} The graphics object containing all the necessary properties + * @param webGLData {Object} + */ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData) { var points = graphicsData.points; - if(points.length < 6)return; + if(points.length < 6)return; // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; @@ -6328,6 +7316,11 @@ PIXI.WebGLGraphics.graphicsDataPool = []; +/** + * @class WebGLGraphicsData + * @private + * @static + */ PIXI.WebGLGraphicsData = function(gl) { this.gl = gl; @@ -6344,6 +7337,9 @@ this.dirty = true; }; +/** + * @method reset + */ PIXI.WebGLGraphicsData.prototype.reset = function() { this.points = []; @@ -6351,6 +7347,9 @@ this.lastIndex = 0; }; +/** + * @method upload + */ PIXI.WebGLGraphicsData.prototype.upload = function() { var gl = this.gl; @@ -6376,39 +7375,66 @@ PIXI.glContexts = []; // this is where we store the webGL contexts for easy access. /** - * the WebGLRenderer draws the stage and all its content onto a webGL enabled canvas. This renderer - * should be used for browsers that support webGL. This Render works by automatically managing webGLBatch's. - * So no need for Sprite Batch's or Sprite Cloud's - * Dont forget to add the view to your DOM or you will not see anything :) + * The WebGLRenderer draws the stage and all its content onto a webGL enabled canvas. This renderer + * should be used for browsers that support webGL. This Render works by automatically managing webGLBatchs. + * So no need for Sprite Batches or Sprite Clouds. + * Don't forget to add the view to your DOM or you will not see anything :) * * @class WebGLRenderer * @constructor - * @param width=0 {Number} the width of the canvas view - * @param height=0 {Number} the height of the canvas view - * @param view {HTMLCanvasElement} the canvas to use as a view, optional - * @param transparent=false {Boolean} If the render view is transparent, default false - * @param antialias=false {Boolean} sets antialias (only applicable in chrome at the moment) - * @param preserveDrawingBuffer=false {Boolean} enables drawing buffer preservation, enable this if you need to call toDataUrl on the webgl context - * + * @param [width=0] {Number} the width of the canvas view + * @param [height=0] {Number} the height of the canvas view + * @param [options] {Object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {Boolean} If the render view is transparent, default false + * @param [options.antialias=false] {Boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {Boolean} enables drawing buffer preservation, enable this if you need to call toDataUrl on the webgl context + * @param [options.resolution=1] {Number} the resolution of the renderer retina would be 2 */ -PIXI.WebGLRenderer = function(width, height, view, transparent, antialias, preserveDrawingBuffer) +PIXI.WebGLRenderer = function(width, height, options) { + if(options) + { + for (var i in PIXI.defaultRenderOptions) + { + if (typeof options[i] === 'undefined') options[i] = PIXI.defaultRenderOptions[i]; + } + } + else + { + options = PIXI.defaultRenderOptions; + } + if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; + /** + * The resolution of the renderer + * + * @property resolution + * @type Number + * @default 1 + */ + this.resolution = options.resolution; + // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * * @property transparent * @type Boolean */ - this.transparent = !!transparent; + this.transparent = options.transparent; /** * The value of the preserveDrawingBuffer flag affects whether or not the contents of the stencil buffer is retained after rendering. @@ -6416,8 +7442,20 @@ * @property preserveDrawingBuffer * @type Boolean */ - this.preserveDrawingBuffer = preserveDrawingBuffer; - + this.preserveDrawingBuffer = options.preserveDrawingBuffer; + + /** + * This sets if the WebGLRenderer will clear the context texture or not before the new render pass. If true: + * If the Stage is NOT transparent, Pixi will clear to alpha (0, 0, 0, 0). + * If the Stage is transparent, Pixi will clear to the target Stage's background color. + * Disable this by setting this to false. For example: if your game has a canvas filling background image, you often don't need this set. + * + * @property clearBeforeRender + * @type Boolean + * @default + */ + this.clearBeforeRender = options.clearBeforeRender; + /** * The width of the canvas view * @@ -6442,87 +7480,99 @@ * @property view * @type HTMLCanvasElement */ - this.view = view || document.createElement( 'canvas' ); - this.view.width = this.width; - this.view.height = this.height; + this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. - this.contextLost = this.handleContextLost.bind(this); - this.contextRestoredLost = this.handleContextRestored.bind(this); - - this.view.addEventListener('webglcontextlost', this.contextLost, false); - this.view.addEventListener('webglcontextrestored', this.contextRestoredLost, false); - this.options = { + /** + * @property contextLostBound + * @type Function + */ + this.contextLostBound = this.handleContextLost.bind(this); + + /** + * @property contextRestoredBound + * @type Function + */ + this.contextRestoredBound = this.handleContextRestored.bind(this); + + this.view.addEventListener('webglcontextlost', this.contextLostBound, false); + this.view.addEventListener('webglcontextrestored', this.contextRestoredBound, false); + + /** + * @property _contextOptions + * @type Object + * @private + */ + this._contextOptions = { alpha: this.transparent, - antialias:!!antialias, // SPEED UP?? - premultipliedAlpha:!!transparent, + antialias: options.antialias, // SPEED UP?? + premultipliedAlpha:this.transparent && this.transparent !== 'notMultiplied', stencil:true, - preserveDrawingBuffer: preserveDrawingBuffer + preserveDrawingBuffer: options.preserveDrawingBuffer }; - var gl = null; - - ['experimental-webgl', 'webgl'].forEach(function(name) { - try { - gl = gl || this.view.getContext(name, this.options); - } catch(e) {} - }, this); - - if (!gl) { - // fail, not able to get a context - throw new Error('This browser does not support webGL. Try using the canvas renderer' + this); - } - - this.gl = gl; - this.glContextId = gl.id = PIXI.WebGLRenderer.glContextId ++; - - PIXI.glContexts[this.glContextId] = gl; - - if(!PIXI.blendModesWebGL) - { - PIXI.blendModesWebGL = []; - - PIXI.blendModesWebGL[PIXI.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - PIXI.blendModesWebGL[PIXI.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - } - - - - + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); - this.projection.x = this.width/2; - this.projection.y = -this.height/2; + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - this.resize(this.width, this.height); - this.contextLost = false; + // time to create the render managers! each one focuses on managing a state in webGL - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(gl); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(gl); // manages the rendering of sprites - //this.primitiveBatch = new PIXI.WebGLPrimitiveBatch(gl); // primitive batch renderer - this.maskManager = new PIXI.WebGLMaskManager(gl); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(gl, this.transparent); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(gl); - this.blendModeManager = new PIXI.WebGLBlendModeManager(gl); + /** + * Deals with managing the shader programs and their attribs + * @property shaderManager + * @type WebGLShaderManager + */ + this.shaderManager = new PIXI.WebGLShaderManager(); + /** + * Manages the rendering of sprites + * @property spriteBatch + * @type WebGLSpriteBatch + */ + this.spriteBatch = new PIXI.WebGLSpriteBatch(); + + /** + * Manages the masks using the stencil buffer + * @property maskManager + * @type WebGLMaskManager + */ + this.maskManager = new PIXI.WebGLMaskManager(); + + /** + * Manages the filters + * @property filterManager + * @type WebGLFilterManager + */ + this.filterManager = new PIXI.WebGLFilterManager(); + + /** + * Manages the stencil buffer + * @property stencilManager + * @type WebGLStencilManager + */ + this.stencilManager = new PIXI.WebGLStencilManager(); + + /** + * Manages the blendModes + * @property blendModeManager + * @type WebGLBlendModeManager + */ + this.blendModeManager = new PIXI.WebGLBlendModeManager(); + + /** + * TODO remove + * @property renderSession + * @type Object + */ this.renderSession = {}; this.renderSession.gl = this.gl; this.renderSession.drawCount = 0; @@ -6530,24 +7580,58 @@ this.renderSession.maskManager = this.maskManager; this.renderSession.filterManager = this.filterManager; this.renderSession.blendModeManager = this.blendModeManager; - // this.renderSession.primitiveBatch = this.primitiveBatch; this.renderSession.spriteBatch = this.spriteBatch; this.renderSession.stencilManager = this.stencilManager; this.renderSession.renderer = this; + this.renderSession.resolution = this.resolution; - gl.useProgram(this.shaderManager.defaultShader.program); + // time init the context.. + this.initContext(); - gl.disable(gl.DEPTH_TEST); - gl.disable(gl.CULL_FACE); - - gl.enable(gl.BLEND); - gl.colorMask(true, true, true, true); + // map some webGL blend modes.. + this.mapBlendModes(); }; // constructor PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer; /** +* @method initContext +*/ +PIXI.WebGLRenderer.prototype.initContext = function() +{ + var gl = this.view.getContext('webgl', this._contextOptions) || this.view.getContext('experimental-webgl', this._contextOptions); + this.gl = gl; + + if (!gl) { + // fail, not able to get a context + throw new Error('This browser does not support webGL. Try using the canvas renderer'); + } + + this.glContextId = gl.id = PIXI.WebGLRenderer.glContextId ++; + + PIXI.glContexts[this.glContextId] = gl; + + // set up the default pixi settings.. + gl.disable(gl.DEPTH_TEST); + gl.disable(gl.CULL_FACE); + gl.enable(gl.BLEND); + + // need to set the context for all the managers... + this.shaderManager.setContext(gl); + this.spriteBatch.setContext(gl); + this.maskManager.setContext(gl); + this.filterManager.setContext(gl); + this.blendModeManager.setContext(gl); + this.stencilManager.setContext(gl); + + this.renderSession.gl = this.gl; + + // now resize and we are good to go! + this.resize(this.width, this.height); +}; + +/** * Renders the stage to its webGL view * * @method render @@ -6555,9 +7639,9 @@ */ PIXI.WebGLRenderer.prototype.render = function(stage) { + // no point rendering if our context has been blown up! if(this.contextLost)return; - // if rendering a new stage clear the batches.. if(this.__stage !== stage) { @@ -6568,13 +7652,11 @@ this.__stage = stage; } - // update any textures this includes uvs and uploading them to the gpu - PIXI.WebGLRenderer.updateTextures(); - // update the scene graph stage.updateTransform(); - + var gl = this.gl; + // interaction if(stage._interactive) { @@ -6585,40 +7667,6 @@ stage.interactionManager.setTarget(this); } } - - var gl = this.gl; - - // -- Does this need to be set every frame? -- // - //gl.colorMask(true, true, true, this.transparent); - gl.viewport(0, 0, this.width, this.height); - - // make sure we are bound to the main frame buffer - gl.bindFramebuffer(gl.FRAMEBUFFER, null); - - if(this.transparent) - { - gl.clearColor(0, 0, 0, 0); - } - else - { - gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], 1); - } - - - gl.clear(gl.COLOR_BUFFER_BIT); - - this.renderDisplayObject( stage, this.projection ); - - // interaction - if(stage.interactive) - { - //need to add some events! - if(!stage._interactiveEventsAdded) - { - stage._interactiveEventsAdded = true; - stage.interactionManager.setTarget(this); - } - } else { if(stage._interactiveEventsAdded) @@ -6628,51 +7676,53 @@ } } - /* - //can simulate context loss in Chrome like so: - this.view.onmousedown = function(ev) { - console.dir(this.gl.getSupportedExtensions()); - var ext = ( - gl.getExtension("WEBGL_scompressed_texture_s3tc") - // gl.getExtension("WEBGL_compressed_texture_s3tc") || - // gl.getExtension("MOZ_WEBGL_compressed_texture_s3tc") || - // gl.getExtension("WEBKIT_WEBGL_compressed_texture_s3tc") - ); - console.dir(ext); - var loseCtx = this.gl.getExtension("WEBGL_lose_context"); - console.log("killing context"); - loseCtx.loseContext(); - setTimeout(function() { - console.log("restoring context..."); - loseCtx.restoreContext(); - }.bind(this), 1000); - }.bind(this); - */ + // -- Does this need to be set every frame? -- // + gl.viewport(0, 0, this.width, this.height); + + // make sure we are bound to the main frame buffer + gl.bindFramebuffer(gl.FRAMEBUFFER, null); + + if (this.clearBeforeRender) + { + if(this.transparent) + { + gl.clearColor(0, 0, 0, 0); + } + else + { + gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], 1); + } + + gl.clear (gl.COLOR_BUFFER_BIT); + } + + this.renderDisplayObject( stage, this.projection ); }; /** - * Renders a display Object + * Renders a Display Object. * - * @method renderDIsplayObject + * @method renderDisplayObject * @param displayObject {DisplayObject} The DisplayObject to render * @param projection {Point} The projection - * @param buffer {Array} a standard WebGL buffer + * @param buffer {Array} a standard WebGL buffer */ PIXI.WebGLRenderer.prototype.renderDisplayObject = function(displayObject, projection, buffer) { this.renderSession.blendModeManager.setBlendMode(PIXI.blendModes.NORMAL); + // reset the render session data.. this.renderSession.drawCount = 0; - this.renderSession.currentBlendMode = 9999; + // set the default projection this.renderSession.projection = projection; + + //set the default offset this.renderSession.offset = this.offset; // start the sprite batch this.spriteBatch.begin(this.renderSession); -// this.primitiveBatch.begin(this.renderSession); - // start the filter manager this.filterManager.begin(this.renderSession, buffer); @@ -6681,79 +7731,10 @@ // finish the sprite batch this.spriteBatch.end(); - -// this.primitiveBatch.end(); }; /** - * Updates the textures loaded into this webgl renderer - * - * @static - * @method updateTextures - * @private - */ -PIXI.WebGLRenderer.updateTextures = function() -{ - var i = 0; - - //TODO break this out into a texture manager... - // for (i = 0; i < PIXI.texturesToUpdate.length; i++) - // PIXI..updateWebGLTexture(PIXI.texturesToUpdate[i], this.gl); - - - for (i=0; i < PIXI.Texture.frameUpdates.length; i++) - PIXI.WebGLRenderer.updateTextureFrame(PIXI.Texture.frameUpdates[i]); - - for (i = 0; i < PIXI.texturesToDestroy.length; i++) - PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]); - - PIXI.texturesToUpdate.length = 0; - PIXI.texturesToDestroy.length = 0; - PIXI.Texture.frameUpdates.length = 0; -}; - -/** - * Destroys a loaded webgl texture - * - * @method destroyTexture - * @param texture {Texture} The texture to update - * @private - */ -PIXI.WebGLRenderer.destroyTexture = function(texture) -{ - //TODO break this out into a texture manager... - - for (var i = texture._glTextures.length - 1; i >= 0; i--) - { - var glTexture = texture._glTextures[i]; - var gl = PIXI.glContexts[i]; - - if(gl && glTexture) - { - gl.deleteTexture(glTexture); - } - } - - texture._glTextures.length = 0; -}; - -/** - * - * @method updateTextureFrame - * @param texture {Texture} The texture to update the frame from - * @private - */ -PIXI.WebGLRenderer.updateTextureFrame = function(texture) -{ - //texture.updateFrame = false; - - // now set the uvs. Figured that the uv data sits with a texture rather than a sprite. - // so uv data is stored on the texture itself - texture._updateWebGLuvs(); -}; - -/** - * resizes the webGL view to the specified width and height + * Resizes the webGL view to the specified width and height. * * @method resize * @param width {Number} the new width of the webGL view @@ -6761,100 +7742,58 @@ */ PIXI.WebGLRenderer.prototype.resize = function(width, height) { - this.width = width; - this.height = height; + this.width = width * this.resolution; + this.height = height * this.resolution; - this.view.width = width; - this.view.height = height; + this.view.width = this.width; + this.view.height = this.height; this.gl.viewport(0, 0, this.width, this.height); - this.projection.x = this.width/2; - this.projection.y = -this.height/2; + this.projection.x = this.width / 2 / this.resolution; + this.projection.y = -this.height / 2 / this.resolution; }; /** - * Creates a WebGL texture + * Updates and Creates a WebGL texture for the renderers context. * - * @method createWebGLTexture - * @param texture {Texture} the texture to render - * @param gl {webglContext} the WebGL context - * @static + * @method updateTexture + * @param texture {Texture} the texture to update */ -PIXI.createWebGLTexture = function(texture, gl) +PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { + if(!texture.hasLoaded )return; + var gl = this.gl; - if(texture.hasLoaded) + if(!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + + gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); + + gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); + + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === PIXI.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === PIXI.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + + // reguler... + if(!texture._powerOf2) { - texture._glTextures[gl.id] = gl.createTexture(); - - gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); - - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === PIXI.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === PIXI.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - - // reguler... - - if(!texture._powerOf2) - { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - } - else - { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); - } - - gl.bindTexture(gl.TEXTURE_2D, null); - - texture._dirty[gl.id] = false; + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); } + else + { + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); + } + + texture._dirty[gl.id] = false; return texture._glTextures[gl.id]; }; /** - * Updates a WebGL texture - * - * @method updateWebGLTexture - * @param texture {Texture} the texture to update - * @param gl {webglContext} the WebGL context - * @private - */ -PIXI.updateWebGLTexture = function(texture, gl) -{ - if( texture._glTextures[gl.id] ) - { - gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); - - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === PIXI.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === PIXI.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - - // reguler... - - if(!texture._powerOf2) - { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - } - else - { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); - } - - texture._dirty[gl.id] = false; - } - -}; - -/** * Handles a lost webgl context * * @method handleContextLost @@ -6876,56 +7815,16 @@ */ PIXI.WebGLRenderer.prototype.handleContextRestored = function() { + this.initContext(); - //try 'experimental-webgl' - try { - this.gl = this.view.getContext('experimental-webgl', this.options); - } catch (e) { - //try 'webgl' - try { - this.gl = this.view.getContext('webgl', this.options); - } catch (e2) { - // fail, not able to get a context - throw new Error(' This browser does not support webGL. Try using the canvas renderer' + this); - } - } - - var gl = this.gl; - gl.id = PIXI.WebGLRenderer.glContextId ++; - - - - // need to set the context... - this.shaderManager.setContext(gl); - this.spriteBatch.setContext(gl); - this.primitiveBatch.setContext(gl); - this.maskManager.setContext(gl); - this.filterManager.setContext(gl); - - - this.renderSession.gl = this.gl; - - gl.disable(gl.DEPTH_TEST); - gl.disable(gl.CULL_FACE); - - gl.enable(gl.BLEND); - gl.colorMask(true, true, true, true); - - this.gl.viewport(0, 0, this.width, this.height); - + // empty all the ol gl textures as they are useless now for(var key in PIXI.TextureCache) { var texture = PIXI.TextureCache[key].baseTexture; texture._glTextures = []; } - - /** - * Whether the context was lost - * @property contextLost - * @type Boolean - */ + this.contextLost = false; - }; /** @@ -6935,12 +7834,9 @@ */ PIXI.WebGLRenderer.prototype.destroy = function() { - - // deal with losing context.. - // remove listeners - this.view.removeEventListener('webglcontextlost', this.contextLost); - this.view.removeEventListener('webglcontextrestored', this.contextRestoredLost); + this.view.off('webglcontextlost', this.contextLostBound); + this.view.off('webglcontextrestored', this.contextRestoredBound); PIXI.glContexts[this.glContextId] = null; @@ -6950,7 +7846,6 @@ // time to create the render managers! each one focuses on managine a state in webGL this.shaderManager.destroy(); this.spriteBatch.destroy(); - this.primitiveBatch.destroy(); this.maskManager.destroy(); this.filterManager.destroy(); @@ -6958,12 +7853,43 @@ this.spriteBatch = null; this.maskManager = null; this.filterManager = null; - + this.gl = null; - // this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ +PIXI.WebGLRenderer.prototype.mapBlendModes = function() +{ + var gl = this.gl; + + if(!PIXI.blendModesWebGL) + { + PIXI.blendModesWebGL = []; + + PIXI.blendModesWebGL[PIXI.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + PIXI.blendModesWebGL[PIXI.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + } +}; PIXI.WebGLRenderer.glContextId = 0; @@ -6972,27 +7898,42 @@ */ /** -* @class WebGLMaskManager +* @class WebGLBlendModeManager * @constructor * @param gl {WebGLContext} the current WebGL drawing context -* @private */ -PIXI.WebGLBlendModeManager = function(gl) +PIXI.WebGLBlendModeManager = function() { - this.gl = gl; + /** + * @property currentBlendMode + * @type Number + */ this.currentBlendMode = 99999; }; +PIXI.WebGLBlendModeManager.prototype.constructor = PIXI.WebGLBlendModeManager; + /** -* Sets-up the given blendMode from WebGL's point of view + * Sets the WebGL Context. + * + * @method setContext + * @param gl {WebGLContext} the current WebGL drawing context + */ +PIXI.WebGLBlendModeManager.prototype.setContext = function(gl) +{ + this.gl = gl; +}; + +/** +* Sets-up the given blendMode from WebGL's point of view. +* * @method setBlendMode -* * @param blendMode {Number} the blendMode, should be a Pixi const, such as PIXI.BlendModes.ADD */ PIXI.WebGLBlendModeManager.prototype.setBlendMode = function(blendMode) { if(this.currentBlendMode === blendMode)return false; - // console.log("SWAP!") + this.currentBlendMode = blendMode; var blendModeWebGL = PIXI.blendModesWebGL[this.currentBlendMode]; @@ -7001,10 +7942,16 @@ return true; }; +/** +* Destroys this object. +* +* @method destroy +*/ PIXI.WebGLBlendModeManager.prototype.destroy = function() { this.gl = null; }; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -7012,22 +7959,17 @@ /** * @class WebGLMaskManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ -PIXI.WebGLMaskManager = function(gl) +PIXI.WebGLMaskManager = function() { - this.maskStack = []; - this.maskPosition = 0; - - this.setContext(gl); - - this.reverse = false; - this.count = 0; }; +PIXI.WebGLMaskManager.prototype.constructor = PIXI.WebGLMaskManager; + /** -* Sets the drawing context to the one given in parameter +* Sets the drawing context to the one given in parameter. +* * @method setContext * @param gl {WebGLContext} the current WebGL drawing context */ @@ -7037,10 +7979,11 @@ }; /** -* Applies the Mask and adds it to the current filter stack +* Applies the Mask and adds it to the current filter stack. +* * @method pushMask * @param maskData {Array} -* @param renderSession {RenderSession} +* @param renderSession {Object} */ PIXI.WebGLMaskManager.prototype.pushMask = function(maskData, renderSession) { @@ -7057,10 +8000,11 @@ }; /** -* Removes the last filter from the filter stack and doesn't return it +* Removes the last filter from the filter stack and doesn't return it. +* * @method popMask -* -* @param renderSession {RenderSession} an object containing all the useful parameters +* @param maskData {Array} +* @param renderSession {Object} an object containing all the useful parameters */ PIXI.WebGLMaskManager.prototype.popMask = function(maskData, renderSession) { @@ -7068,42 +8012,35 @@ renderSession.stencilManager.popStencil(maskData, maskData._webGL[gl.id].data[0], renderSession); }; - /** -* Destroys the mask stack +* Destroys the mask stack. +* * @method destroy */ PIXI.WebGLMaskManager.prototype.destroy = function() { - this.maskStack = null; this.gl = null; }; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - -//BA0285 -//Intercontinental Hotel, 888 Howard Street -//San Francisco /** * @class WebGLStencilManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ -PIXI.WebGLStencilManager = function(gl) +PIXI.WebGLStencilManager = function() { - this.stencilStack = []; - this.setContext(gl); this.reverse = true; this.count = 0; - }; /** -* Sets the drawing context to the one given in parameter +* Sets the drawing context to the one given in parameter. +* * @method setContext * @param gl {WebGLContext} the current WebGL drawing context */ @@ -7113,10 +8050,12 @@ }; /** -* Applies the Mask and adds it to the current filter stack +* Applies the Mask and adds it to the current filter stack. +* * @method pushMask -* @param maskData {Array} -* @param renderSession {RenderSession} +* @param graphics {Graphics} +* @param webGLData {Array} +* @param renderSession {Object} */ PIXI.WebGLStencilManager.prototype.pushStencil = function(graphics, webGLData, renderSession) { @@ -7144,7 +8083,6 @@ if(webGLData.mode === 1) { - gl.drawElements(gl.TRIANGLE_FAN, webGLData.indices.length - 4, gl.UNSIGNED_SHORT, 0 ); if(this.reverse) @@ -7203,7 +8141,14 @@ this.count++; }; -//TODO this does not belong here! +/** + * TODO this does not belong here! + * + * @method bindGraphics + * @param graphics {Graphics} + * @param webGLData {Array} + * @param renderSession {Object} + */ PIXI.WebGLStencilManager.prototype.bindGraphics = function(graphics, webGLData, renderSession) { //if(this._currentGraphics === graphics)return; @@ -7218,7 +8163,7 @@ if(webGLData.mode === 1) { - shader = renderSession.shaderManager.complexPrimativeShader; + shader = renderSession.shaderManager.complexPrimitiveShader; renderSession.shaderManager.setShader( shader ); @@ -7266,6 +8211,12 @@ } }; +/** + * @method popStencil + * @param graphics {Graphics} + * @param webGLData {Array} + * @param renderSession {Object} + */ PIXI.WebGLStencilManager.prototype.popStencil = function(graphics, webGLData, renderSession) { var gl = this.gl; @@ -7353,19 +8304,19 @@ } - - //renderSession.shaderManager.deactivatePrimitiveShader(); }; /** -* Destroys the mask stack +* Destroys the mask stack. +* * @method destroy */ PIXI.WebGLStencilManager.prototype.destroy = function() { - this.maskStack = null; + this.stencilStack = null; this.gl = null; }; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -7373,41 +8324,58 @@ /** * @class WebGLShaderManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ -PIXI.WebGLShaderManager = function(gl) +PIXI.WebGLShaderManager = function() { - + /** + * @property maxAttibs + * @type Number + */ this.maxAttibs = 10; - this.attribState = []; - this.tempAttribState = []; - this.shaderMap = []; - for (var i = 0; i < this.maxAttibs; i++) { + /** + * @property attribState + * @type Array + */ + this.attribState = []; + + /** + * @property tempAttribState + * @type Array + */ + this.tempAttribState = []; + + for (var i = 0; i < this.maxAttibs; i++) + { this.attribState[i] = false; } - this.setContext(gl); - // the final one is used for the rendering strips + /** + * @property stack + * @type Array + */ + this.stack = []; + }; +PIXI.WebGLShaderManager.prototype.constructor = PIXI.WebGLShaderManager; /** -* Initialises the context and the properties +* Initialises the context and the properties. +* * @method setContext * @param gl {WebGLContext} the current WebGL drawing context -* @param transparent {Boolean} Whether or not the drawing context should be transparent */ PIXI.WebGLShaderManager.prototype.setContext = function(gl) { this.gl = gl; - // the next one is used for rendering primatives + // the next one is used for rendering primitives this.primitiveShader = new PIXI.PrimitiveShader(gl); // the next one is used for rendering triangle strips - this.complexPrimativeShader = new PIXI.ComplexPrimitiveShader(gl); + this.complexPrimitiveShader = new PIXI.ComplexPrimitiveShader(gl); // this shader is used for the default sprite rendering this.defaultShader = new PIXI.PixiShader(gl); @@ -7420,16 +8388,15 @@ this.setShader(this.defaultShader); }; - /** -* Takes the attributes given in parameters +* Takes the attributes given in parameters. +* * @method setAttribs * @param attribs {Array} attribs */ PIXI.WebGLShaderManager.prototype.setAttribs = function(attribs) { // reset temp state - var i; for (i = 0; i < this.tempAttribState.length; i++) @@ -7464,6 +8431,12 @@ } }; +/** +* Sets the current shader. +* +* @method setShader +* @param shader {Any} +*/ PIXI.WebGLShaderManager.prototype.setShader = function(shader) { if(this._currentId === shader._UID)return false; @@ -7479,7 +8452,8 @@ }; /** -* Destroys +* Destroys this object. +* * @method destroy */ PIXI.WebGLShaderManager.prototype.destroy = function() @@ -7490,6 +8464,8 @@ this.primitiveShader.destroy(); + this.complexPrimitiveShader.destroy(); + this.defaultShader.destroy(); this.fastShader.destroy(); @@ -7499,7 +8475,6 @@ this.gl = null; }; - /** * @author Mat Groves * @@ -7515,15 +8490,10 @@ * @class WebGLSpriteBatch * @private * @constructor - * @param gl {WebGLContext} the current WebGL drawing context - * */ -PIXI.WebGLSpriteBatch = function(gl) +PIXI.WebGLSpriteBatch = function() { - /** - * - * * @property vertSize * @type Number */ @@ -7541,8 +8511,6 @@ //the total number of indices in our batch var numIndices = this.size * 6; - //vertex data - /** * Holds the vertices * @@ -7551,7 +8519,6 @@ */ this.vertices = new Float32Array(numVerts); - //index data /** * Holds the indices * @@ -7560,6 +8527,10 @@ */ this.indices = new Uint16Array(numIndices); + /** + * @property lastIndexCount + * @type Number + */ this.lastIndexCount = 0; for (var i=0, j=0; i < numIndices; i += 6, j += 4) @@ -7572,23 +8543,71 @@ this.indices[i + 5] = j + 3; } - + /** + * @property drawing + * @type Boolean + */ this.drawing = false; - this.currentBatchSize = 0; - this.currentBaseTexture = null; - - this.setContext(gl); + /** + * @property currentBatchSize + * @type Number + */ + this.currentBatchSize = 0; + + /** + * @property currentBaseTexture + * @type BaseTexture + */ + this.currentBaseTexture = null; + + /** + * @property dirty + * @type Boolean + */ this.dirty = true; + /** + * @property textures + * @type Array + */ this.textures = []; + + /** + * @property blendModes + * @type Array + */ this.blendModes = []; + + /** + * @property shaders + * @type Array + */ + this.shaders = []; + + /** + * @property sprites + * @type Array + */ + this.sprites = []; + + /** + * @property defaultShader + * @type AbstractFilter + */ + this.defaultShader = new PIXI.AbstractFilter([ + 'precision lowp float;', + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + 'uniform sampler2D uSampler;', + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', + '}' + ]); }; /** -* * @method setContext -* * @param gl {WebGLContext} the current WebGL drawing context */ PIXI.WebGLSpriteBatch.prototype.setContext = function(gl) @@ -7601,7 +8620,6 @@ // 65535 is max index, so 65535 / 6 = 10922. - //upload the index data gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); @@ -7610,13 +8628,19 @@ gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.DYNAMIC_DRAW); this.currentBlendMode = 99999; + + var shader = new PIXI.PixiShader(gl); + + shader.fragmentSrc = this.defaultShader.fragmentSrc; + shader.uniforms = {}; + shader.init(); + + this.defaultShader.shaders[gl.id] = shader; }; /** -* * @method begin -* -* @param renderSession {RenderSession} the RenderSession +* @param renderSession {Object} The RenderSession object */ PIXI.WebGLSpriteBatch.prototype.begin = function(renderSession) { @@ -7627,9 +8651,7 @@ }; /** -* * @method end -* */ PIXI.WebGLSpriteBatch.prototype.end = function() { @@ -7637,9 +8659,7 @@ }; /** -* * @method render -* * @param sprite {Sprite} the sprite to render when using this spritebatch */ PIXI.WebGLSpriteBatch.prototype.render = function(sprite) @@ -7650,7 +8670,6 @@ // check texture.. if(this.currentBatchSize >= this.size) { - //return; this.flush(); this.currentBaseTexture = texture.baseTexture; } @@ -7666,7 +8685,6 @@ var verticies = this.vertices; - // TODO trim?? var aX = sprite.anchor.x; var aY = sprite.anchor.y; @@ -7695,15 +8713,18 @@ } var index = this.currentBatchSize * 4 * this.vertSize; + + var resolution = texture.baseTexture.resolution; var worldTransform = sprite.worldTransform; - var a = worldTransform.a;//[0]; - var b = worldTransform.c;//[3]; - var c = worldTransform.b;//[1]; - var d = worldTransform.d;//[4]; - var tx = worldTransform.tx;//[2]; - var ty = worldTransform.ty;///[5]; + var a = worldTransform.a / resolution; + var b = worldTransform.b / resolution; + var c = worldTransform.c / resolution; + var d = worldTransform.d / resolution; + var tx = worldTransform.tx; + var ty = worldTransform.ty; + // xy verticies[index++] = a * w1 + c * h1 + tx; @@ -7746,24 +8767,20 @@ verticies[index++] = tint; // increment the batchsize - this.textures[this.currentBatchSize] = sprite.texture.baseTexture; - this.blendModes[this.currentBatchSize] = sprite.blendMode; - - this.currentBatchSize++; + this.sprites[this.currentBatchSize++] = sprite; }; /** -* Renders a tilingSprite using the spriteBatch -* @method renderTilingSprite +* Renders a TilingSprite using the spriteBatch. * +* @method renderTilingSprite * @param sprite {TilingSprite} the tilingSprite to render */ PIXI.WebGLSpriteBatch.prototype.renderTilingSprite = function(tilingSprite) { var texture = tilingSprite.tilingTexture; - // check texture.. if(this.currentBatchSize >= this.size) { @@ -7820,12 +8837,14 @@ var index = this.currentBatchSize * 4 * this.vertSize; + var resolution = texture.baseTexture.resolution; + var worldTransform = tilingSprite.worldTransform; - var a = worldTransform.a;//[0]; - var b = worldTransform.c;//[3]; - var c = worldTransform.b;//[1]; - var d = worldTransform.d;//[4]; + var a = worldTransform.a / resolution;//[0]; + var b = worldTransform.b / resolution;//[3]; + var c = worldTransform.c / resolution;//[1]; + var d = worldTransform.d / resolution;//[4]; var tx = worldTransform.tx;//[2]; var ty = worldTransform.ty;///[5]; @@ -7869,18 +8888,14 @@ verticies[index++] = alpha; verticies[index++] = tint; - // increment the batchs - this.textures[this.currentBatchSize] = texture.baseTexture; - this.blendModes[this.currentBatchSize] = tilingSprite.blendMode; - this.currentBatchSize++; + // increment the batchsize + this.sprites[this.currentBatchSize++] = tilingSprite; }; - /** -* Renders the content and empties the current batch +* Renders the content and empties the current batch. * * @method flush -* */ PIXI.WebGLSpriteBatch.prototype.flush = function() { @@ -7888,8 +8903,7 @@ if (this.currentBatchSize===0)return; var gl = this.gl; - - this.renderSession.shaderManager.setShader(this.renderSession.shaderManager.defaultShader); + var shader; if(this.dirty) { @@ -7901,16 +8915,13 @@ gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - // set the projection - var projection = this.renderSession.projection; - gl.uniform2f(this.shader.projectionVector, projection.x, projection.y); + shader = this.defaultShader.shaders[gl.id]; - // set the pointers + // this is the same for each shader? var stride = this.vertSize * 4; - gl.vertexAttribPointer(this.shader.aVertexPosition, 2, gl.FLOAT, false, stride, 0); - gl.vertexAttribPointer(this.shader.aTextureCoord, 2, gl.FLOAT, false, stride, 2 * 4); - gl.vertexAttribPointer(this.shader.colorAttribute, 2, gl.FLOAT, false, stride, 4 * 4); - + gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, stride, 0); + gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, stride, 2 * 4); + gl.vertexAttribPointer(shader.colorAttribute, 2, gl.FLOAT, false, stride, 4 * 4); } // upload the verts to the buffer @@ -7924,28 +8935,76 @@ gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); } - var nextTexture, nextBlendMode; + var nextTexture, nextBlendMode, nextShader; var batchSize = 0; var start = 0; var currentBaseTexture = null; var currentBlendMode = this.renderSession.blendModeManager.currentBlendMode; + var currentShader = null; + + var blendSwap = false; + var shaderSwap = false; + var sprite; for (var i = 0, j = this.currentBatchSize; i < j; i++) { - nextTexture = this.textures[i]; - nextBlendMode = this.blendModes[i]; + sprite = this.sprites[i]; - if(currentBaseTexture !== nextTexture || currentBlendMode !== nextBlendMode) + nextTexture = sprite.texture.baseTexture; + nextBlendMode = sprite.blendMode; + nextShader = sprite.shader || this.defaultShader; + + blendSwap = currentBlendMode !== nextBlendMode; + shaderSwap = currentShader !== nextShader; // should I use _UIDS??? + + if(currentBaseTexture !== nextTexture || blendSwap || shaderSwap) { this.renderBatch(currentBaseTexture, batchSize, start); start = i; batchSize = 0; currentBaseTexture = nextTexture; - currentBlendMode = nextBlendMode; - - this.renderSession.blendModeManager.setBlendMode( currentBlendMode ); + + if( blendSwap ) + { + currentBlendMode = nextBlendMode; + this.renderSession.blendModeManager.setBlendMode( currentBlendMode ); + } + + if( shaderSwap ) + { + currentShader = nextShader; + + shader = currentShader.shaders[gl.id]; + + if(!shader) + { + shader = new PIXI.PixiShader(gl); + + shader.fragmentSrc =currentShader.fragmentSrc; + shader.uniforms =currentShader.uniforms; + shader.init(); + + currentShader.shaders[gl.id] = shader; + } + + // set shader function??? + this.renderSession.shaderManager.setShader(shader); + + if(shader.dirty)shader.syncUniforms(); + + // both thease only need to be set if they are changing.. + // set the projection + var projection = this.renderSession.projection; + gl.uniform2f(shader.projectionVector, projection.x, projection.y); + + // TODO - this is temprorary! + var offsetVector = this.renderSession.offset; + gl.uniform2f(shader.offsetVector, offsetVector.x, offsetVector.y); + + // set the pointers + } } batchSize++; @@ -7957,18 +9016,27 @@ this.currentBatchSize = 0; }; +/** +* @method renderBatch +* @param texture {Texture} +* @param size {Number} +* @param startIndex {Number} +*/ PIXI.WebGLSpriteBatch.prototype.renderBatch = function(texture, size, startIndex) { if(size === 0)return; var gl = this.gl; - // bind the current texture - gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id] || PIXI.createWebGLTexture(texture, gl)); // check if a texture is dirty.. if(texture._dirty[gl.id]) { - PIXI.updateWebGLTexture(this.currentBaseTexture, gl); + this.renderSession.renderer.updateTexture(texture); + } + else + { + // bind the current texture + gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); } // now draw those suckas! @@ -7979,19 +9047,16 @@ }; /** -* * @method stop -* */ PIXI.WebGLSpriteBatch.prototype.stop = function() { this.flush(); + this.dirty = true; }; /** -* * @method start -* */ PIXI.WebGLSpriteBatch.prototype.start = function() { @@ -7999,12 +9064,12 @@ }; /** -* Destroys the SpriteBatch +* Destroys the SpriteBatch. +* * @method destroy */ PIXI.WebGLSpriteBatch.prototype.destroy = function() { - this.vertices = null; this.indices = null; @@ -8016,7 +9081,6 @@ this.gl = null; }; - /** * @author Mat Groves * @@ -8027,27 +9091,66 @@ * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java */ +/** +* @class WebGLFastSpriteBatch +* @constructor +*/ PIXI.WebGLFastSpriteBatch = function(gl) { - - + /** + * @property vertSize + * @type Number + */ this.vertSize = 10; + + /** + * @property maxSize + * @type Number + */ this.maxSize = 6000;//Math.pow(2, 16) / this.vertSize; + + /** + * @property size + * @type Number + */ this.size = this.maxSize; //the total number of floats in our batch var numVerts = this.size * 4 * this.vertSize; + //the total number of indices in our batch var numIndices = this.maxSize * 6; - //vertex data + /** + * Vertex data + * @property vertices + * @type Float32Array + */ this.vertices = new Float32Array(numVerts); - //index data + + /** + * Index data + * @property indices + * @type Uint16Array + */ this.indices = new Uint16Array(numIndices); + /** + * @property vertexBuffer + * @type Object + */ this.vertexBuffer = null; + + /** + * @property indexBuffer + * @type Object + */ this.indexBuffer = null; + /** + * @property lastIndexCount + * @type Number + */ this.lastIndexCount = 0; for (var i=0, j=0; i < numIndices; i += 6, j += 4) @@ -8060,21 +9163,59 @@ this.indices[i + 5] = j + 3; } + /** + * @property drawing + * @type Boolean + */ this.drawing = false; + + /** + * @property currentBatchSize + * @type Number + */ this.currentBatchSize = 0; + + /** + * @property currentBaseTexture + * @type BaseTexture + */ this.currentBaseTexture = null; + /** + * @property currentBlendMode + * @type Number + */ this.currentBlendMode = 0; + + /** + * @property renderSession + * @type Object + */ this.renderSession = null; - + /** + * @property shader + * @type Object + */ this.shader = null; + /** + * @property matrix + * @type Matrix + */ this.matrix = null; this.setContext(gl); }; +PIXI.WebGLFastSpriteBatch.prototype.constructor = PIXI.WebGLFastSpriteBatch; + +/** + * Sets the WebGL Context. + * + * @method setContext + * @param gl {WebGLContext} the current WebGL drawing context + */ PIXI.WebGLFastSpriteBatch.prototype.setContext = function(gl) { this.gl = gl; @@ -8085,7 +9226,6 @@ // 65535 is max index, so 65535 / 6 = 10922. - //upload the index data gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); @@ -8094,6 +9234,11 @@ gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.DYNAMIC_DRAW); }; +/** + * @method begin + * @param spriteBatch {WebGLSpriteBatch} + * @param renderSession {Object} + */ PIXI.WebGLFastSpriteBatch.prototype.begin = function(spriteBatch, renderSession) { this.renderSession = renderSession; @@ -8104,15 +9249,20 @@ this.start(); }; +/** + * @method end + */ PIXI.WebGLFastSpriteBatch.prototype.end = function() { this.flush(); }; - +/** + * @method render + * @param spriteBatch {WebGLSpriteBatch} + */ PIXI.WebGLFastSpriteBatch.prototype.render = function(spriteBatch) { - var children = spriteBatch.children; var sprite = children[0]; @@ -8138,6 +9288,10 @@ this.flush(); }; +/** + * @method renderSprite + * @param sprite {Sprite} + */ PIXI.WebGLFastSpriteBatch.prototype.renderSprite = function(sprite) { //sprite = children[i]; @@ -8156,7 +9310,6 @@ uvs = sprite.texture._uvs; - width = sprite.texture.frame.width; height = sprite.texture.frame.height; @@ -8276,9 +9429,11 @@ } }; +/** + * @method flush + */ PIXI.WebGLFastSpriteBatch.prototype.flush = function() { - // If the batch is length 0 then return as there is nothing to draw if (this.currentBatchSize===0)return; @@ -8286,12 +9441,11 @@ // bind the current texture - if(!this.currentBaseTexture._glTextures[gl.id])PIXI.createWebGLTexture(this.currentBaseTexture, gl); + if(!this.currentBaseTexture._glTextures[gl.id])this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); // upload the verts to the buffer - if(this.currentBatchSize > ( this.size * 0.5 ) ) { @@ -8304,7 +9458,6 @@ gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, this.currentBatchSize * 6, gl.UNSIGNED_SHORT, 0); @@ -8316,11 +9469,17 @@ }; +/** + * @method stop + */ PIXI.WebGLFastSpriteBatch.prototype.stop = function() { this.flush(); }; +/** + * @method start + */ PIXI.WebGLFastSpriteBatch.prototype.start = function() { var gl = this.gl; @@ -8348,12 +9507,9 @@ gl.vertexAttribPointer(this.shader.aRotation, 1, gl.FLOAT, false, stride, 6 * 4); gl.vertexAttribPointer(this.shader.aTextureCoord, 2, gl.FLOAT, false, stride, 7 * 4); gl.vertexAttribPointer(this.shader.colorAttribute, 1, gl.FLOAT, false, stride, 9 * 4); - }; - - /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -8361,25 +9517,33 @@ /** * @class WebGLFilterManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context -* @param transparent {Boolean} Whether or not the drawing context should be transparent -* @private */ -PIXI.WebGLFilterManager = function(gl, transparent) +PIXI.WebGLFilterManager = function() { - this.transparent = transparent; - + /** + * @property filterStack + * @type Array + */ this.filterStack = []; + /** + * @property offsetX + * @type Number + */ this.offsetX = 0; - this.offsetY = 0; - this.setContext(gl); + /** + * @property offsetY + * @type Number + */ + this.offsetY = 0; }; -// API +PIXI.WebGLFilterManager.prototype.constructor = PIXI.WebGLFilterManager; + /** -* Initialises the context and the properties +* Initialises the context and the properties. +* * @method setContext * @param gl {WebGLContext} the current WebGL drawing context */ @@ -8392,7 +9556,6 @@ }; /** -* * @method begin * @param renderSession {RenderSession} * @param buffer {ArrayBuffer} @@ -8403,14 +9566,14 @@ this.defaultShader = renderSession.shaderManager.defaultShader; var projection = this.renderSession.projection; - // console.log(this.width) this.width = projection.x * 2; this.height = -projection.y * 2; this.buffer = buffer; }; /** -* Applies the filter and adds it to the current filter stack +* Applies the filter and adds it to the current filter stack. +* * @method pushFilter * @param filterBlock {Object} the filter that will be pushed to the current filter stack */ @@ -8423,7 +9586,6 @@ filterBlock._filterArea = filterBlock.target.filterArea || filterBlock.target.getBounds(); - // filter program // OPTIMISATION - the first filter is free if its a simple color change? this.filterStack.push(filterBlock); @@ -8473,9 +9635,9 @@ // update projection // now restore the regular shader.. - this.renderSession.shaderManager.setShader(this.defaultShader); - gl.uniform2f(this.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); - gl.uniform2f(this.defaultShader.offsetVector, -filterArea.x, -filterArea.y); + // this.renderSession.shaderManager.setShader(this.defaultShader); + //gl.uniform2f(this.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); + //gl.uniform2f(this.defaultShader.offsetVector, -filterArea.x, -filterArea.y); gl.colorMask(true, true, true, true); gl.clearColor(0,0,0, 0); @@ -8485,9 +9647,9 @@ }; - /** -* Removes the last filter from the filter stack and doesn't return it +* Removes the last filter from the filter stack and doesn't return it. +* * @method popFilter */ PIXI.WebGLFilterManager.prototype.popFilter = function() @@ -8570,7 +9732,6 @@ this.offsetX -= filterArea.x; this.offsetY -= filterArea.y; - var sizeX = this.width; var sizeY = this.height; @@ -8598,9 +9759,7 @@ buffer = currentFilter._glFilterTexture.frameBuffer; } - - - // TODO need toremove thease global elements.. + // TODO need to remove these global elements.. projection.x = sizeX/2; projection.y = -sizeY/2; @@ -8639,10 +9798,6 @@ gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - //console.log(this.vertexArray) - //console.log(this.uvArray) - //console.log(sizeX + " : " + sizeY) - gl.viewport(0, 0, sizeX, sizeY); // bind the buffer @@ -8658,10 +9813,10 @@ // apply! this.applyFilterPass(filter, filterArea, sizeX, sizeY); - // now restore the regular shader.. - this.renderSession.shaderManager.setShader(this.defaultShader); - gl.uniform2f(this.defaultShader.projectionVector, sizeX/2, -sizeY/2); - gl.uniform2f(this.defaultShader.offsetVector, -offsetX, -offsetY); + // now restore the regular shader.. should happen automatically now.. + // this.renderSession.shaderManager.setShader(this.defaultShader); + // gl.uniform2f(this.defaultShader.projectionVector, sizeX/2, -sizeY/2); + // gl.uniform2f(this.defaultShader.offsetVector, -offsetX, -offsetY); // return the texture to the pool this.texturePool.push(texture); @@ -8670,10 +9825,11 @@ /** -* Applies the filter to the specified area +* Applies the filter to the specified area. +* * @method applyFilterPass * @param filter {AbstractFilter} the filter that needs to be applied -* @param filterArea {texture} TODO - might need an update +* @param filterArea {Texture} TODO - might need an update * @param width {Number} the horizontal range of the filter * @param height {Number} the vertical range of the filter */ @@ -8710,7 +9866,6 @@ filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; } - // console.log(this.uvArray ) shader.syncUniforms(); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); @@ -8731,7 +9886,8 @@ }; /** -* Initialises the shader buffers +* Initialises the shader buffers. +* * @method initShaderBuffers */ PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() @@ -8744,7 +9900,6 @@ this.colorBuffer = gl.createBuffer(); this.indexBuffer = gl.createBuffer(); - // bind and upload the vertexs.. // keep a reference to the vertexFloatData.. this.vertexArray = new Float32Array([0.0, 0.0, @@ -8753,11 +9908,7 @@ 1.0, 1.0]); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.vertexArray, - gl.STATIC_DRAW); - + gl.bufferData(gl.ARRAY_BUFFER, this.vertexArray, gl.STATIC_DRAW); // bind and upload the uv buffer this.uvArray = new Float32Array([0.0, 0.0, @@ -8766,10 +9917,7 @@ 1.0, 1.0]); gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.uvArray, - gl.STATIC_DRAW); + gl.bufferData(gl.ARRAY_BUFFER, this.uvArray, gl.STATIC_DRAW); this.colorArray = new Float32Array([1.0, 0xFFFFFF, 1.0, 0xFFFFFF, @@ -8777,21 +9925,17 @@ 1.0, 0xFFFFFF]); gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.colorArray, - gl.STATIC_DRAW); + gl.bufferData(gl.ARRAY_BUFFER, this.colorArray, gl.STATIC_DRAW); // bind and upload the index gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData( - gl.ELEMENT_ARRAY_BUFFER, - new Uint16Array([0, 1, 2, 1, 3, 2]), - gl.STATIC_DRAW); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0, 1, 2, 1, 3, 2]), gl.STATIC_DRAW); + }; /** -* Destroys the filter and removes it from the filter stack +* Destroys the filter and removes it from the filter stack. +* * @method destroy */ PIXI.WebGLFilterManager.prototype.destroy = function() @@ -8828,7 +9972,6 @@ * @param width {Number} the horizontal range of the filter * @param height {Number} the vertical range of the filter * @param scaleMode {Number} Should be one of the PIXI.scaleMode consts -* @private */ PIXI.FilterTexture = function(gl, width, height, scaleMode) { @@ -8839,9 +9982,23 @@ this.gl = gl; // next time to create a frame buffer and texture + + /** + * @property frameBuffer + * @type Any + */ this.frameBuffer = gl.createFramebuffer(); + + /** + * @property texture + * @type Any + */ this.texture = gl.createTexture(); + /** + * @property scaleMode + * @type Number + */ scaleMode = scaleMode || PIXI.scaleModes.DEFAULT; gl.bindTexture(gl.TEXTURE_2D, this.texture); @@ -8849,7 +10006,7 @@ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === PIXI.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); + gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); @@ -8862,9 +10019,11 @@ this.resize(width, height); }; +PIXI.FilterTexture.prototype.constructor = PIXI.FilterTexture; /** -* Clears the filter texture +* Clears the filter texture. +* * @method clear */ PIXI.FilterTexture.prototype.clear = function() @@ -8892,15 +10051,15 @@ var gl = this.gl; gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width , height , 0, gl.RGBA, gl.UNSIGNED_BYTE, null); // update the stencil buffer width and height gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); - gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width, height); + gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width , height ); }; /** -* Destroys the filter texture +* Destroys the filter texture. +* * @method destroy */ PIXI.FilterTexture.prototype.destroy = function() @@ -8914,35 +10073,121 @@ }; /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ + /** - * A set of functions used to handle masking + * Creates a Canvas element of the given size. * - * @class CanvasMaskManager + * @class CanvasBuffer + * @constructor + * @param width {Number} the width for the newly created canvas + * @param height {Number} the height for the newly created canvas */ -PIXI.CanvasMaskManager = function() +PIXI.CanvasBuffer = function(width, height) { - + /** + * The width of the Canvas in pixels. + * + * @property width + * @type Number + */ + this.width = width; + + /** + * The height of the Canvas in pixels. + * + * @property height + * @type Number + */ + this.height = height; + + /** + * The Canvas object that belongs to this CanvasBuffer. + * + * @property canvas + * @type HTMLCanvasElement + */ + this.canvas = document.createElement("canvas"); + + /** + * A CanvasRenderingContext2D object representing a two-dimensional rendering context. + * + * @property context + * @type CanvasRenderingContext2D + */ + this.context = this.canvas.getContext("2d"); + + this.canvas.width = width; + this.canvas.height = height; +}; + +PIXI.CanvasBuffer.prototype.constructor = PIXI.CanvasBuffer; + +/** + * Clears the canvas that was created by the CanvasBuffer class. + * + * @method clear + * @private + */ +PIXI.CanvasBuffer.prototype.clear = function() +{ + this.context.clearRect(0,0, this.width, this.height); }; /** - * This method adds it to the current stack of masks + * Resizes the canvas to the specified width and height. + * + * @method resize + * @param width {Number} the new width of the canvas + * @param height {Number} the new height of the canvas + */ +PIXI.CanvasBuffer.prototype.resize = function(width, height) +{ + this.width = this.canvas.width = width; + this.height = this.canvas.height = height; +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * A set of functions used to handle masking. + * + * @class CanvasMaskManager + * @constructor + */ +PIXI.CanvasMaskManager = function() +{ +}; + +PIXI.CanvasMaskManager.prototype.constructor = PIXI.CanvasMaskManager; + +/** + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {Context2D} the 2d drawing method of the canvas + * @param maskData {Object} the maskData that will be pushed + * @param renderSession {Object} The renderSession whose context will be used for this mask manager. */ -PIXI.CanvasMaskManager.prototype.pushMask = function(maskData, context) +PIXI.CanvasMaskManager.prototype.pushMask = function(maskData, renderSession) { + var context = renderSession.context; + context.save(); var cacheAlpha = maskData.alpha; var transform = maskData.worldTransform; - context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx, transform.ty); + var resolution = renderSession.resolution; + + context.setTransform(transform.a * resolution, + transform.b * resolution, + transform.c * resolution, + transform.d * resolution, + transform.tx * resolution, + transform.ty * resolution); PIXI.CanvasGraphics.renderGraphicsMask(maskData, context); @@ -8952,20 +10197,18 @@ }; /** - * Restores the current drawing context to the state it was before the mask was applied + * Restores the current drawing context to the state it was before the mask was applied. * * @method popMask - * @param context {Context2D} the 2d drawing method of the canvas + * @param renderSession {Object} The renderSession whose context will be used for this mask manager. */ -PIXI.CanvasMaskManager.prototype.popMask = function(context) +PIXI.CanvasMaskManager.prototype.popMask = function(renderSession) { - context.restore(); + renderSession.context.restore(); }; /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -8975,23 +10218,18 @@ */ PIXI.CanvasTinter = function() { - /// this.textureCach }; -//PIXI.CanvasTinter.cachTint = true; - - /** - * Basically this method just needs a sprite and a color and tints the sprite - * with the given color + * Basically this method just needs a sprite and a color and tints the sprite with the given color. * * @method getTintedTexture * @param sprite {Sprite} the sprite to tint * @param color {Number} the color to use to tint the sprite with + * @return {HTMLCanvasElement} The tinted canvas */ PIXI.CanvasTinter.getTintedTexture = function(sprite, color) { - var texture = sprite.texture; color = PIXI.CanvasTinter.roundColor(color); @@ -9006,8 +10244,6 @@ var canvas = PIXI.CanvasTinter.canvas || document.createElement("canvas"); //PIXI.CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); - - PIXI.CanvasTinter.tintMethod(texture, color, canvas); if(PIXI.CanvasTinter.convertTintToImage) @@ -9020,20 +10256,19 @@ } else { - texture.tintCache[stringColor] = canvas; // if we are not converting the texture to an image then we need to lose the reference to the canvas PIXI.CanvasTinter.canvas = null; - } return canvas; }; /** - * Tint a texture using the "multiply" operation + * Tint a texture using the "multiply" operation. + * * @method tintWithMultiply - * @param texture {texture} the texture to tint + * @param texture {Texture} the texture to tint * @param color {Number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ @@ -9041,44 +10276,45 @@ { var context = canvas.getContext( "2d" ); - var frame = texture.frame; + var crop = texture.crop; - canvas.width = frame.width; - canvas.height = frame.height; + canvas.width = crop.width; + canvas.height = crop.height; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); - context.fillRect(0, 0, frame.width, frame.height); + context.fillRect(0, 0, crop.width, crop.height); context.globalCompositeOperation = "multiply"; context.drawImage(texture.baseTexture.source, - frame.x, - frame.y, - frame.width, - frame.height, + crop.x, + crop.y, + crop.width, + crop.height, 0, 0, - frame.width, - frame.height); + crop.width, + crop.height); context.globalCompositeOperation = "destination-atop"; - + context.drawImage(texture.baseTexture.source, - frame.x, - frame.y, - frame.width, - frame.height, + crop.x, + crop.y, + crop.width, + crop.height, 0, 0, - frame.width, - frame.height); + crop.width, + crop.height); }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay - * @param texture {texture} the texture to tint + * @param texture {Texture} the texture to tint * @param color {Number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ @@ -9086,37 +10322,34 @@ { var context = canvas.getContext( "2d" ); - var frame = texture.frame; + var crop = texture.crop; - canvas.width = frame.width; - canvas.height = frame.height; - - + canvas.width = crop.width; + canvas.height = crop.height; context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); - context.fillRect(0, 0, frame.width, frame.height); + context.fillRect(0, 0, crop.width, crop.height); context.globalCompositeOperation = "destination-atop"; context.drawImage(texture.baseTexture.source, - frame.x, - frame.y, - frame.width, - frame.height, + crop.x, + crop.y, + crop.width, + crop.height, 0, 0, - frame.width, - frame.height); - + crop.width, + crop.height); //context.globalCompositeOperation = "copy"; - }; /** - * Tint a texture pixel per pixel + * Tint a texture pixel per pixel. + * * @method tintPerPixel - * @param texture {texture} the texture to tint + * @param texture {Texture} the texture to tint * @param color {Number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ @@ -9124,26 +10357,26 @@ { var context = canvas.getContext( "2d" ); - var frame = texture.frame; + var crop = texture.crop; - canvas.width = frame.width; - canvas.height = frame.height; + canvas.width = crop.width; + canvas.height = crop.height; context.globalCompositeOperation = "copy"; context.drawImage(texture.baseTexture.source, - frame.x, - frame.y, - frame.width, - frame.height, + crop.x, + crop.y, + crop.width, + crop.height, 0, 0, - frame.width, - frame.height); + crop.width, + crop.height); var rgbValues = PIXI.hex2rgb(color); var r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - var pixelData = context.getImageData(0, 0, frame.width, frame.height); + var pixelData = context.getImageData(0, 0, crop.width, crop.height); var pixels = pixelData.data; @@ -9158,7 +10391,8 @@ }; /** - * Rounds the specified color according to the PIXI.CanvasTinter.cacheStepsPerColorChannel + * Rounds the specified color according to the PIXI.CanvasTinter.cacheStepsPerColorChannel. + * * @method roundColor * @param color {number} the color to round, should be a hex color */ @@ -9176,16 +10410,15 @@ }; /** - * - * Number of steps which will be used as a cap when rounding colors + * Number of steps which will be used as a cap when rounding colors. * * @property cacheStepsPerColorChannel * @type Number */ PIXI.CanvasTinter.cacheStepsPerColorChannel = 8; + /** - * - * Number of steps which will be used as a cap when rounding colors + * Tint cache boolean flag. * * @property convertTintToImage * @type Boolean @@ -9193,42 +10426,75 @@ PIXI.CanvasTinter.convertTintToImage = false; /** - * Whether or not the Canvas BlendModes are supported, consequently the ability to tint using the multiply method + * Whether or not the Canvas BlendModes are supported, consequently the ability to tint using the multiply method. * * @property canUseMultiply * @type Boolean */ PIXI.CanvasTinter.canUseMultiply = PIXI.canUseNewCanvasBlendModes(); +/** + * The tinting method that will be used. + * + * @method tintMethod + */ PIXI.CanvasTinter.tintMethod = PIXI.CanvasTinter.canUseMultiply ? PIXI.CanvasTinter.tintWithMultiply : PIXI.CanvasTinter.tintWithPerPixel; - /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL. - * Dont forget to add the view to your DOM or you will not see anything :) + * The CanvasRenderer draws the Stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL. + * Don't forget to add the CanvasRenderer.view to your DOM or you will not see anything :) * * @class CanvasRenderer * @constructor - * @param width=800 {Number} the width of the canvas view - * @param height=600 {Number} the height of the canvas view - * @param [view] {HTMLCanvasElement} the canvas to use as a view, optional - * @param [transparent=false] {Boolean} the transparency of the render view, default false + * @param [width=800] {Number} the width of the canvas view + * @param [height=600] {Number} the height of the canvas view + * @param [options] {Object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {Boolean} If the render view is transparent, default false + * @param [options.resolution=1] {Number} the resolution of the renderer retina would be 2 + * @param [options.clearBeforeRender=true] {Boolean} This sets if the CanvasRenderer will clear the canvas or not before the new render pass. */ -PIXI.CanvasRenderer = function(width, height, view, transparent) +PIXI.CanvasRenderer = function(width, height, options) { + if(options) + { + for (var i in PIXI.defaultRenderOptions) + { + if (typeof options[i] === "undefined") options[i] = PIXI.defaultRenderOptions[i]; + } + } + else + { + options = PIXI.defaultRenderOptions; + } + if(!PIXI.defaultRenderer) { PIXI.sayHello("Canvas"); PIXI.defaultRenderer = this; } + /** + * The renderer type. + * + * @property type + * @type Number + */ this.type = PIXI.CANVAS_RENDERER; /** + * The resolution of the canvas. + * + * @property resolution + * @type Number + */ + this.resolution = options.resolution; + + /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. * If the Stage is NOT transparent Pixi will use a canvas sized fillRect operation every frame to set the canvas background color. * If the Stage is transparent Pixi will use clearRect to clear the canvas every frame. @@ -9238,7 +10504,7 @@ * @type Boolean * @default */ - this.clearBeforeRender = true; + this.clearBeforeRender = options.clearBeforeRender; /** * Whether the render view is transparent @@ -9246,8 +10512,220 @@ * @property transparent * @type Boolean */ - this.transparent = !!transparent; + this.transparent = options.transparent; + + /** + * The width of the canvas view + * + * @property width + * @type Number + * @default 800 + */ + this.width = width || 800; + /** + * The height of the canvas view + * + * @property height + * @type Number + * @default 600 + */ + this.height = height || 600; + + this.width *= this.resolution; + this.height *= this.resolution; + + /** + * The canvas element that everything is drawn to. + * + * @property view + * @type HTMLCanvasElement + */ + this.view = options.view || document.createElement( "canvas" ); + + /** + * The canvas 2d context that everything is drawn with + * @property context + * @type CanvasRenderingContext2D + */ + this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ + this.refresh = true; + + this.view.width = this.width * this.resolution; + this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ + this.count = 0; + + /** + * Instance of a PIXI.CanvasMaskManager, handles masking when using the canvas renderer + * @property CanvasMaskManager + * @type CanvasMaskManager + */ + this.maskManager = new PIXI.CanvasMaskManager(); + + /** + * The render session is just a bunch of parameter used for rendering + * @property renderSession + * @type Object + */ + this.renderSession = { + context: this.context, + maskManager: this.maskManager, + scaleMode: null, + smoothProperty: null, + /** + * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * Handy for crisp pixel art and speed on legacy devices. + * + */ + roundPixels: false + }; + + this.mapBlendModes(); + + this.resize(width, height); + + if("imageSmoothingEnabled" in this.context) + this.renderSession.smoothProperty = "imageSmoothingEnabled"; + else if("webkitImageSmoothingEnabled" in this.context) + this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + else if("mozImageSmoothingEnabled" in this.context) + this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + else if("oImageSmoothingEnabled" in this.context) + this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + else if ("msImageSmoothingEnabled" in this.context) + this.renderSession.smoothProperty = "msImageSmoothingEnabled"; +}; + +// constructor +PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; + +/** + * Renders the Stage to this canvas view + * + * @method render + * @param stage {Stage} the Stage element to be rendered + */ +PIXI.CanvasRenderer.prototype.render = function(stage) +{ + stage.updateTransform(); + + this.context.setTransform(1,0,0,1,0,0); + + this.context.globalAlpha = 1; + + this.renderSession.currentBlendMode = PIXI.blendModes.NORMAL; + this.context.globalCompositeOperation = PIXI.blendModesCanvas[PIXI.blendModes.NORMAL]; + + if (navigator.isCocoonJS && this.view.screencanvas) { + this.context.fillStyle = "black"; + this.context.clear(); + } + + if (this.clearBeforeRender) + { + if (this.transparent) + { + this.context.clearRect(0, 0, this.width, this.height); + } + else + { + this.context.fillStyle = stage.backgroundColorString; + this.context.fillRect(0, 0, this.width , this.height); + } + } + + this.renderDisplayObject(stage); + + // run interaction! + if(stage.interactive) + { + //need to add some events! + if(!stage._interactiveEventsAdded) + { + stage._interactiveEventsAdded = true; + stage.interactionManager.setTarget(this); + } + } +}; + +/** + * Removes everything from the renderer and optionally removes the Canvas DOM element. + * + * @method destroy + * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. + */ +PIXI.CanvasRenderer.prototype.destroy = function(removeView) +{ + if (typeof removeView === "undefined") { removeView = true; } + + if (removeView && this.view.parent) + { + this.view.parent.removeChild(this.view); + } + + this.view = null; + this.context = null; + this.maskManager = null; + this.renderSession = null; + +}; + +/** + * Resizes the canvas view to the specified width and height + * + * @method resize + * @param width {Number} the new width of the canvas view + * @param height {Number} the new height of the canvas view + */ +PIXI.CanvasRenderer.prototype.resize = function(width, height) +{ + this.width = width * this.resolution; + this.height = height * this.resolution; + + this.view.width = this.width; + this.view.height = this.height; + + this.view.style.width = this.width / this.resolution + "px"; + this.view.style.height = this.height / this.resolution + "px"; +}; + +/** + * Renders a display object + * + * @method renderDisplayObject + * @param displayObject {DisplayObject} The displayObject to render + * @param context {CanvasRenderingContext2D} the context 2d method of the canvas + * @private + */ +PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject, context) +{ + this.renderSession.context = context || this.context; + this.renderSession.resolution = this.resolution; + displayObject._renderCanvas(this.renderSession); +}; + +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ +PIXI.CanvasRenderer.prototype.mapBlendModes = function() +{ if(!PIXI.blendModesCanvas) { PIXI.blendModesCanvas = []; @@ -9294,335 +10772,30 @@ PIXI.blendModesCanvas[PIXI.blendModes.LUMINOSITY] = "source-over"; } } - - /** - * The width of the canvas view - * - * @property width - * @type Number - * @default 800 - */ - this.width = width || 800; - - /** - * The height of the canvas view - * - * @property height - * @type Number - * @default 600 - */ - this.height = height || 600; - - /** - * The canvas element that everything is drawn to - * - * @property view - * @type HTMLCanvasElement - */ - this.view = view || document.createElement( "canvas" ); - - /** - * The canvas 2d context that everything is drawn with - * @property context - * @type HTMLCanvasElement 2d Context - */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); - - this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; - - this.view.width = this.width; - this.view.height = this.height; - this.count = 0; - - /** - * Instance of a PIXI.CanvasMaskManager, handles masking when using the canvas renderer - * @property CanvasMaskManager - * @type CanvasMaskManager - */ - this.maskManager = new PIXI.CanvasMaskManager(); - - /** - * The render session is just a bunch of parameter used for rendering - * @property renderSession - * @type Object - */ - this.renderSession = { - context: this.context, - maskManager: this.maskManager, - scaleMode: null, - smoothProperty: null, - - /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. - * Handy for crisp pixel art and speed on legacy devices. - * - */ - roundPixels: false - }; - - if("imageSmoothingEnabled" in this.context) - this.renderSession.smoothProperty = "imageSmoothingEnabled"; - else if("webkitImageSmoothingEnabled" in this.context) - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; - else if("mozImageSmoothingEnabled" in this.context) - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; - else if("oImageSmoothingEnabled" in this.context) - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; }; -// constructor -PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; - -/** - * Renders the stage to its canvas view - * - * @method render - * @param stage {Stage} the Stage element to be rendered - */ -PIXI.CanvasRenderer.prototype.render = function(stage) -{ - // update textures if need be - PIXI.texturesToUpdate.length = 0; - PIXI.texturesToDestroy.length = 0; - - stage.updateTransform(); - - this.context.setTransform(1,0,0,1,0,0); - this.context.globalAlpha = 1; - - if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; - this.context.clear(); - } - - if (!this.transparent && this.clearBeforeRender) - { - this.context.fillStyle = stage.backgroundColorString; - this.context.fillRect(0, 0, this.width, this.height); - } - else if (this.transparent && this.clearBeforeRender) - { - this.context.clearRect(0, 0, this.width, this.height); - } - - this.renderDisplayObject(stage); - - // run interaction! - if(stage.interactive) - { - //need to add some events! - if(!stage._interactiveEventsAdded) - { - stage._interactiveEventsAdded = true; - stage.interactionManager.setTarget(this); - } - } - - // remove frame updates.. - if(PIXI.Texture.frameUpdates.length > 0) - { - PIXI.Texture.frameUpdates.length = 0; - } -}; - -/** - * Resizes the canvas view to the specified width and height - * - * @method resize - * @param width {Number} the new width of the canvas view - * @param height {Number} the new height of the canvas view - */ -PIXI.CanvasRenderer.prototype.resize = function(width, height) -{ - this.width = width; - this.height = height; - - this.view.width = width; - this.view.height = height; -}; - -/** - * Renders a display object - * - * @method renderDisplayObject - * @param displayObject {DisplayObject} The displayObject to render - * @param context {Context2D} the context 2d method of the canvas - * @private - */ -PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject, context) -{ - // no longer recursive! - //var transform; - //var context = this.context; - - this.renderSession.context = context || this.context; - displayObject._renderCanvas(this.renderSession); -}; - -/** - * Renders a flat strip - * - * @method renderStripFlat - * @param strip {Strip} The Strip to render - * @private - */ -PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip) -{ - var context = this.context; - var verticies = strip.verticies; - - var length = verticies.length/2; - this.count++; - - context.beginPath(); - for (var i=1; i < length-2; i++) - { - // draw some triangles! - var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - - context.moveTo(x0, y0); - context.lineTo(x1, y1); - context.lineTo(x2, y2); - } - - context.fillStyle = "#FF0000"; - context.fill(); - context.closePath(); -}; - -/** - * Renders a strip - * - * @method renderStrip - * @param strip {Strip} The Strip to render - * @private - */ -PIXI.CanvasRenderer.prototype.renderStrip = function(strip) -{ - var context = this.context; - - // draw triangles!! - var verticies = strip.verticies; - var uvs = strip.uvs; - - var length = verticies.length/2; - this.count++; - - for (var i = 1; i < length-2; i++) - { - // draw some triangles! - var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - - var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; - var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; - - context.save(); - context.beginPath(); - context.moveTo(x0, y0); - context.lineTo(x1, y1); - context.lineTo(x2, y2); - context.closePath(); - - context.clip(); - - // Compute matrix transform - var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2; - var deltaA = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; - var deltaB = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; - var deltaC = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; - var deltaD = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; - var deltaE = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; - var deltaF = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; - - context.transform(deltaA / delta, deltaD / delta, - deltaB / delta, deltaE / delta, - deltaC / delta, deltaF / delta); - - context.drawImage(strip.texture.baseTexture.source, 0, 0); - context.restore(); - } -}; - -/** - * Creates a Canvas element of the given size - * - * @method CanvasBuffer - * @param width {Number} the width for the newly created canvas - * @param height {Number} the height for the newly created canvas - * @static - * @private - */ -PIXI.CanvasBuffer = function(width, height) -{ - this.width = width; - this.height = height; - - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); - - this.canvas.width = width; - this.canvas.height = height; -}; - -/** - * Clears the canvas that was created by the CanvasBuffer class - * - * @method clear - * @private - */ -PIXI.CanvasBuffer.prototype.clear = function() -{ - this.context.clearRect(0,0, this.width, this.height); -}; - -/** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height - * - * @method resize - * @param width {Number} the new width of the canvas - * @param height {Number} the new height of the canvas - * @private - */ - -PIXI.CanvasBuffer.prototype.resize = function(width, height) -{ - this.width = this.canvas.width = width; - this.height = this.canvas.height = height; -}; - - /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * A set of functions used by the canvas renderer to draw the primitive graphics data + * A set of functions used by the canvas renderer to draw the primitive graphics data. * * @class CanvasGraphics + * @static */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * - * @static - * @private * @method renderGraphics + * @static * @param graphics {Graphics} the actual graphics object to render - * @param context {Context2D} the 2d drawing method of the canvas + * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas */ PIXI.CanvasGraphics.renderGraphics = function(graphics, context) { @@ -9632,7 +10805,7 @@ for (var i = 0; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; - var points = data.points; + var shape = data.shape; context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); @@ -9642,6 +10815,8 @@ { context.beginPath(); + var points = shape.points; + context.moveTo(points[0], points[1]); for (var j=1; j < points.length/2; j++) @@ -9649,6 +10824,11 @@ context.lineTo(points[j * 2], points[j * 2 + 1]); } + if(shape.closed) + { + context.lineTo(points[0], points[1]); + } + // if the first and last point are the same close the path - much neater :) if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { @@ -9674,21 +10854,20 @@ { context.globalAlpha = data.fillAlpha * worldAlpha; context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); - context.fillRect(points[0], points[1], points[2], points[3]); + context.fillRect(shape.x, shape.y, shape.width, shape.height); } if(data.lineWidth) { context.globalAlpha = data.lineAlpha * worldAlpha; - context.strokeRect(points[0], points[1], points[2], points[3]); + context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); - context.arc(points[0], points[1], points[2],0,2*Math.PI); + context.arc(shape.x, shape.y, shape.radius,0,2*Math.PI); context.closePath(); if(data.fill) @@ -9705,16 +10884,13 @@ } else if(data.type === PIXI.Graphics.ELIP) { - // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - var ellipseData = data.points; + var w = shape.width * 2; + var h = shape.height * 2; - var w = ellipseData[2] * 2; - var h = ellipseData[3] * 2; - - var x = ellipseData[0] - w/2; - var y = ellipseData[1] - h/2; + var x = shape.x - w/2; + var y = shape.y - h/2; context.beginPath(); @@ -9748,11 +10924,12 @@ } else if (data.type === PIXI.Graphics.RREC) { - var rx = points[0]; - var ry = points[1]; - var width = points[2]; - var height = points[3]; - var radius = points[4]; + var pts = shape.points; + var rx = pts[0]; + var ry = pts[1]; + var width = pts[2]; + var height = pts[3]; + var radius = pts[4]; var maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; @@ -9792,7 +10969,7 @@ * @private * @method renderGraphicsMask * @param graphics {Graphics} the graphics which will be used as a mask - * @param context {Context2D} the context 2d method of the canvas + * @param context {CanvasRenderingContext2D} the context 2d method of the canvas */ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context) { @@ -9809,11 +10986,14 @@ for (var i = 0; i < 1; i++) { var data = graphics.graphicsData[i]; - var points = data.points; + var shape = data.shape; if(data.type === PIXI.Graphics.POLY) { context.beginPath(); + + var points = shape.points; + context.moveTo(points[0], points[1]); for (var j=1; j < points.length/2; j++) @@ -9831,27 +11011,26 @@ else if(data.type === PIXI.Graphics.RECT) { context.beginPath(); - context.rect(points[0], points[1], points[2], points[3]); + context.rect(shape.x, shape.y, shape.width, shape.height); context.closePath(); } else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); - context.arc(points[0], points[1], points[2],0,2*Math.PI); + context.arc(shape.x, shape.y, shape.radius,0,2*Math.PI); context.closePath(); } else if(data.type === PIXI.Graphics.ELIP) { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - var ellipseData = data.points; - var w = ellipseData[2] * 2; - var h = ellipseData[3] * 2; + var w = shape.width * 2; + var h = shape.height * 2; - var x = ellipseData[0] - w/2; - var y = ellipseData[1] - h/2; + var x = shape.x - w/2; + var y = shape.y - h/2; context.beginPath(); @@ -9872,11 +11051,13 @@ } else if (data.type === PIXI.Graphics.RREC) { - var rx = points[0]; - var ry = points[1]; - var width = points[2]; - var height = points[3]; - var radius = points[4]; + + var pts = shape.points; + var rx = pts[0]; + var ry = pts[1]; + var width = pts[2]; + var height = pts[3]; + var radius = pts[4]; var maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; @@ -9900,12 +11081,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * The Graphics class contains a set of methods that you can use to create primitive shapes and lines. - * It is important to know that with the webGL renderer only simple polygons can be filled at this stage - * Complex polygons will not be filled. Heres an example of a complex polygon: http://www.goodboydigital.com/wp-content/uploads/2013/06/complexPolygon.png - * + * The Graphics class contains methods used to draw primitive shapes such as lines, circles and rectangles to the display, and color and fill them. + * * @class Graphics * @extends DisplayObjectContainer * @constructor @@ -9917,7 +11095,7 @@ this.renderable = true; /** - * The alpha of the fill of this graphics object + * The alpha value used when filling the Graphics object. * * @property fillAlpha * @type Number @@ -9925,7 +11103,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -9933,12 +11111,13 @@ this.lineWidth = 0; /** - * The color of any lines drawn + * The color of any lines drawn. * * @property lineColor * @type String + * @default 0 */ - this.lineColor = "black"; + this.lineColor = 0; /** * Graphics data @@ -9949,18 +11128,17 @@ */ this.graphicsData = []; - /** - * The tint applied to the graphic shape. This is a hex value + * The tint applied to the graphic shape. This is a hex value. Apply a value of 0xFFFFFF to reset the tint. * * @property tint * @type Number * @default 0xFFFFFF */ - this.tint = 0xFFFFFF;// * Math.random(); + this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the graphic shape + * The blend mode to be applied to the graphic shape. Apply a value of PIXI.blendModes.NORMAL to reset the blend mode. * * @property blendMode * @type Number @@ -9975,10 +11153,10 @@ * @type Object * @private */ - this.currentPath = {points:[]}; - + this.currentPath = null; + /** - * Array containing some WebGL-related properties used by the WebGL renderer + * Array containing some WebGL-related properties used by the WebGL renderer. * * @property _webGL * @type Array @@ -9987,35 +11165,48 @@ this._webGL = []; /** - * Whether this shape is being used as a mask + * Whether this shape is being used as a mask. * * @property isMask - * @type isMask + * @type Boolean */ this.isMask = false; /** - * The bounds of the graphic shape as rectangle object - * - * @property bounds - * @type Rectangle - */ - this.bounds = null; - - /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number */ - this.boundsPadding = 10; + this.boundsPadding = 0; /** - * Used to detect if the graphics object has changed if this is set to true then the graphics object will be recalculated + * Used to detect if the graphics object has changed. If this is set to true then the graphics object will be recalculated. * - * @type {Boolean} + * @property dirty + * @type Boolean + * @private */ this.dirty = true; + + /** + * Used to detect if the webgl graphics object has changed. If this is set to true then the graphics object will be recalculated. + * + * @property webGLDirty + * @type Boolean + * @private + */ + this.webGLDirty = false; + + /** + * Used to detect if the cached sprite object needs to be updated. + * + * @property cachedSpriteDirty + * @type Boolean + * @private + */ + this.cachedSpriteDirty = false; + }; // constructor @@ -10023,14 +11214,14 @@ PIXI.Graphics.prototype.constructor = PIXI.Graphics; /** - * If cacheAsBitmap is true the graphics object will then be rendered as if it was a sprite. - * This is useful if your graphics element does not change often as it will speed up the rendering of the object - * It is also usful as the graphics object will always be antialiased because it will be rendered using canvas - * Not recommended if you are constanly redrawing the graphics element. + * When cacheAsBitmap is set to true the graphics object will be rendered as if it was a sprite. + * This is useful if your graphics element does not change often, as it will speed up the rendering of the object in exchange for taking up texture memory. + * It is also useful if you need the graphics object to be anti-aliased, because it will be rendered using canvas. + * This is not recommended if you are constantly redrawing the graphics element. * * @property cacheAsBitmap - * @default false * @type Boolean + * @default false * @private */ Object.defineProperty(PIXI.Graphics.prototype, "cacheAsBitmap", { @@ -10042,6 +11233,7 @@ if(this._cacheAsBitmap) { + this._generateCachedSprite(); } else @@ -10053,87 +11245,98 @@ } }); - /** * Specifies the line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method. * * @method lineStyle - * @param lineWidth {Number} width of the line to draw, will update the object's stored style - * @param color {Number} color of the line to draw, will update the object's stored style - * @param alpha {Number} alpha of the line to draw, will update the object's stored style + * @param lineWidth {Number} width of the line to draw, will update the objects stored style + * @param color {Number} color of the line to draw, will update the objects stored style + * @param alpha {Number} alpha of the line to draw, will update the objects stored style + * @return {Graphics} */ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha) { - if (!this.currentPath.points.length) this.graphicsData.pop(); - this.lineWidth = lineWidth || 0; this.lineColor = color || 0; this.lineAlpha = (arguments.length < 3) ? 1 : alpha; - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; + if(this.currentPath) + { + if(this.currentPath.shape.points.length) + { + // halfway through a line? start a new one! + this.drawShape( new PIXI.Polygon( this.currentPath.shape.points.slice(-2) )); + return this; + } - this.graphicsData.push(this.currentPath); + // otherwise its empty so lets just set the line properties + this.currentPath.lineWidth = this.lineWidth; + this.currentPath.lineColor = this.lineColor; + this.currentPath.lineAlpha = this.lineAlpha; + + } return this; }; /** - * Moves the current drawing position to (x, y). + * Moves the current drawing position to x, y. * * @method moveTo * @param x {Number} the X coordinate to move to * @param y {Number} the Y coordinate to move to - */ + * @return {Graphics} + */ PIXI.Graphics.prototype.moveTo = function(x, y) { - if (!this.currentPath.points.length) this.graphicsData.pop(); - - this.currentPath = this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; - - this.currentPath.points.push(x, y); - - this.graphicsData.push(this.currentPath); + this.drawShape(new PIXI.Polygon([x,y])); return this; }; /** * Draws a line using the current line style from the current drawing position to (x, y); - * the current drawing position is then set to (x, y). + * The current drawing position is then set to (x, y). * * @method lineTo * @param x {Number} the X coordinate to draw to * @param y {Number} the Y coordinate to draw to + * @return {Graphics} */ PIXI.Graphics.prototype.lineTo = function(x, y) { - this.currentPath.points.push(x, y); + this.currentPath.shape.points.push(x, y); this.dirty = true; return this; }; /** - * Calculate the points for a quadratic bezier curve. - * Based on : https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c + * Calculate the points for a quadratic bezier curve and then draws it. + * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c * * @method quadraticCurveTo - * @param {number} cpX Control point x - * @param {number} cpY Control point y - * @param {number} toX Destination point x - * @param {number} toY Destination point y - * @return {PIXI.Graphics} + * @param cpX {Number} Control point x + * @param cpY {Number} Control point y + * @param toX {Number} Destination point x + * @param toY {Number} Destination point y + * @return {Graphics} */ PIXI.Graphics.prototype.quadraticCurveTo = function(cpX, cpY, toX, toY) { - if( this.currentPath.points.length === 0)this.moveTo(0,0); + if( this.currentPath ) + { + if(this.currentPath.shape.points.length === 0)this.currentPath.shape.points = [0,0]; + } + else + { + this.moveTo(0,0); + } var xa, ya, n = 20, - points = this.currentPath.points; + points = this.currentPath.shape.points; if(points.length === 0)this.moveTo(0, 0); @@ -10159,20 +11362,27 @@ }; /** - * Calculate the points for a bezier curve. + * Calculate the points for a bezier curve and then draws it. * * @method bezierCurveTo - * @param {number} cpX Control point x - * @param {number} cpY Control point y - * @param {number} cpX2 Second Control point x - * @param {number} cpY2 Second Control point y - * @param {number} toX Destination point x - * @param {number} toY Destination point y - * @return {PIXI.Graphics} + * @param cpX {Number} Control point x + * @param cpY {Number} Control point y + * @param cpX2 {Number} Second Control point x + * @param cpY2 {Number} Second Control point y + * @param toX {Number} Destination point x + * @param toY {Number} Destination point y + * @return {Graphics} */ PIXI.Graphics.prototype.bezierCurveTo = function(cpX, cpY, cpX2, cpY2, toX, toY) { - if( this.currentPath.points.length === 0)this.moveTo(0,0); + if( this.currentPath ) + { + if(this.currentPath.shape.points.length === 0)this.currentPath.shape.points = [0,0]; + } + else + { + this.moveTo(0,0); + } var n = 20, dt, @@ -10180,14 +11390,14 @@ dt3, t2, t3, - points = this.currentPath.points; + points = this.currentPath.shape.points; var fromX = points[points.length-2]; var fromY = points[points.length-1]; var j = 0; - for (var i=1; i b2 * a1); } @@ -10270,28 +11484,28 @@ }; /** - * The arc() method creates an arc/curve (used to create circles, or parts of circles). + * The arc method creates an arc/curve (used to create circles, or parts of circles). * * @method arc - * @param {number} cx The x-coordinate of the center of the circle - * @param {number} cy The y-coordinate of the center of the circle - * @param {number} radius The radius of the circle - * @param {number} startAngle The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle) - * @param {number} endAngle The ending angle, in radians - * @param {number} anticlockwise Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. - * @return {PIXI.Graphics} + * @param cx {Number} The x-coordinate of the center of the circle + * @param cy {Number} The y-coordinate of the center of the circle + * @param radius {Number} The radius of the circle + * @param startAngle {Number} The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle) + * @param endAngle {Number} The ending angle, in radians + * @param anticlockwise {Boolean} Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. + * @return {Graphics} */ PIXI.Graphics.prototype.arc = function(cx, cy, radius, startAngle, endAngle, anticlockwise) { var startX = cx + Math.cos(startAngle) * radius; var startY = cy + Math.sin(startAngle) * radius; - var points = this.currentPath.points; + var points = this.currentPath.shape.points; if(points.length !== 0 && points[points.length-2] !== startX || points[points.length-1] !== startY) { this.moveTo(startX, startY); - points = this.currentPath.points; + points = this.currentPath.shape.points; } if (startAngle === endAngle)return this; @@ -10340,43 +11554,29 @@ }; /** - * Draws a line using the current line style from the current drawing position to (x, y); - * the current drawing position is then set to (x, y). - * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to - */ -PIXI.Graphics.prototype.drawPath = function(path) -{ - if (!this.currentPath.points.length) this.graphicsData.pop(); - - this.currentPath = this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; - - this.graphicsData.push(this.currentPath); - - this.currentPath.points = this.currentPath.points.concat(path); - this.dirty = true; - - return this; -}; - -/** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * * @method beginFill * @param color {Number} the color of the fill * @param alpha {Number} the alpha of the fill + * @return {Graphics} */ PIXI.Graphics.prototype.beginFill = function(color, alpha) { - this.filling = true; this.fillColor = color || 0; - this.fillAlpha = (arguments.length < 2) ? 1 : alpha; + this.fillAlpha = (alpha === undefined) ? 1 : alpha; + if(this.currentPath) + { + if(this.currentPath.shape.points.length <= 2) + { + this.currentPath.fill = this.filling; + this.currentPath.fillColor = this.fillColor; + this.currentPath.fillAlpha = this.fillAlpha; + } + } return this; }; @@ -10384,6 +11584,7 @@ * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method. * * @method endFill + * @return {Graphics} */ PIXI.Graphics.prototype.endFill = function() { @@ -10401,17 +11602,11 @@ * @param y {Number} The Y coord of the top-left of the rectangle * @param width {Number} The width of the rectangle * @param height {Number} The height of the rectangle + * @return {Graphics} */ PIXI.Graphics.prototype.drawRect = function( x, y, width, height ) { - if (!this.currentPath.points.length) this.graphicsData.pop(); - - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, - points:[x, y, width, height], type:PIXI.Graphics.RECT}; - - this.graphicsData.push(this.currentPath); - this.dirty = true; + this.drawShape(new PIXI.Rectangle(x,y, width, height)); return this; }; @@ -10427,14 +11622,7 @@ */ PIXI.Graphics.prototype.drawRoundedRect = function( x, y, width, height, radius ) { - if (!this.currentPath.points.length) this.graphicsData.pop(); - - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, - points:[x, y, width, height, radius], type:PIXI.Graphics.RREC}; - - this.graphicsData.push(this.currentPath); - this.dirty = true; + this.drawShape({ points:[x, y, width, height, radius], type:PIXI.Graphics.RREC }); return this; }; @@ -10446,18 +11634,11 @@ * @param x {Number} The X coordinate of the center of the circle * @param y {Number} The Y coordinate of the center of the circle * @param radius {Number} The radius of the circle + * @return {Graphics} */ PIXI.Graphics.prototype.drawCircle = function(x, y, radius) { - - if (!this.currentPath.points.length) this.graphicsData.pop(); - - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, - points:[x, y, radius, radius], type:PIXI.Graphics.CIRC}; - - this.graphicsData.push(this.currentPath); - this.dirty = true; + this.drawShape(new PIXI.Circle(x,y, radius)); return this; }; @@ -10470,19 +11651,26 @@ * @param y {Number} The Y coordinate of the center of the ellipse * @param width {Number} The half width of the ellipse * @param height {Number} The half height of the ellipse + * @return {Graphics} */ PIXI.Graphics.prototype.drawEllipse = function(x, y, width, height) { + this.drawShape(new PIXI.Ellipse(x, y, width, height)); - if (!this.currentPath.points.length) this.graphicsData.pop(); + return this; +}; - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, - points:[x, y, width, height], type:PIXI.Graphics.ELIP}; - - this.graphicsData.push(this.currentPath); - this.dirty = true; - +/** + * Draws a polygon using the given path. + * + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} + */ +PIXI.Graphics.prototype.drawPolygon = function(path) +{ + if(!(path instanceof Array))path = Array.prototype.slice.call(arguments); + this.drawShape(new PIXI.Polygon(path)); return this; }; @@ -10490,6 +11678,7 @@ * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. * * @method clear + * @return {Graphics} */ PIXI.Graphics.prototype.clear = function() { @@ -10500,8 +11689,6 @@ this.clearDirty = true; this.graphicsData = []; - this.bounds = null; //new PIXI.Rectangle(); - return this; }; @@ -10510,14 +11697,22 @@ * This can be quite useful if your geometry is complicated and needs to be reused multiple times. * * @method generateTexture + * @param resolution {Number} The resolution of the texture being generated + * @param scaleMode {Number} Should be one of the PIXI.scaleMode consts * @return {Texture} a texture of the graphics object */ -PIXI.Graphics.prototype.generateTexture = function() +PIXI.Graphics.prototype.generateTexture = function(resolution, scaleMode) { - var bounds = this.getBounds(); + resolution = resolution || 1; - var canvasBuffer = new PIXI.CanvasBuffer(bounds.width, bounds.height); - var texture = PIXI.Texture.fromCanvas(canvasBuffer.canvas); + var bounds = this.getBounds(); + + var canvasBuffer = new PIXI.CanvasBuffer(bounds.width * resolution, bounds.height * resolution); + + var texture = PIXI.Texture.fromCanvas(canvasBuffer.canvas, scaleMode); + texture.baseTexture.resolution = resolution; + + canvasBuffer.context.scale(resolution, resolution); canvasBuffer.context.translate(-bounds.x,-bounds.y); @@ -10537,18 +11732,20 @@ { // if the sprite is not visible or the alpha is 0 then no need to render this element if(this.visible === false || this.alpha === 0 || this.isMask === true)return; - if(this._cacheAsBitmap) { - - if(this.dirty) + + if(this.dirty || this.cachedSpriteDirty) { + this._generateCachedSprite(); + // we will also need to update the texture on the gpu too! - PIXI.updateWebGLTexture(this._cachedSprite.texture.baseTexture, renderSession.gl); - - this.dirty = false; + this.updateCachedSpriteTexture(); + + this.cachedSpriteDirty = false; + this.dirty = false; } this._cachedSprite.alpha = this.alpha; @@ -10572,11 +11769,13 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - + // check if the webgl graphic needs to be updated + if(this.webGLDirty) + { + this.dirty = true; + this.webGLDirty = false; + } + PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -10614,32 +11813,60 @@ // if the sprite is not visible or the alpha is 0 then no need to render this element if(this.visible === false || this.alpha === 0 || this.isMask === true)return; - var context = renderSession.context; - var transform = this.worldTransform; - - if(this.blendMode !== renderSession.currentBlendMode) + if(this._cacheAsBitmap) { - renderSession.currentBlendMode = this.blendMode; - context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + if(this.dirty || this.cachedSpriteDirty) + { + this._generateCachedSprite(); + + // we will also need to update the texture + this.updateCachedSpriteTexture(); + + this.cachedSpriteDirty = false; + this.dirty = false; + } + + this._cachedSprite.alpha = this.alpha; + PIXI.Sprite.prototype._renderCanvas.call(this._cachedSprite, renderSession); + + return; } - - if(this._mask) + else { - renderSession.maskManager.pushMask(this._mask, renderSession.context); - } + var context = renderSession.context; + var transform = this.worldTransform; + + if(this.blendMode !== renderSession.currentBlendMode) + { + renderSession.currentBlendMode = this.blendMode; + context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + } - context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx, transform.ty); - PIXI.CanvasGraphics.renderGraphics(this, context); + if(this._mask) + { + renderSession.maskManager.pushMask(this._mask, renderSession); + } - // simple render children! - for(var i=0, j=this.children.length; i maxY ? y3 : maxY; maxY = y4 > maxY ? y4 : maxY; - var bounds = this._bounds; - bounds.x = minX; bounds.width = maxX - minX; @@ -10720,69 +11953,98 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; var minY = Infinity; var maxY = -Infinity; - var points, x, y, w, h; + if(this.graphicsData.length) + { + var shape, points, x, y, w, h; - for (var i = 0; i < this.graphicsData.length; i++) { - var data = this.graphicsData[i]; - var type = data.type; - var lineWidth = data.lineWidth; + for (var i = 0; i < this.graphicsData.length; i++) { + var data = this.graphicsData[i]; + var type = data.type; + var lineWidth = data.lineWidth; + shape = data.shape; + - points = data.points; - - if(type === PIXI.Graphics.RECT) - { - x = points[0] - lineWidth/2; - y = points[1] - lineWidth/2; - w = points[2] + lineWidth; - h = points[3] + lineWidth; - - minX = x < minX ? x : minX; - maxX = x + w > maxX ? x + w : maxX; - - minY = y < minY ? x : minY; - maxY = y + h > maxY ? y + h : maxY; - } - else if(type === PIXI.Graphics.CIRC || type === PIXI.Graphics.ELIP) - { - x = points[0]; - y = points[1]; - w = points[2] + lineWidth/2; - h = points[3] + lineWidth/2; - - minX = x - w < minX ? x - w : minX; - maxX = x + w > maxX ? x + w : maxX; - - minY = y - h < minY ? y - h : minY; - maxY = y + h > maxY ? y + h : maxY; - } - else - { - // POLY - for (var j = 0; j < points.length; j+=2) + if(type === PIXI.Graphics.RECT || type === PIXI.Graphics.RRECT) { + x = shape.x - lineWidth/2; + y = shape.y - lineWidth/2; + w = shape.width + lineWidth; + h = shape.height + lineWidth; - x = points[j]; - y = points[j+1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x < minX ? x : minX; + maxX = x + w > maxX ? x + w : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y < minY ? y : minY; + maxY = y + h > maxY ? y + h : maxY; + } + else if(type === PIXI.Graphics.CIRC) + { + x = shape.x; + y = shape.y; + w = shape.radius + lineWidth/2; + h = shape.radius + lineWidth/2; + + minX = x - w < minX ? x - w : minX; + maxX = x + w > maxX ? x + w : maxX; + + minY = y - h < minY ? y - h : minY; + maxY = y + h > maxY ? y + h : maxY; + } + else if(type === PIXI.Graphics.ELIP) + { + x = shape.x; + y = shape.y; + w = shape.width + lineWidth/2; + h = shape.height + lineWidth/2; + + minX = x - w < minX ? x - w : minX; + maxX = x + w > maxX ? x + w : maxX; + + minY = y - h < minY ? y - h : minY; + maxY = y + h > maxY ? y + h : maxY; + } + else + { + // POLY + points = shape.points; + + for (var j = 0; j < points.length; j+=2) + { + + x = points[j]; + y = points[j+1]; + minX = x-lineWidth < minX ? x-lineWidth : minX; + maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + + minY = y-lineWidth < minY ? y-lineWidth : minY; + maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + } } } } + else + { + minX = 0; + maxX = 0; + minY = 0; + maxY = 0; + } var padding = this.boundsPadding; - this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); -}; + var bounds = this._bounds; + + bounds.x = minX - padding; + bounds.width = (maxX - minX) + padding * 2; + bounds.y = minY - padding; + bounds.height = (maxY - minY) + padding * 2; +}; /** * Generates the cached sprite when the sprite has cacheAsBitmap = true @@ -10816,12 +12078,43 @@ // this._cachedSprite.buffer.context.save(); this._cachedSprite.buffer.context.translate(-bounds.x,-bounds.y); + // make sure we set the alpha of the graphics to 1 for the render.. + this.worldAlpha = 1; + + // now render the graphic.. PIXI.CanvasGraphics.renderGraphics(this, this._cachedSprite.buffer.context); this._cachedSprite.alpha = this.alpha; - - // this._cachedSprite.buffer.context.restore(); }; +/** + * Updates texture size based on canvas size + * + * @method updateCachedSpriteTexture + * @private + */ +PIXI.Graphics.prototype.updateCachedSpriteTexture = function() +{ + var cachedSprite = this._cachedSprite; + var texture = cachedSprite.texture; + var canvas = cachedSprite.buffer.canvas; + + texture.baseTexture.width = canvas.width; + texture.baseTexture.height = canvas.height; + texture.crop.width = texture.frame.width = canvas.width; + texture.crop.height = texture.frame.height = canvas.height; + + cachedSprite._width = canvas.width; + cachedSprite._height = canvas.height; + + // update the dirty base textures + texture.baseTexture.dirty(); +}; + +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -10831,6 +12124,57 @@ this._cachedSprite = null; }; +/** + * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon. + * + * @method drawShape + * @param {Circle|Rectangle|Ellipse|Line|Polygon} shape The Shape object to draw. + * @return {GraphicsData} The generated GraphicsData object. + */ +PIXI.Graphics.prototype.drawShape = function(shape) +{ + if(this.currentPath) + { + // check current path! + if(this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + } + + this.currentPath = null; + + var data = new PIXI.GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + + this.graphicsData.push(data); + + if(data.type === PIXI.Graphics.POLY) + { + data.shape.closed = this.filling; + this.currentPath = data; + } + + this.dirty = true; + + return data; +}; + +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ +PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) +{ + this.lineWidth = lineWidth; + this.lineColor = lineColor; + this.lineAlpha = lineAlpha; + + this.fillColor = fillColor; + this.fillAlpha = fillAlpha; + this.fill = fill; + + this.shape = shape; + this.type = shape.type; +}; // SOME TYPES: PIXI.Graphics.POLY = 0; @@ -10839,6 +12183,10 @@ PIXI.Graphics.ELIP = 3; PIXI.Graphics.RREC = 4; +PIXI.Polygon.prototype.type = PIXI.Graphics.POLY; +PIXI.Rectangle.prototype.type = PIXI.Graphics.RECT; +PIXI.Circle.prototype.type = PIXI.Graphics.CIRC; +PIXI.Ellipse.prototype.type = PIXI.Graphics.ELIP; /** * @author Mat Groves http://matgroves.com/ @@ -10858,25 +12206,48 @@ { PIXI.DisplayObjectContainer.call( this ); + + /** + * The texture of the strip + * + * @property texture + * @type Texture + */ this.texture = texture; // set up the main bits.. this.uvs = new PIXI.Float32Array([0, 1, - 1, 1, - 1, 0, - 0,1]); + 1, 1, + 1, 0, + 0, 1]); this.verticies = new PIXI.Float32Array([0, 0, - 100,0, - 100,100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new PIXI.Float32Array([1, 1, 1, 1]); this.indices = new PIXI.Uint16Array([0, 1, 2, 3]); - + /** + * Whether the strip is dirty or not + * + * @property dirty + * @type Boolean + */ this.dirty = true; + + + /** + * if you need a padding, not yet implemented + * + * @property padding + * @type Number + */ + this.padding = 0; + // NYI, TODO padding ? + }; // constructor @@ -10944,7 +12315,7 @@ gl.uniformMatrix3fv(shader.translationMatrix, false, this.worldTransform.toArray(true)); gl.uniform2f(shader.projectionVector, projection.x, -projection.y); gl.uniform2f(shader.offsetVector, -offset.x, -offset.y); - gl.uniform1f(shader.alpha, 1); + gl.uniform1f(shader.alpha, this.worldAlpha); if(!this.dirty) { @@ -10958,8 +12329,17 @@ gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); gl.activeTexture(gl.TEXTURE0); - // bind the current texture - gl.bindTexture(gl.TEXTURE_2D, this.texture.baseTexture._glTextures[gl.id] || PIXI.createWebGLTexture(this.texture.baseTexture, gl)); + + // check if a texture is dirty.. + if(this.texture.baseTexture._dirty[gl.id]) + { + renderSession.renderer.updateTexture(this.texture.baseTexture); + } + else + { + // bind the current texture + gl.bindTexture(gl.TEXTURE_2D, this.texture.baseTexture._glTextures[gl.id]); + } // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indexBuffer); @@ -10980,7 +12360,16 @@ gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, this.texture.baseTexture._glTextures[gl.id] || PIXI.createWebGLTexture(this.texture.baseTexture, gl)); + + // check if a texture is dirty.. + if(this.texture.baseTexture._dirty[gl.id]) + { + renderSession.renderer.updateTexture(this.texture.baseTexture); + } + else + { + gl.bindTexture(gl.TEXTURE_2D, this.texture.baseTexture._glTextures[gl.id]); + } // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indexBuffer); @@ -10995,6 +12384,8 @@ }; + + PIXI.Strip.prototype._renderCanvas = function(renderSession) { var context = renderSession.context; @@ -11003,11 +12394,11 @@ if (renderSession.roundPixels) { - context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx | 0, transform.ty | 0); + context.setTransform(transform.a, transform.b, transform.c, transform.d, transform.tx | 0, transform.ty | 0); } else { - context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx, transform.ty); + context.setTransform(transform.a, transform.b, transform.c, transform.d, transform.tx, transform.ty); } var strip = this; @@ -11026,10 +12417,8 @@ var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - if(true) + if(this.padding > 0) { - - //expand(); var centerX = (x0 + x1 + x2)/3; var centerY = (y0 + y1 + y2)/3; @@ -11055,7 +12444,6 @@ dist = Math.sqrt( normX * normX + normY * normY ); x2 = centerX + (normX / dist) * (dist + 3); y2 = centerY + (normY / dist) * (dist + 3); - } var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; @@ -11091,13 +12479,40 @@ } }; -/* - * Sets the texture that the Strip will use + +/** + * Renders a flat strip * - * @method setTexture - * @param texture {Texture} the texture that will be used + * @method renderStripFlat + * @param strip {Strip} The Strip to render * @private */ +PIXI.Strip.prototype.renderStripFlat = function(strip) +{ + var context = this.context; + var verticies = strip.verticies; + + var length = verticies.length/2; + this.count++; + + context.beginPath(); + for (var i=1; i < length-2; i++) + { + // draw some triangles! + var index = i*2; + + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + + context.moveTo(x0, y0); + context.lineTo(x1, y1); + context.lineTo(x2, y2); + } + + context.fillStyle = "#FF0000"; + context.fill(); + context.closePath(); +}; /* PIXI.Strip.prototype.setTexture = function(texture) @@ -11125,16 +12540,19 @@ { this.updateFrame = true; }; -/* @author Mat Groves http://matgroves.com/ @Doormat23 +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * @copyright Mat Groves, Rovanion Luckey */ /** - * + * * @class Rope * @constructor - * @param texture {Texture} The texture to use - * @param points {Array} - * + * @extends Strip + * @param {Texture} texture - The texture to use on the rope. + * @param {Array} points - An array of {PIXI.Point}. + * */ PIXI.Rope = function(texture, points) { @@ -11145,7 +12563,7 @@ this.uvs = new PIXI.Float32Array(points.length * 4); this.colors = new PIXI.Float32Array(points.length * 2); this.indices = new PIXI.Uint16Array(points.length * 2); - + this.refresh(); }; @@ -11156,7 +12574,7 @@ PIXI.Rope.prototype.constructor = PIXI.Rope; /* - * Refreshes + * Refreshes * * @method refresh */ @@ -11285,7 +12703,7 @@ PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); }; /* - * Sets the texture that the Rope will use + * Sets the texture that the Rope will use * * @method setTexture * @param texture {Texture} the texture that will be used @@ -11485,7 +12903,7 @@ renderSession.spriteBatch.stop(); if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(renderSession); + if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); renderSession.spriteBatch.start(); }; @@ -11514,7 +12932,14 @@ var i,j; - context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx , transform.ty); + var resolution = renderSession.resolution; + + context.setTransform(transform.a * resolution, + transform.c * resolution, + transform.b * resolution, + transform.d * resolution, + transform.tx * resolution, + transform.ty * resolution); if (!this.__tilePattern || this.refreshTexture) { @@ -11543,20 +12968,19 @@ tilePosition.x %= this.tilingTexture.baseTexture.width; tilePosition.y %= this.tilingTexture.baseTexture.height; - // offset + // offset - make sure to account for the anchor point.. context.scale(tileScale.x,tileScale.y); - context.translate(tilePosition.x, tilePosition.y); + context.translate(tilePosition.x + (this.anchor.x * -this._width), tilePosition.y + (this.anchor.y * -this._height)); context.fillStyle = this.__tilePattern; - // make sure to account for the anchor point.. - context.fillRect(-tilePosition.x + (this.anchor.x * -this._width), - -tilePosition.y + (this.anchor.y * -this._height), + context.fillRect(-tilePosition.x, + -tilePosition.y, this._width / tileScale.x, this._height / tileScale.y); context.scale(1 / tileScale.x, 1 / tileScale.y); - context.translate(-tilePosition.x, -tilePosition.y); + context.translate(-tilePosition.x + (this.anchor.x * this._width), -tilePosition.y + (this.anchor.y * this._height)); if (this._mask) { @@ -11673,7 +13097,7 @@ { if (!this.texture.baseTexture.hasLoaded) return; - var texture = this.texture; + var texture = this.originalTexture || this.texture; var frame = texture.frame; var targetWidth, targetHeight; @@ -11750,8 +13174,13 @@ } this.refreshTexture = false; + + this.originalTexture = this.texture; + this.texture = this.tilingTexture; + this.tilingTexture.baseTexture._powerOf2 = true; }; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi @@ -13232,13 +14661,11 @@ */ PIXI.BaseTextureCache = {}; -PIXI.texturesToUpdate = []; -PIXI.texturesToDestroy = []; PIXI.BaseTextureCacheIdGenerator = 0; /** - * A texture stores the information that represents an image. All textures have a base texture + * A texture stores the information that represents an image. All textures have a base texture. * * @class BaseTexture * @uses EventTarget @@ -13248,8 +14675,14 @@ */ PIXI.BaseTexture = function(source, scaleMode) { - PIXI.EventTarget.call( this ); - + /** + * The Resolution of the texture. + * + * @property resolution + * @type Number + */ + this.resolution = 1; + /** * [read-only] The width of the base texture set when the image has loaded * @@ -13270,6 +14703,7 @@ /** * The scale mode to apply when scaling this texture + * * @property scaleMode * @type PIXI.scaleModes * @default PIXI.scaleModes.LINEAR @@ -13277,7 +14711,7 @@ this.scaleMode = scaleMode || PIXI.scaleModes.DEFAULT; /** - * [read-only] Describes if the base texture has loaded or not + * [read-only] Set to true once the base texture has loaded * * @property hasLoaded * @type Boolean @@ -13286,73 +14720,92 @@ this.hasLoaded = false; /** - * The source that is loaded to create the texture + * The image source that is used to create the texture. * * @property source * @type Image */ this.source = source; - //TODO will be used for futer pixi 1.5... - this.id = PIXI.BaseTextureCacheIdGenerator++; + this._UID = PIXI._UID++; /** - * Controls if RGB channels should be premultiplied by Alpha (WebGL only) + * Controls if RGB channels should be pre-multiplied by Alpha (WebGL only) * - * @property + * @property premultipliedAlpha * @type Boolean - * @default TRUE - */ + * @default true + */ this.premultipliedAlpha = true; // used for webGL + + /** + * @property _glTextures + * @type Array + * @private + */ this._glTextures = []; - - // used for webGL teture updateing... - this._dirty = []; - + + // used for webGL texture updating... + // TODO - this needs to be addressed + + /** + * @property _dirty + * @type Array + * @private + */ + this._dirty = [true, true, true, true]; + if(!source)return; if((this.source.complete || this.source.getContext) && this.source.width && this.source.height) { this.hasLoaded = true; - this.width = this.source.width; - this.height = this.source.height; - - PIXI.texturesToUpdate.push(this); + this.width = this.source.naturalWidth || this.source.width; + this.height = this.source.naturalHeight || this.source.height; + this.dirty(); } else { - var scope = this; + this.source.onload = function() { scope.hasLoaded = true; - scope.width = scope.source.width; - scope.height = scope.source.height; + scope.width = scope.source.naturalWidth || scope.source.width; + scope.height = scope.source.naturalHeight || scope.source.height; - for (var i = 0; i < scope._glTextures.length; i++) - { - scope._dirty[i] = true; - } + scope.dirty(); // add it to somewhere... scope.dispatchEvent( { type: 'loaded', content: scope } ); }; + this.source.onerror = function() { scope.dispatchEvent( { type: 'error', content: scope } ); }; } + /** + * @property imageUrl + * @type String + */ this.imageUrl = null; - this._powerOf2 = false; - + /** + * @property _powerOf2 + * @type Boolean + * @private + */ + this._powerOf2 = false; }; PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture; +PIXI.EventTarget.mixin(PIXI.BaseTexture.prototype); + /** * Destroys this base texture * @@ -13365,14 +14818,27 @@ delete PIXI.BaseTextureCache[this.imageUrl]; delete PIXI.TextureCache[this.imageUrl]; this.imageUrl = null; - this.source.src = null; + this.source.src = ''; } else if (this.source && this.source._pixiId) { delete PIXI.BaseTextureCache[this.source._pixiId]; } this.source = null; - PIXI.texturesToDestroy.push(this); + + // delete the webGL textures if any. + for (var i = this._glTextures.length - 1; i >= 0; i--) + { + var glTexture = this._glTextures[i]; + var gl = PIXI.glContexts[i]; + + if(gl && glTexture) + { + gl.deleteTexture(glTexture); + } + } + + this._glTextures.length = 0; }; /** @@ -13389,20 +14855,33 @@ }; /** - * Helper function that returns a base texture based on an image url - * If the image is not in the base texture cache it will be created and loaded + * Sets all glTextures to be dirty. + * + * @method dirty + */ +PIXI.BaseTexture.prototype.dirty = function() +{ + for (var i = 0; i < this._glTextures.length; i++) + { + this._dirty[i] = true; + } +}; + +/** + * Helper function that creates a base texture from the given image url. + * If the image is not in the base texture cache it will be created and loaded. * * @static * @method fromImage * @param imageUrl {String} The image url of the texture - * @param crossorigin {Boolean} + * @param crossorigin {Boolean} * @param scaleMode {Number} Should be one of the PIXI.scaleMode consts * @return BaseTexture */ PIXI.BaseTexture.fromImage = function(imageUrl, crossorigin, scaleMode) { var baseTexture = PIXI.BaseTextureCache[imageUrl]; - + if(crossorigin === undefined && imageUrl.indexOf('data:') === -1) crossorigin = true; if(!baseTexture) @@ -13414,18 +14893,24 @@ { image.crossOrigin = ''; } + image.src = imageUrl; baseTexture = new PIXI.BaseTexture(image, scaleMode); baseTexture.imageUrl = imageUrl; PIXI.BaseTextureCache[imageUrl] = baseTexture; + + // if there is an @2x at the end of the url we are going to assume its a highres image + if( imageUrl.indexOf(PIXI.RETINA_PREFIX + '.') !== -1) + { + baseTexture.resolution = 2; + } } return baseTexture; }; /** - * Helper function that returns a base texture based on a canvas element - * If the image is not in the base texture cache it will be created and loaded + * Helper function that creates a base texture from the given canvas element. * * @static * @method fromCanvas @@ -13451,8 +14936,6 @@ return baseTexture; }; - - /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -13464,18 +14947,18 @@ /** * A texture stores the information that represents an image or part of an image. It cannot be added - * to the display list directly. To do this use PIXI.Sprite. If no frame is provided then the whole image is used + * to the display list directly. Instead use it as the texture for a PIXI.Sprite. If no frame is provided then the whole image is used. * * @class Texture * @uses EventTarget * @constructor * @param baseTexture {BaseTexture} The base texture source to create the texture from * @param frame {Rectangle} The rectangle frame of the texture to show + * @param [crop] {Rectangle} The area of original texture + * @param [trim] {Rectangle} Trimmed texture rectangle */ -PIXI.Texture = function(baseTexture, frame) +PIXI.Texture = function(baseTexture, frame, crop, trim) { - PIXI.EventTarget.call( this ); - /** * Does this Texture have any frame data assigned to it? * @@ -13512,15 +14995,15 @@ this.frame = frame; /** - * The trim point + * The texture trim data. * * @property trim * @type Rectangle */ - this.trim = null; - + this.trim = trim; + /** - * This will let the renderer know if the texture is valid. If its not then it cannot be rendered. + * This will let the renderer know if the texture is valid. If it's not then it cannot be rendered. * * @property valid * @type Boolean @@ -13528,22 +15011,22 @@ this.valid = false; /** - * The context scope under which events are run. + * This will let a renderer know that a texture has been updated (used mainly for webGL uv updates) * - * @property scope - * @type Object + * @property requiresUpdate + * @type Boolean */ - this.scope = this; + this.requiresUpdate = false; /** * The WebGL UV data cache. * - * @private * @property _uvs * @type Object + * @private */ this._uvs = null; - + /** * The width of the Texture in pixels. * @@ -13567,7 +15050,7 @@ * @property crop * @type Rectangle */ - this.crop = new PIXI.Rectangle(0, 0, 1, 1); + this.crop = crop || new PIXI.Rectangle(0, 0, 1, 1); if (baseTexture.hasLoaded) { @@ -13576,18 +15059,17 @@ } else { - var scope = this; - baseTexture.addEventListener('loaded', function(){ scope.onBaseTextureLoaded(); }); + baseTexture.addEventListener('loaded', this.onBaseTextureLoaded.bind(this)); } }; PIXI.Texture.prototype.constructor = PIXI.Texture; +PIXI.EventTarget.mixin(PIXI.Texture.prototype); /** * Called when the base texture is loaded * * @method onBaseTextureLoaded - * @param event * @private */ PIXI.Texture.prototype.onBaseTextureLoaded = function() @@ -13596,10 +15078,10 @@ baseTexture.removeEventListener('loaded', this.onLoaded); if (this.noFrame) this.frame = new PIXI.Rectangle(0, 0, baseTexture.width, baseTexture.height); - + this.setFrame(this.frame); - this.scope.dispatchEvent( { type: 'update', content: this } ); + this.dispatchEvent( { type: 'update', content: this } ); }; /** @@ -13648,25 +15130,25 @@ this.frame.width = this.trim.width; this.frame.height = this.trim.height; } - - if (this.valid) PIXI.Texture.frameUpdates.push(this); + + if (this.valid) this._updateUvs(); }; /** * Updates the internal WebGL UV cache. * - * @method _updateWebGLuvs + * @method _updateUvs * @private */ -PIXI.Texture.prototype._updateWebGLuvs = function() +PIXI.Texture.prototype._updateUvs = function() { if(!this._uvs)this._uvs = new PIXI.TextureUvs(); var frame = this.crop; var tw = this.baseTexture.width; var th = this.baseTexture.height; - + this._uvs.x0 = frame.x / tw; this._uvs.y0 = frame.y / th; @@ -13678,12 +15160,11 @@ this._uvs.x3 = frame.x / tw; this._uvs.y3 = (frame.y + frame.height) / th; - }; /** - * Helper function that returns a texture based on an image url - * If the image is not in the texture cache it will be created and loaded + * Helper function that creates a Texture object from the given image url. + * If the image is not in the texture cache it will be created and loaded. * * @static * @method fromImage @@ -13706,8 +15187,8 @@ }; /** - * Helper function that returns a texture based on a frame id - * If the frame id is not in the texture cache an error will be thrown + * Helper function that returns a Texture objected based on the given frame id. + * If the frame id is not in the texture cache an error will be thrown. * * @static * @method fromFrame @@ -13722,8 +15203,7 @@ }; /** - * Helper function that returns a texture based on a canvas element - * If the canvas is not in the texture cache it will be created and loaded + * Helper function that creates a new a Texture based on the given canvas element. * * @static * @method fromCanvas @@ -13739,14 +15219,13 @@ }; - /** - * Adds a texture to the textureCache. + * Adds a texture to the global PIXI.TextureCache. This cache is shared across the whole PIXI object. * * @static * @method addTextureToCache - * @param texture {Texture} - * @param id {String} the id that the texture will be stored against. + * @param texture {Texture} The Texture to add to the cache. + * @param id {String} The id that the texture will be stored against. */ PIXI.Texture.addTextureToCache = function(texture, id) { @@ -13754,12 +15233,12 @@ }; /** - * Remove a texture from the textureCache. + * Remove a texture from the global PIXI.TextureCache. * * @static * @method removeTextureFromCache - * @param id {String} the id of the texture to be removed - * @return {Texture} the texture that was removed + * @param id {String} The id of the texture to be removed + * @return {Texture} The texture that was removed */ PIXI.Texture.removeTextureFromCache = function(id) { @@ -13769,9 +15248,6 @@ return texture; }; -// this is more for webGL.. it contains updated frames.. -PIXI.Texture.frameUpdates = []; - PIXI.TextureUvs = function() { this.x0 = 0; @@ -13785,8 +15261,6 @@ this.x3 = 0; this.y3 = 0; - - }; /** @@ -13794,38 +15268,37 @@ */ /** - A RenderTexture is a special texture that allows any pixi displayObject to be rendered to it. - - __Hint__: All DisplayObjects (exmpl. Sprites) that render on RenderTexture should be preloaded. - Otherwise black rectangles will be drawn instead. - - RenderTexture takes snapshot of DisplayObject passed to render method. If DisplayObject is passed to render method, position and rotation of it will be ignored. For example: - - var renderTexture = new PIXI.RenderTexture(800, 600); - var sprite = PIXI.Sprite.fromImage("spinObj_01.png"); - sprite.position.x = 800/2; - sprite.position.y = 600/2; - sprite.anchor.x = 0.5; - sprite.anchor.y = 0.5; - renderTexture.render(sprite); - - Sprite in this case will be rendered to 0,0 position. To render this sprite at center DisplayObjectContainer should be used: - - var doc = new PIXI.DisplayObjectContainer(); - doc.addChild(sprite); - renderTexture.render(doc); // Renders to center of renderTexture - + * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * + * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded otherwise black rectangles will be drawn instead. + * + * A RenderTexture takes a snapshot of any Display Object given to its render method. The position and rotation of the given Display Objects is ignored. For example: + * + * var renderTexture = new PIXI.RenderTexture(800, 600); + * var sprite = PIXI.Sprite.fromImage("spinObj_01.png"); + * sprite.position.x = 800/2; + * sprite.position.y = 600/2; + * sprite.anchor.x = 0.5; + * sprite.anchor.y = 0.5; + * renderTexture.render(sprite); + * + * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual position a DisplayObjectContainer should be used: + * + * var doc = new PIXI.DisplayObjectContainer(); + * doc.addChild(sprite); + * renderTexture.render(doc); // Renders to center of renderTexture + * * @class RenderTexture * @extends Texture * @constructor * @param width {Number} The width of the render texture * @param height {Number} The height of the render texture + * @param renderer {CanvasRenderer|WebGLRenderer} The renderer used for this RenderTexture * @param scaleMode {Number} Should be one of the PIXI.scaleMode consts + * @param resolution {Number} The resolution of the texture being generated */ -PIXI.RenderTexture = function(width, height, renderer, scaleMode) +PIXI.RenderTexture = function(width, height, renderer, scaleMode, resolution) { - PIXI.EventTarget.call( this ); - /** * The with of the render texture * @@ -13833,6 +15306,7 @@ * @type Number */ this.width = width || 100; + /** * The height of the render texture * @@ -13842,12 +15316,20 @@ this.height = height || 100; /** + * The Resolution of the texture. + * + * @property resolution + * @type Number + */ + this.resolution = resolution || 1; + + /** * The framing rectangle of the render texture * * @property frame * @type Rectangle */ - this.frame = new PIXI.Rectangle(0, 0, this.width, this.height); + this.frame = new PIXI.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); /** * This is the area of the BaseTexture image to actually copy to the Canvas / WebGL when rendering, @@ -13856,8 +15338,8 @@ * @property crop * @type Rectangle */ - this.crop = new PIXI.Rectangle(0, 0, this.width, this.height); - + this.crop = new PIXI.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); + /** * The base texture object that this texture uses * @@ -13865,45 +15347,60 @@ * @type BaseTexture */ this.baseTexture = new PIXI.BaseTexture(); - this.baseTexture.width = this.width; - this.baseTexture.height = this.height; + this.baseTexture.width = this.width * this.resolution; + this.baseTexture.height = this.height * this.resolution; this.baseTexture._glTextures = []; + this.baseTexture.resolution = this.resolution; this.baseTexture.scaleMode = scaleMode || PIXI.scaleModes.DEFAULT; this.baseTexture.hasLoaded = true; - // each render texture can only belong to one renderer at the moment if its webGL + PIXI.Texture.call(this, + this.baseTexture, + new PIXI.Rectangle(0, 0, this.width, this.height) + ); + + /** + * The renderer this RenderTexture uses. A RenderTexture can only belong to one renderer at the moment if its webGL. + * + * @property renderer + * @type CanvasRenderer|WebGLRenderer + */ this.renderer = renderer || PIXI.defaultRenderer; if(this.renderer.type === PIXI.WEBGL_RENDERER) { var gl = this.renderer.gl; + this.baseTexture._dirty[gl.id] = false; - this.textureBuffer = new PIXI.FilterTexture(gl, this.width, this.height, this.baseTexture.scaleMode); + this.textureBuffer = new PIXI.FilterTexture(gl, this.width * this.resolution, this.height * this.resolution, this.baseTexture.scaleMode); this.baseTexture._glTextures[gl.id] = this.textureBuffer.texture; this.render = this.renderWebGL; - this.projection = new PIXI.Point(this.width/2 , -this.height/2); + this.projection = new PIXI.Point(this.width*0.5, -this.height*0.5); } else { this.render = this.renderCanvas; - this.textureBuffer = new PIXI.CanvasBuffer(this.width, this.height); + this.textureBuffer = new PIXI.CanvasBuffer(this.width* this.resolution, this.height* this.resolution); this.baseTexture.source = this.textureBuffer.canvas; } + /** + * @property valid + * @type Boolean + */ this.valid = true; - PIXI.Texture.frameUpdates.push(this); - + this._updateUvs(); }; PIXI.RenderTexture.prototype = Object.create(PIXI.Texture.prototype); PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture; /** - * Resize the RenderTexture. + * Resizes the RenderTexture. * * @method resize * @param width {Number} The width to resize to. @@ -13912,10 +15409,9 @@ */ PIXI.RenderTexture.prototype.resize = function(width, height, updateBase) { - if (width === this.width && height === this.height) - { - return; - } + if (width === this.width && height === this.height)return; + + this.valid = (width > 0 && height > 0); this.width = this.frame.width = this.crop.width = width; this.height = this.frame.height = this.crop.height = height; @@ -13931,8 +15427,10 @@ this.projection.x = this.width / 2; this.projection.y = -this.height / 2; } - - this.textureBuffer.resize(this.width, this.height); + + if(!this.valid)return; + + this.textureBuffer.resize(this.width * this.resolution, this.height * this.resolution); }; /** @@ -13942,11 +15440,13 @@ */ PIXI.RenderTexture.prototype.clear = function() { + if(!this.valid)return; + if (this.renderer.type === PIXI.WEBGL_RENDERER) { this.renderer.gl.bindFramebuffer(this.renderer.gl.FRAMEBUFFER, this.textureBuffer.frameBuffer); } - + this.textureBuffer.clear(); }; @@ -13955,52 +15455,45 @@ * * @method renderWebGL * @param displayObject {DisplayObject} The display object to render this texture on - * @param clear {Boolean} If true the texture will be cleared before the displayObject is drawn + * @param [matrix] {Matrix} Optional matrix to apply to the display object before rendering. + * @param [clear] {Boolean} If true the texture will be cleared before the displayObject is drawn * @private */ -PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, clear) +PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, matrix, clear) { + if(!this.valid)return; //TOOD replace position with matrix.. - var gl = this.renderer.gl; + + //Lets create a nice matrix to apply to our display object. Frame buffers come in upside down so we need to flip the matrix + var wt = displayObject.worldTransform; + wt.identity(); + wt.translate(0, this.projection.y * 2); + if(matrix)wt.append(matrix); + wt.scale(1,-1); - gl.colorMask(true, true, true, true); + // setWorld Alpha to ensure that the object is renderer at full opacity + displayObject.worldAlpha = 1; - gl.viewport(0, 0, this.width, this.height); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer ); - - if(clear)this.textureBuffer.clear(); - - - // THIS WILL MESS WITH HIT TESTING! + // Time to update all the children of the displayObject with the new matrix.. var children = displayObject.children; - //TODO -? create a new one??? dont think so! - var originalWorldTransform = displayObject.worldTransform; - displayObject.worldTransform = PIXI.RenderTexture.tempMatrix; - // modify to flip... - displayObject.worldTransform.d = -1; - displayObject.worldTransform.ty = this.projection.y * -2; - - if(position) - { - displayObject.worldTransform.tx = position.x; - displayObject.worldTransform.ty -= position.y; - } - for(var i=0,j=children.length; i} assetURLs an array of image/sprite sheet urls that you would like loaded + * @param assetURLs {Array} An array of image/sprite sheet urls that you would like loaded * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font * data formats include 'xml' and 'fnt'. @@ -14074,8 +15628,6 @@ */ PIXI.AssetLoader = function(assetURLs, crossorigin) { - PIXI.EventTarget.call(this); - /** * The array of asset URLs that are going to be loaded * @@ -14112,6 +15664,8 @@ }; }; +PIXI.EventTarget.mixin(PIXI.AssetLoader.prototype); + /** * Fired when an item has loaded * @event onProgress @@ -14126,7 +15680,7 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; /** - * Given a filename, returns its extension, wil + * Given a filename, returns its extension. * * @method _getDataType * @param str {String} the name of the asset @@ -14168,7 +15722,7 @@ var scope = this; function onLoad(evt) { - scope.onAssetLoaded(evt.content); + scope.onAssetLoaded(evt.data.content); } this.loadCount = this.assetURLs.length; @@ -14189,7 +15743,7 @@ var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener('loaded', onLoad); + loader.on('loaded', onLoad); loader.load(); } }; @@ -14203,12 +15757,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function(loader) { this.loadCount--; - this.dispatchEvent({ type: 'onProgress', content: this, loader: loader }); + this.emit('onProgress', { content: this, loader: loader }); if (this.onProgress) this.onProgress(loader); if (!this.loadCount) { - this.dispatchEvent({type: 'onComplete', content: this}); + this.emit('onComplete', { content: this }); if(this.onComplete) this.onComplete(); } }; @@ -14229,7 +15783,6 @@ * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.JsonLoader = function (url, crossorigin) { - PIXI.EventTarget.call(this); /** * The url of the bitmap font data @@ -14270,6 +15823,8 @@ // constructor PIXI.JsonLoader.prototype.constructor = PIXI.JsonLoader; +PIXI.EventTarget.mixin(PIXI.JsonLoader.prototype); + /** * Loads the JSON data * @@ -14277,24 +15832,18 @@ */ PIXI.JsonLoader.prototype.load = function () { - var scope = this; - - if(window.XDomainRequest && scope.crossorigin) + if(window.XDomainRequest && this.crossorigin) { this.ajaxRequest = new window.XDomainRequest(); - // XDomainRequest has a few querks. Occasionally it will abort requests + // XDomainRequest has a few quirks. Occasionally it will abort requests // A way to avoid this is to make sure ALL callbacks are set even if not used // More info here: http://stackoverflow.com/questions/15786966/xdomainrequest-aborts-post-on-ie-9 this.ajaxRequest.timeout = 3000; - this.ajaxRequest.onerror = function () { - scope.onError(); - }; - - this.ajaxRequest.ontimeout = function () { - scope.onError(); - }; + this.ajaxRequest.onerror = this.onError.bind(this); + + this.ajaxRequest.ontimeout = this.onError.bind(this); this.ajaxRequest.onprogress = function() {}; @@ -14308,12 +15857,7 @@ this.ajaxRequest = new window.ActiveXObject('Microsoft.XMLHTTP'); } - - - this.ajaxRequest.onload = function(){ - - scope.onJSONLoaded(); - }; + this.ajaxRequest.onload = this.onJSONLoaded.bind(this); this.ajaxRequest.open('GET',this.url,true); @@ -14321,33 +15865,30 @@ }; /** - * Invoke when JSON file is loaded + * Invoked when the JSON file is loaded. * * @method onJSONLoaded * @private */ PIXI.JsonLoader.prototype.onJSONLoaded = function () { - + if(!this.ajaxRequest.responseText ) { this.onError(); return; } - + this.json = JSON.parse(this.ajaxRequest.responseText); if(this.json.frames) { // sprite sheet - var scope = this; var textureUrl = this.baseUrl + this.json.meta.image; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener('loaded', function() { - scope.onLoaded(); - }); + image.addEventListener('loaded', this.onLoaded.bind(this)); for (var i in frameData) { @@ -14355,22 +15896,18 @@ if (rect) { - PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { - x: rect.x, - y: rect.y, - width: rect.w, - height: rect.h - }); - - PIXI.TextureCache[i].crop = new PIXI.Rectangle(rect.x, rect.y, rect.w, rect.h); - + var textureSize = new PIXI.Rectangle(rect.x, rect.y, rect.w, rect.h); + var crop = textureSize.clone(); + var trim = null; + // Check to see if the sprite is trimmed if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim = new PIXI.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new PIXI.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, textureSize, crop, trim); } } @@ -14392,7 +15929,7 @@ }; /** - * Invoke when json file loaded + * Invoked when the json file has loaded. * * @method onLoaded * @private @@ -14406,7 +15943,7 @@ }; /** - * Invoke when error occured + * Invoked if an error occurs. * * @method onError * @private @@ -14424,18 +15961,20 @@ */ /** - * The atlas file loader is used to load in Atlas data and parse it - * When loaded this class will dispatch a 'loaded' event - * If loading fails this class will dispatch an 'error' event + * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. + * + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish in the 'JSON' format. + * + * It is highly recommended to use texture atlases (also know as 'sprite sheets') as it allowed sprites to be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFrameId() + * * @class AtlasLoader - * @extends EventTarget + * @uses EventTarget * @constructor - * @param {String} url the url of the JSON file - * @param {Boolean} crossorigin + * @param url {String} The url of the JSON file + * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ - PIXI.AtlasLoader = function (url, crossorigin) { - PIXI.EventTarget.call(this); this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; @@ -14446,6 +15985,7 @@ // constructor PIXI.AtlasLoader.constructor = PIXI.AtlasLoader; +PIXI.EventTarget.mixin(PIXI.AtlasLoader.prototype); /** * Starts loading the JSON file @@ -14462,7 +16002,8 @@ }; /** - * Invoke when JSON file is loaded + * Invoked when the Atlas has fully loaded. Parses the JSON and builds the texture frames. + * * @method onAtlasLoaded * @private */ @@ -14566,7 +16107,7 @@ this.currentImageId = 0; for (j = 0; j < this.images.length; j++) { - this.images[j].addEventListener('loaded', selfOnLoaded); + this.images[j].on('loaded', selfOnLoaded); } this.images[this.currentImageId].load(); @@ -14581,7 +16122,8 @@ }; /** - * Invoke when json file has loaded + * Invoked when json file has loaded. + * * @method onLoaded * @private */ @@ -14591,23 +16133,18 @@ this.images[this.currentImageId].load(); } else { this.loaded = true; - this.dispatchEvent({ - type: 'loaded', - content: this - }); + this.emit('loaded', { content: this }); } }; /** - * Invoke when error occured + * Invoked when an error occurs. + * * @method onError * @private */ PIXI.AtlasLoader.prototype.onError = function () { - this.dispatchEvent({ - type: 'error', - content: this - }); + this.emit('error', { content: this }); }; /** @@ -14630,15 +16167,9 @@ * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.SpriteSheetLoader = function (url, crossorigin) { - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as 'JSON' - */ - PIXI.EventTarget.call(this); /** - * The url of the bitmap font data + * The url of the atlas data * * @property url * @type String @@ -14682,6 +16213,8 @@ // constructor PIXI.SpriteSheetLoader.prototype.constructor = PIXI.SpriteSheetLoader; +PIXI.EventTarget.mixin(PIXI.SpriteSheetLoader.prototype); + /** * This will begin loading the JSON file * @@ -14690,8 +16223,8 @@ PIXI.SpriteSheetLoader.prototype.load = function () { var scope = this; var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); - jsonLoader.addEventListener('loaded', function (event) { - scope.json = event.content.json; + jsonLoader.on('loaded', function (event) { + scope.json = event.data.content.json; scope.onLoaded(); }); jsonLoader.load(); @@ -14704,8 +16237,7 @@ * @private */ PIXI.SpriteSheetLoader.prototype.onLoaded = function () { - this.dispatchEvent({ - type: 'loaded', + this.emit('loaded', { content: this }); }; @@ -14716,7 +16248,7 @@ /** * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') - * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFrameId() + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrame() and PIXI.Sprite.fromFrame() * When loaded this class will dispatch a 'loaded' event * * @class ImageLoader @@ -14727,8 +16259,6 @@ */ PIXI.ImageLoader = function(url, crossorigin) { - PIXI.EventTarget.call(this); - /** * The texture being loaded * @@ -14741,6 +16271,9 @@ * if the image is loaded with loadFramedSpriteSheet * frames will contain the sprite sheet frames * + * @property frames + * @type Array + * @readOnly */ this.frames = []; }; @@ -14748,6 +16281,8 @@ // constructor PIXI.ImageLoader.prototype.constructor = PIXI.ImageLoader; +PIXI.EventTarget.mixin(PIXI.ImageLoader.prototype); + /** * Loads image or takes it from cache * @@ -14757,11 +16292,7 @@ { if(!this.texture.baseTexture.hasLoaded) { - var scope = this; - this.texture.baseTexture.addEventListener('loaded', function() - { - scope.onLoaded(); - }); + this.texture.baseTexture.on('loaded', this.onLoaded.bind(this)); } else { @@ -14777,13 +16308,12 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: 'loaded', content: this}); + this.emit('loaded', { content: this }); }; /** * Loads image and split it to uniform sized frames * - * * @method loadFramedSpriteSheet * @param frameWidth {Number} width of each frame * @param frameHeight {Number} height of each frame @@ -14800,7 +16330,7 @@ { for (var x=0; x y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; @@ -383,7 +395,7 @@ * Creates a clone of this Circle instance * * @method clone - * @return {Circle} a copy of the polygon + * @return {Circle} a copy of the Circle */ PIXI.Circle.prototype.clone = function() { @@ -391,12 +403,12 @@ }; /** - * Checks whether the x, and y coordinates passed to this function are contained within this circle + * Checks whether the x and y coordinates given are contained within this circle * * @method contains * @param x {Number} The X coordinate of the point to test * @param y {Number} The Y coordinate of the point to test - * @return {Boolean} Whether the x/y coordinates are within this polygon + * @return {Boolean} Whether the x/y coordinates are within this Circle */ PIXI.Circle.prototype.contains = function(x, y) { @@ -421,13 +433,12 @@ */ PIXI.Circle.prototype.getBounds = function() { - return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.width, this.height); + return new PIXI.Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2); }; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; - /** * @author Chad Engler */ @@ -485,7 +496,7 @@ }; /** - * Checks whether the x and y coordinates passed to this function are contained within this ellipse + * Checks whether the x and y coordinates given are contained within this ellipse * * @method contains * @param x {Number} The X coordinate of the point to test @@ -537,19 +548,61 @@ */ PIXI.Matrix = function() { + /** + * @property a + * @type Number + * @default 1 + */ this.a = 1; + + /** + * @property b + * @type Number + * @default 0 + */ this.b = 0; + + /** + * @property c + * @type Number + * @default 0 + */ this.c = 0; + + /** + * @property d + * @type Number + * @default 1 + */ this.d = 1; + + /** + * @property tx + * @type Number + * @default 0 + */ this.tx = 0; + + /** + * @property ty + * @type Number + * @default 0 + */ this.ty = 0; }; /** - * Creates a pixi matrix object based on the array given as a parameter + * Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows: + * + * a = array[0] + * b = array[1] + * c = array[3] + * d = array[4] + * tx = array[2] + * ty = array[5] * * @method fromArray - * @param array {Array} The array that the matrix will be filled with + * @param array {Array} The array that the matrix will be populated from. */ PIXI.Matrix.prototype.fromArray = function(array) { @@ -562,7 +615,7 @@ }; /** - * Creates an array from the current Matrix object + * Creates an array from the current Matrix object. * * @method toArray * @param transpose {Boolean} Whether we need to transpose the matrix or not @@ -570,15 +623,15 @@ */ PIXI.Matrix.prototype.toArray = function(transpose) { - if(!this.array) this.array = new Float32Array(9); + if(!this.array) this.array = new PIXI.Float32Array(9); var array = this.array; if(transpose) { array[0] = this.a; - array[1] = this.c; + array[1] = this.b; array[2] = 0; - array[3] = this.b; + array[3] = this.c; array[4] = this.d; array[5] = 0; array[6] = this.tx; @@ -588,9 +641,9 @@ else { array[0] = this.a; - array[1] = this.b; + array[1] = this.c; array[2] = this.tx; - array[3] = this.c; + array[3] = this.b; array[4] = this.d; array[5] = this.ty; array[6] = 0; @@ -601,27 +654,159 @@ return array; }; -PIXI.identityMatrix = new PIXI.Matrix(); +/** + * Get a new position with the current transformation applied. + * Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering) + * + * @method apply + * @param pos {Point} The origin + * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) + * @return {Point} The new point, transformed through this matrix + */ +PIXI.Matrix.prototype.apply = function(pos, newPos) +{ + newPos = newPos || new PIXI.Point(); -PIXI.determineMatrixArrayType = function() { - return (typeof Float32Array !== 'undefined') ? Float32Array : Array; + newPos.x = this.a * pos.x + this.c * pos.y + this.tx; + newPos.y = this.b * pos.x + this.d * pos.y + this.ty; + + return newPos; }; /** - * The Matrix2 class will choose the best type of array to use between - * a regular javascript Array and a Float32Array if the latter is available + * Get a new position with the inverse of the current transformation applied. + * Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input) * - * @class Matrix2 - * @constructor + * @method applyInverse + * @param pos {Point} The origin + * @param [newPos] {Point} The point that the new position is assigned to (allowed to be same as input) + * @return {Point} The new point, inverse-transformed through this matrix */ -PIXI.Matrix2 = PIXI.determineMatrixArrayType(); +PIXI.Matrix.prototype.applyInverse = function(pos, newPos) +{ + newPos = newPos || new PIXI.Point(); + + var id = 1 / (this.a * this.d + this.c * -this.b); + + newPos.x = this.d * id * pos.x + -this.c * id * pos.y + (this.ty * this.c - this.tx * this.d) * id; + newPos.y = this.a * id * pos.y + -this.b * id * pos.x + (-this.ty * this.a + this.tx * this.b) * id; + + return newPos; +}; + +/** + * Translates the matrix on the x and y. + * + * @method translate + * @param {Number} x + * @param {Number} y + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.translate = function(x, y) +{ + this.tx += x; + this.ty += y; + + return this; +}; + +/** + * Applies a scale transformation to the matrix. + * + * @method scale + * @param {Number} x The amount to scale horizontally + * @param {Number} y The amount to scale vertically + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.scale = function(x, y) +{ + this.a *= x; + this.d *= y; + this.c *= x; + this.b *= y; + this.tx *= x; + this.ty *= y; + + return this; +}; + + +/** + * Applies a rotation transformation to the matrix. + * @method rotate + * @param {Number} angle The angle in radians. + * @return {Matrix} This matrix. Good for chaining method calls. + **/ +PIXI.Matrix.prototype.rotate = function(angle) +{ + var cos = Math.cos( angle ); + var sin = Math.sin( angle ); + + var a1 = this.a; + var c1 = this.c; + var tx1 = this.tx; + + this.a = a1 * cos-this.b * sin; + this.b = a1 * sin+this.b * cos; + this.c = c1 * cos-this.d * sin; + this.d = c1 * sin+this.d * cos; + this.tx = tx1 * cos - this.ty * sin; + this.ty = tx1 * sin + this.ty * cos; + + return this; +}; + +/** + * Appends the given Matrix to this Matrix. + * + * @method append + * @param {Matrix} matrix + * @return {Matrix} This matrix. Good for chaining method calls. + */ +PIXI.Matrix.prototype.append = function(matrix) +{ + var a1 = this.a; + var b1 = this.b; + var c1 = this.c; + var d1 = this.d; + + this.a = matrix.a * a1 + matrix.b * c1; + this.b = matrix.a * b1 + matrix.b * d1; + this.c = matrix.c * a1 + matrix.d * c1; + this.d = matrix.c * b1 + matrix.d * d1; + + this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx; + this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty; + + return this; +}; + +/** + * Resets this Matix to an identity (default) matrix. + * + * @method identity + * @return {Matrix} This matrix. Good for chaining method calls. + */ +PIXI.Matrix.prototype.identity = function() +{ + this.a = 1; + this.b = 0; + this.c = 0; + this.d = 1; + this.tx = 0; + this.ty = 0; + + return this; +}; + +PIXI.identityMatrix = new PIXI.Matrix(); /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * The base class for all objects that are rendered on the screen. + * 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 @@ -741,7 +926,7 @@ /** * 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 * @@ -752,32 +937,28 @@ * [read-only] Current transform of the object based on world (parent) factors * * @property worldTransform - * @type Mat3 + * @type Matrix * @readOnly * @private */ this.worldTransform = new PIXI.Matrix(); /** - * [NYI] Unknown + * cached sin rotation and cos rotation * - * @property color - * @type Array<> + * @property _sr + * @type Number * @private */ - this.color = []; + this._sr = 0; /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * cached sin rotation and cos rotation * - * @property dynamic - * @type Boolean + * @property _cr + * @type Number * @private */ - this.dynamic = true; - - // cached sin rotation and cos rotation - this._sr = 0; this._cr = 1; /** @@ -797,6 +978,7 @@ * @private */ this._bounds = new PIXI.Rectangle(0, 0, 1, 1); + /** * The most up-to-date bounds of the object * @@ -805,6 +987,7 @@ * @private */ this._currentBounds = null; + /** * The original, cached mask of the object * @@ -814,40 +997,29 @@ */ this._mask = null; + /** + * Cached internal flag. + * + * @property _cacheAsBitmap + * @type Boolean + * @private + */ this._cacheAsBitmap = false; + + /** + * Cached internal flag. + * + * @property _cacheIsDirty + * @type Boolean + * @private + */ this._cacheIsDirty = false; /* * MOUSE Callbacks */ - - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ - + /** * A callback that is used when the users mouse rolls over the displayObject * @method mouseover @@ -860,6 +1032,59 @@ * @param interactionData {InteractionData} */ + //Left button + /** + * A callback that is used when the users clicks on the displayObject with their mouse's left button + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse's left button down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * 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 + * @param interactionData {InteractionData} + */ + + /** + * 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 + * @param interactionData {InteractionData} + */ + + //Right button + /** + * A callback that is used when the users clicks on the displayObject with their mouse's right button + * @method rightclick + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse's right button down over the sprite + * @method rightdown + * @param interactionData {InteractionData} + */ + + /** + * 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 + * @param interactionData {InteractionData} + */ + + /** + * 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 + * @param interactionData {InteractionData} + */ /* * TOUCH Callbacks @@ -896,19 +1121,6 @@ PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; /** - * [Deprecated] Indicates if the sprite will have touch and mouse interactivity. It is false by default - * Instead of using this function you can now simply set the interactive property to true or false - * - * @method setInteractive - * @param interactive {Boolean} - * @deprecated Simply set the `interactive` property directly - */ -PIXI.DisplayObject.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; -}; - -/** * Indicates if the sprite will have touch and mouse interactivity. It is false by default * * @property interactive @@ -929,7 +1141,7 @@ }); /** - * [read-only] Indicates if the sprite is globaly visible. + * [read-only] Indicates if the sprite is globally visible. * * @property worldVisible * @type Boolean @@ -977,9 +1189,11 @@ * @type Array An array of filters */ Object.defineProperty(PIXI.DisplayObject.prototype, 'filters', { + get: function() { return this._filters; }, + set: function(value) { if(value) @@ -1004,23 +1218,24 @@ }); /** - * Set weather or not a the display objects 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 filters simply set this property to 'null' + * 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) { if(this._cacheAsBitmap === value)return; if(value) { - //this._cacheIsDirty = true; this._generateCachedSprite(); } else @@ -1040,39 +1255,67 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { + // create some matrix refs for easy access + var pt = this.parent.worldTransform; + var wt = this.worldTransform; - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); + // temporary matrix variables + var a, b, c, d, tx, ty; + + // TODO create a const for 2_PI + // so if rotation is between 0 then we can simplify the multiplication process.. + if(this.rotation % PIXI.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) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + // get the matrix values of the displayobject based on its transform properties.. + a = this._cr * this.scale.x; + b = this._sr * this.scale.x; + c = -this._sr * this.scale.y; + 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) + { + tx -= this.pivot.x * a + this.pivot.y * c; + ty -= this.pivot.x * b + this.pivot.y * d; + } + + // concat the parent matrix with the objects transform. + wt.a = a * pt.a + b * pt.c; + wt.b = a * pt.b + b * pt.d; + wt.c = c * pt.a + d * pt.c; + wt.d = c * pt.b + d * pt.d; + wt.tx = tx * pt.a + ty * pt.c + pt.tx; + wt.ty = tx * pt.b + ty * pt.d + pt.ty; + + + } + else + { + // lets do the fast version as we know there is no rotation.. + a = this.scale.x; + d = this.scale.y; + tx = this.position.x - this.pivot.x * a; + ty = this.position.y - this.pivot.y * d; + + wt.a = pt.a * a; + wt.b = pt.b * d; + wt.c = pt.c * a; + wt.d = pt.d * d; + wt.tx = tx * pt.a + ty * pt.c + pt.tx; + wt.ty = tx * pt.b + ty * pt.d + pt.ty; } - // var localTransform = this.localTransform//.toArray(); - var parentTransform = this.parent.worldTransform;//.toArray(); - var worldTransform = this.worldTransform;//.toArray(); - - var px = this.pivot.x; - var py = this.pivot.y; - - var a00 = this._cr * this.scale.x, - a01 = -this._sr * this.scale.y, - a10 = this._sr * this.scale.x, - a11 = this._cr * this.scale.y, - a02 = this.position.x - a00 * px - py * a01, - a12 = this.position.y - a11 * py - px * a10, - b00 = parentTransform.a, b01 = parentTransform.b, - b10 = parentTransform.c, b11 = parentTransform.d; - - worldTransform.a = b00 * a00 + b01 * a10; - worldTransform.b = b00 * a01 + b01 * a11; - worldTransform.tx = b00 * a02 + b01 * a12 + parentTransform.tx; - - worldTransform.c = b10 * a00 + b11 * a10; - worldTransform.d = b10 * a01 + b11 * a11; - worldTransform.ty = b10 * a02 + b11 * a12 + parentTransform.ty; - + // multiply the alphas.. this.worldAlpha = this.alpha * this.parent.worldAlpha; }; @@ -1080,9 +1323,10 @@ * 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 ) +PIXI.DisplayObject.prototype.getBounds = function(matrix) { matrix = matrix;//just to get passed js hinting (and preserve inheritance) return PIXI.EmptyRectangle; @@ -1099,7 +1343,6 @@ return this.getBounds(PIXI.identityMatrix);///PIXI.EmptyRectangle(); }; - /** * Sets the object's stage reference, the stage this object is connected to * @@ -1112,25 +1355,84 @@ if(this._interactive)this.stage.dirty = true; }; -PIXI.DisplayObject.prototype.generateTexture = function(renderer) +/** + * 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} Should be one of the PIXI.scaleMode consts + * @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) { var bounds = this.getLocalBounds(); - var renderTexture = new PIXI.RenderTexture(bounds.width | 0, bounds.height | 0, renderer); - renderTexture.render(this, new PIXI.Point(-bounds.x, -bounds.y) ); + 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); return renderTexture; }; +/** + * Generates and updates the cached sprite for this object. + * + * @method updateCache + */ PIXI.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) +{ + this.updateTransform(); + return this.worldTransform.apply(position); +}; + +/** + * 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) + { + position = from.toGlobal(position); + } + + this.updateTransform(); + + return this.worldTransform.applyInverse(position); +}; + +/** + * Internal method. + * + * @method _renderCachedSprite + * @param renderSession {Object} The render session + * @private + */ PIXI.DisplayObject.prototype._renderCachedSprite = function(renderSession) { this._cachedSprite.worldAlpha = this.worldAlpha; - + if(renderSession.gl) { PIXI.Sprite.prototype._renderWebGL.call(this._cachedSprite, renderSession); @@ -1141,15 +1443,21 @@ } }; -PIXI.DisplayObject.prototype._generateCachedSprite = function()//renderSession) +/** + * Internal method. + * + * @method _generateCachedSprite + * @private + */ +PIXI.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); - + this._cachedSprite = new PIXI.Sprite(renderTexture); this._cachedSprite.worldTransform = this.worldTransform; } @@ -1163,7 +1471,11 @@ this._filters = null; this._cachedSprite.filters = tempFilters; - this._cachedSprite.texture.render(this, new PIXI.Point(-bounds.x, -bounds.y) ); + + PIXI.DisplayObject._tempMatrix.tx = -bounds.x; + PIXI.DisplayObject._tempMatrix.ty = -bounds.y; + + this._cachedSprite.texture.render(this, PIXI.DisplayObject._tempMatrix ); this._cachedSprite.anchor.x = -( bounds.x / bounds.width ); this._cachedSprite.anchor.y = -( bounds.y / bounds.height ); @@ -1174,10 +1486,9 @@ }; /** -* Renders the object using the WebGL renderer +* Destroys the cached sprite. * -* @method _renderWebGL -* @param renderSession {RenderSession} +* @method _destroyCachedSprite * @private */ PIXI.DisplayObject.prototype._destroyCachedSprite = function() @@ -1185,13 +1496,18 @@ if(!this._cachedSprite)return; this._cachedSprite.texture.destroy(true); - // console.log("DESTROY") - // let the gc collect the unused sprite + // TODO could be object pooled! this._cachedSprite = null; }; - +/** +* Renders the object using the WebGL renderer +* +* @method _renderWebGL +* @param renderSession {RenderSession} +* @private +*/ PIXI.DisplayObject.prototype._renderWebGL = function(renderSession) { // OVERWRITE; @@ -1203,7 +1519,7 @@ * Renders the object using the Canvas renderer * * @method _renderCanvas -* @param renderSession {RenderSession} +* @param renderSession {RenderSession} * @private */ PIXI.DisplayObject.prototype._renderCanvas = function(renderSession) @@ -1213,6 +1529,9 @@ 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. * @@ -1247,7 +1566,6 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * 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. @@ -1280,8 +1598,6 @@ * @property width * @type Number */ - - Object.defineProperty(PIXI.DisplayObjectContainer.prototype, 'width', { get: function() { return this.scale.x * this.getLocalBounds().width; @@ -1304,14 +1620,12 @@ } }); - /** * 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; @@ -1333,12 +1647,12 @@ } }); - /** * 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) { @@ -1351,6 +1665,7 @@ * @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) { @@ -1371,17 +1686,16 @@ } else { - throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + throw new Error(child + 'addChildAt: The index '+ index +' supplied is out of bounds ' + this.children.length); } }; /** - * [NYI] Swaps the depth of 2 displayObjects + * Swaps the position of 2 Display Objects within this container. * * @method swapChildren * @param child {DisplayObject} * @param child2 {DisplayObject} - * @private */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { @@ -1389,8 +1703,8 @@ return; } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); + var index1 = this.getChildIndex(child); + var index2 = this.getChildIndex(child2); if(index1 < 0 || index2 < 0) { throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); @@ -1398,7 +1712,42 @@ 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) +{ + var index = this.children.indexOf(child); + 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) + { + 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 }; /** @@ -1406,17 +1755,16 @@ * * @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) + if (index < 0 || index >= this.children.length) { - return this.children[index]; + 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'); } - else - { - throw new Error('Supplied index does not exist in the child list, or the supplied DisplayObject must be a child of the caller'); - } + return this.children[index]; + }; /** @@ -1424,17 +1772,22 @@ * * @method removeChild * @param child {DisplayObject} The DisplayObject to remove + * @return {DisplayObject} The child that was removed. */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - return this.removeChildAt( this.children.indexOf( child ) ); + var index = this.children.indexOf( child ); + if(index === -1)return; + + return this.removeChildAt( index ); }; /** - * Removes a child from the specified index position in the child list of the container. + * 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) { @@ -1448,11 +1801,11 @@ }; /** -* Removes all child instances from the child list of the container. +* Removes all children from this container that are within the begin and end indexes. * * @method removeChildren -* @param beginIndex {Number} The beginning position. Predefined value is 0. -* @param endIndex {Number} The ending position. Predefined value is children's array length. +* @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) { @@ -1471,22 +1824,24 @@ } return removed; } + else if (range === 0 && this.children.length === 0) + { + return []; + } else { - throw new Error( 'Range Error, numeric values are outside the acceptable range' ); + throw new Error( 'removeChildren: Range Error, numeric values are outside the acceptable range' ); } }; /* - * Updates the container's childrens transform for rendering + * Updates the transform on all children of this container for rendering * * @method updateTransform * @private */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - //this._currentBounds = null; - if(!this.visible)return; PIXI.DisplayObject.prototype.updateTransform.call( this ); @@ -1500,23 +1855,16 @@ }; /** - * Retrieves the bounds of the displayObjectContainer as a rectangle object + * Retrieves the bounds of the displayObjectContainer as a rectangle. The bounds calculation takes all visible children into consideration. * * @method getBounds - * @return {Rectangle} the rectangular bounding area + * @return {Rectangle} The rectangular bounding area */ -PIXI.DisplayObjectContainer.prototype.getBounds = function(matrix) +PIXI.DisplayObjectContainer.prototype.getBounds = function() { if(this.children.length === 0)return PIXI.EmptyRectangle; // TODO the bounds have already been calculated this render session so return what we have - if(matrix) - { - var matrixCache = this.worldTransform; - this.worldTransform = matrix; - this.updateTransform(); - this.worldTransform = matrixCache; - } var minX = Infinity; var minY = Infinity; @@ -1538,7 +1886,7 @@ childVisible = true; - childBounds = this.children[i].getBounds( matrix ); + childBounds = this.children[i].getBounds(); minX = minX < childBounds.x ? minX : childBounds.x; minY = minY < childBounds.y ? minY : childBounds.y; @@ -1566,6 +1914,12 @@ return bounds; }; +/** + * 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() { var matrixCache = this.worldTransform; @@ -1585,7 +1939,7 @@ }; /** - * Sets the container's stage reference, the stage this object is connected to + * Sets the containers Stage reference. This is the Stage that this object, and all of its children, is connected to. * * @method setStageReference * @param stage {Stage} the stage that the container will have as its current stage reference @@ -1603,7 +1957,7 @@ }; /** - * removes the current stage reference of the container + * Removes the current stage reference from the container and all of its children. * * @method removeStageReference */ @@ -1700,7 +2054,7 @@ if(this._mask) { - renderSession.maskManager.pushMask(this._mask, renderSession.context); + renderSession.maskManager.pushMask(this._mask, renderSession); } for(var i=0,j=this.children.length; i baseline; i--) + { + for(j = 0; j < line; j += 4) + { + if(imagedata[idx + j] !== 255) + { + stop = true; + break; + } + } + if(!stop) + { + idx -= line; + } + else + { + break; + } + } + + properties.descent = i - baseline; + properties.fontSize = properties.ascent + properties.descent; + + PIXI.Text.fontPropertiesCache[fontStyle] = properties; } - return result; + return properties; }; /** @@ -2958,7 +3427,7 @@ }; /** - * Destroys this text object + * Destroys this text object. * * @method destroy * @param destroyBaseTexture {Boolean} whether to destroy the base texture as well @@ -2972,14 +3441,16 @@ this.texture.destroy(destroyBaseTexture === undefined ? true : destroyBaseTexture); }; -PIXI.Text.heightCache = {}; +PIXI.Text.fontPropertiesCache = {}; +PIXI.Text.fontPropertiesCanvas = document.createElement('canvas'); +PIXI.Text.fontPropertiesContext = PIXI.Text.fontPropertiesCanvas.getContext('2d'); /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * A Text Object will create a line(s) of text using bitmap font. To split a line you can use '\n', '\r' or '\r\n' + * A BitmapText object will create a line or multiple lines of text using bitmap font. To split a line you can use '\n', '\r' or '\r\n' in your string. * You can generate the fnt files using * http://www.angelcode.com/products/bmfont/ for windows or * http://www.bmglyph.com/ for mac. @@ -2996,11 +3467,42 @@ { PIXI.DisplayObjectContainer.call(this); + /** + * [read-only] The width of the overall text, different from fontSize, + * which is defined in the style object + * + * @property textWidth + * @type Number + * @readOnly + */ + this.textWidth = 0; + + /** + * [read-only] The height of the overall text, different from fontSize, + * which is defined in the style object + * + * @property textHeight + * @type Number + * @readOnly + */ + this.textHeight = 0; + + /** + * @property _pool + * @type Array + * @private + */ this._pool = []; this.setText(text); this.setStyle(style); this.updateText(); + + /** + * The dirty state of this object. + * @property dirty + * @type Boolean + */ this.dirty = false; }; @@ -3009,10 +3511,10 @@ PIXI.BitmapText.prototype.constructor = PIXI.BitmapText; /** - * Set the copy for the text object + * Set the text string to be rendered. * * @method setText - * @param text {String} The copy that you would like the text to display + * @param text {String} The text that you would like displayed */ PIXI.BitmapText.prototype.setText = function(text) { @@ -3023,7 +3525,7 @@ /** * Set the style of the text * style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously) - * [style.align='left'] {String} Alignment for multiline text ('left', 'center' or 'right'), does not affect single line text + * [style.align='left'] {String} Alignment for multiline text ('left', 'center' or 'right'), does not affect single lines of text * * @method setStyle * @param style {Object} The style parameters, contained as properties of an object @@ -3058,11 +3560,11 @@ var lineWidths = []; var line = 0; var scale = this.fontSize / data.size; - for(var i = 0; i < this.text.length; i++) { var charCode = this.text.charCodeAt(i); + if(/(?:\r\n|\r|\n)/.test(this.text.charAt(i))) { lineWidths.push(pos.x); @@ -3076,12 +3578,14 @@ } var charData = data.chars[charCode]; + if(!charData) continue; - if(prevCharCode && charData[prevCharCode]) + if(prevCharCode && charData.kerning[prevCharCode]) { pos.x += charData.kerning[prevCharCode]; } + chars.push({texture:charData.texture, line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); pos.x += charData.xAdvance; @@ -3092,6 +3596,7 @@ maxLineWidth = Math.max(maxLineWidth, pos.x); var lineAlignOffsets = []; + for(i = 0; i <= line; i++) { var alignOffset = 0; @@ -3109,6 +3614,7 @@ var lenChildren = this.children.length; var lenChars = chars.length; var tint = this.tint || 0xFFFFFF; + for(i = 0; i < lenChars; i++) { var c = i < lenChildren ? this.children[i] : this._pool.pop(); // get old child if have. if not - take from pool. @@ -3132,23 +3638,7 @@ this.removeChild(child); } - - /** - * [read-only] The width of the overall text, different from fontSize, - * which is defined in the style object - * - * @property textWidth - * @type Number - */ this.textWidth = maxLineWidth * scale; - - /** - * [read-only] The height of the overall text, different from fontSize, - * which is defined in the style object - * - * @property textHeight - * @type Number - */ this.textHeight = (pos.y + data.lineHeight) * scale; }; @@ -3174,7 +3664,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * Holds all information related to an Interaction event * @@ -3191,7 +3681,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * @@ -3214,9 +3703,10 @@ * * @method getLocalPosition * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @param [point] {Point} A Point object in which to store the value, optional (otherwise will create a new point) * @return {Point} A point containing the coordinates of the InteractionData position relative to the DisplayObject */ -PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject, point) { var worldTransform = displayObject.worldTransform; var global = this.global; @@ -3225,13 +3715,19 @@ var a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx, a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty, id = 1 / (a00 * a11 + a01 * -a10); + + point = point || new PIXI.Point(); + + point.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + point.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); + return point; }; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -3248,7 +3744,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -3256,7 +3752,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -3264,18 +3760,21 @@ this.mouse = new PIXI.InteractionData(); /** - * an object that stores current touches (InteractionData) by id reference + * An object that stores current touches (InteractionData) by id reference * - * @property touchs + * @property touches * @type Object */ - this.touchs = {}; + this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -3283,8 +3782,8 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! - * + * Tiny little interactiveData pool ! + * * @property pool * @type Array */ @@ -3295,7 +3794,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -3307,23 +3805,60 @@ */ this.interactionDOMElement = null; - //this will make it so that you dont have to call bind all the time + //this will make it so that you don't have to call bind all the time + + /** + * @property onMouseMove + * @type Function + */ this.onMouseMove = this.onMouseMove.bind( this ); + + /** + * @property onMouseDown + * @type Function + */ this.onMouseDown = this.onMouseDown.bind(this); + + /** + * @property onMouseOut + * @type Function + */ this.onMouseOut = this.onMouseOut.bind(this); + + /** + * @property onMouseUp + * @type Function + */ this.onMouseUp = this.onMouseUp.bind(this); + /** + * @property onTouchStart + * @type Function + */ this.onTouchStart = this.onTouchStart.bind(this); + + /** + * @property onTouchEnd + * @type Function + */ this.onTouchEnd = this.onTouchEnd.bind(this); + + /** + * @property onTouchMove + * @type Function + */ this.onTouchMove = this.onTouchMove.bind(this); + /** + * @property last + * @type Number + */ this.last = 0; /** * The css style of the cursor that is being used * @property currentCursorStyle * @type String - * */ this.currentCursorStyle = 'inherit'; @@ -3331,9 +3866,14 @@ * Is set to true when the mouse is moved out of the canvas * @property mouseOut * @type Boolean - * */ this.mouseOut = false; + + /** + * @property resolution + * @type Number + */ + this.resolution = 1; }; // constructor @@ -3353,27 +3893,25 @@ var length = children.length; // make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) + for (var i = length - 1; i >= 0; i--) { var child = children[i]; // push all interactive bits - if(child._interactive) + if (child._interactive) { iParent.interactiveChildren = true; //child.__iParent = iParent; this.interactiveItems.push(child); - if(child.children.length > 0) - { + if (child.children.length > 0) { this.collectInteractiveSprite(child, child); } } else { child.__iParent = null; - - if(child.children.length > 0) + if (child.children.length > 0) { this.collectInteractiveSprite(child, iParent); } @@ -3392,17 +3930,14 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; + this.resolution = target.resolution; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + // Check if the dom element has been set. If it has don't do anything. + if (this.interactionDOMElement !== null) return; - this.setTargetDomElement( target.view ); - } - - + this.setTargetDomElement (target.view); }; - /** * Sets the DOM element which will receive mouse/touch events. This is useful for when you have other DOM * elements on top of the renderers Canvas element. With this you'll be able to delegate another DOM element @@ -3414,17 +3949,13 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - this.removeEvents(); - if (window.navigator.msPointerEnabled) { // time to remove some of that zoom in ja.. domElement.style['-ms-content-zooming'] = 'none'; domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! } this.interactionDOMElement = domElement; @@ -3441,10 +3972,13 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { - if(!this.interactionDOMElement)return; + if (!this.interactionDOMElement) return; this.interactionDOMElement.style['-ms-content-zooming'] = ''; this.interactionDOMElement.style['-ms-touch-action'] = ''; @@ -3471,13 +4005,13 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; + if (!this.target) return; // frequency of 30fps?? var now = Date.now(); var diff = now - this.last; diff = (diff * PIXI.INTERACTION_FREQUENCY ) / 1000; - if(diff < 1)return; + if (diff < 1) return; this.last = now; var i = 0; @@ -3485,7 +4019,7 @@ // ok.. so mouse events?? // yes for now :) // OPTIMISE - how often to check?? - if(this.dirty) + if (this.dirty) { this.rebuildInteractiveGraph(); } @@ -3502,43 +4036,56 @@ // OPTIMISATION - only calculate every time if the mousemove function exists.. // OK so.. does the object have any other interactive functions? // hit-test the clip! - // if(item.mouseover || item.mouseout || item.buttonMode) + // if (item.mouseover || item.mouseout || item.buttonMode) // { // ok so there are some functions so lets hit test it.. item.__hit = this.hitTest(item, this.mouse); this.mouse.target = item; // ok so deal with interactions.. // looks like there was a hit! - if(item.__hit && !over) + if (item.__hit && !over) { - if(item.buttonMode) cursor = item.defaultCursor; + if (item.buttonMode) cursor = item.defaultCursor; - if(!item.interactiveChildren)over = true; - - if(!item.__isOver) + if (!item.interactiveChildren) { - if(item.mouseover)item.mouseover(this.mouse); + over = true; + } + + if (!item.__isOver) + { + if (item.mouseover) + { + item.mouseover (this.mouse); + } item.__isOver = true; } } else { - if(item.__isOver) + if (item.__isOver) { // roll out! - if(item.mouseout)item.mouseout(this.mouse); + if (item.mouseout) + { + item.mouseout (this.mouse); + } item.__isOver = false; } } } - if( this.currentCursorStyle !== cursor ) + if (this.currentCursorStyle !== cursor) { this.currentCursorStyle = cursor; this.interactionDOMElement.style.cursor = cursor; } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -3551,8 +4098,12 @@ this.interactiveItems = []; - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. + if (this.stage.interactive) + { + this.interactiveItems.push(this.stage); + } + + // Go through and collect all the objects that are interactive.. this.collectInteractiveSprite(this.stage, this.stage); }; @@ -3565,17 +4116,18 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - if(this.dirty) + if (this.dirty) { this.rebuildInteractiveGraph(); } - this.mouse.originalEvent = event || window.event; //IE uses window.event + this.mouse.originalEvent = event; + // TODO optimize by not check EVERY TIME! maybe half as often? // var rect = this.interactionDOMElement.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width) / this.resolution; + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height) / this.resolution; var length = this.interactiveItems.length; @@ -3583,9 +4135,9 @@ { var item = this.interactiveItems[i]; - if(item.mousemove) + // Call the function! + if (item.mousemove) { - //call the function! item.mousemove(this.mouse); } } @@ -3600,14 +4152,17 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - if(this.dirty) + if (this.dirty) { this.rebuildInteractiveGraph(); } - this.mouse.originalEvent = event || window.event; //IE uses window.event + this.mouse.originalEvent = event; - if(PIXI.AUTO_PREVENT_DEFAULT)this.mouse.originalEvent.preventDefault(); + if (PIXI.AUTO_PREVENT_DEFAULT) + { + this.mouse.originalEvent.preventDefault(); + } // loop through interaction tree... // hit test each item! -> @@ -3615,44 +4170,56 @@ //stage.__i var length = this.interactiveItems.length; + var e = this.mouse.originalEvent; + var isRightButton = e.button === 2 || e.which === 3; + var downFunction = isRightButton ? 'rightdown' : 'mousedown'; + var clickFunction = isRightButton ? 'rightclick' : 'click'; + var buttonIsDown = isRightButton ? '__rightIsDown' : '__mouseIsDown'; + var isDown = isRightButton ? '__isRightDown' : '__isDown'; + // while // hit test for (var i = 0; i < length; i++) { var item = this.interactiveItems[i]; - if(item.mousedown || item.click) + if (item[downFunction] || item[clickFunction]) { - item.__mouseIsDown = true; + item[buttonIsDown] = true; item.__hit = this.hitTest(item, this.mouse); - if(item.__hit) + if (item.__hit) { //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; + if (item[downFunction]) + { + item[downFunction](this.mouse); + } + item[isDown] = true; // just the one! - if(!item.interactiveChildren)break; + if (!item.interactiveChildren) break; } } } }; /** - * Is called when the mouse button is moved out of the renderer element + * Is called when the mouse is moved out of the renderer element * * @method onMouseOut - * @param event {Event} The DOM event of a mouse button being moved out - * @private + * @param event {Event} The DOM event of a mouse being moved out + * @private */ -PIXI.InteractionManager.prototype.onMouseOut = function() +PIXI.InteractionManager.prototype.onMouseOut = function(event) { - if(this.dirty) + if (this.dirty) { this.rebuildInteractiveGraph(); } + this.mouse.originalEvent = event; + var length = this.interactiveItems.length; this.interactionDOMElement.style.cursor = 'inherit'; @@ -3660,10 +4227,13 @@ for (var i = 0; i < length; i++) { var item = this.interactiveItems[i]; - if(item.__isOver) + if (item.__isOver) { this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); + if (item.mouseout) + { + item.mouseout(this.mouse); + } item.__isOver = false; } } @@ -3684,46 +4254,62 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.dirty) + if (this.dirty) { this.rebuildInteractiveGraph(); } - this.mouse.originalEvent = event || window.event; //IE uses window.event + this.mouse.originalEvent = event; var length = this.interactiveItems.length; var up = false; + var e = this.mouse.originalEvent; + var isRightButton = e.button === 2 || e.which === 3; + + var upFunction = isRightButton ? 'rightup' : 'mouseup'; + var clickFunction = isRightButton ? 'rightclick' : 'click'; + var upOutsideFunction = isRightButton ? 'rightupoutside' : 'mouseupoutside'; + var isDown = isRightButton ? '__isRightDown' : '__isDown'; + for (var i = 0; i < length; i++) { var item = this.interactiveItems[i]; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) + if (item[clickFunction] || item[upFunction] || item[upOutsideFunction]) { - //call the function! - if(item.mouseup) + item.__hit = this.hitTest(item, this.mouse); + + if (item.__hit && !up) { - item.mouseup(this.mouse); + //call the function! + if (item[upFunction]) + { + item[upFunction](this.mouse); + } + if (item[isDown]) + { + if (item[clickFunction]) + { + item[clickFunction](this.mouse); + } + } + + if (!item.interactiveChildren) + { + up = true; + } } - if(item.__isDown) + else { - if(item.click)item.click(this.mouse); + if (item[isDown]) + { + if (item[upOutsideFunction]) item[upOutsideFunction](this.mouse); + } } - if(!item.interactiveChildren)up = true; + item[isDown] = false; } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - //} } }; @@ -3739,44 +4325,48 @@ { var global = interactionData.global; - if( !item.worldVisible )return false; + if (!item.worldVisible) + { + return false; + } // temp fix for if the element is in a non visible - - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform.a, a01 = worldTransform.b, a02 = worldTransform.tx, - a10 = worldTransform.c, a11 = worldTransform.d, a12 = worldTransform.ty, - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var worldTransform = item.worldTransform, i, + a = worldTransform.a, b = worldTransform.b, + c = worldTransform.c, tx = worldTransform.tx, + d = worldTransform.d, ty = worldTransform.ty, + + id = 1 / (a * d + c * -b), + x = d * id * global.x + -c * id * global.y + (ty * c - tx * d) * id, + y = a * id * global.y + -b * id * global.x + (-ty * a + tx * b) * id; + interactionData.target = item; //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) + if (item.hitArea && item.hitArea.contains) + { + if (item.hitArea.contains(x, y)) + { interactionData.target = item; - return true; } - return false; } // a sprite with no hitarea defined - else if(isSprite) + else if(item instanceof PIXI.Sprite) { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; + var width = item.texture.frame.width; + var height = item.texture.frame.height; + var x1 = -width * item.anchor.x; + var y1; - if(x > x1 && x < x1 + width) + if (x > x1 && x < x1 + width) { y1 = -height * item.anchor.y; - if(y > y1 && y < y1 + height) + if (y > y1 && y < y1 + height) { // set the target property if a hit is true! interactionData.target = item; @@ -3784,21 +4374,39 @@ } } } + else if(item instanceof PIXI.Graphics) + { + var graphicsData = item.graphicsData; + for (i = 0; i < graphicsData.length; i++) + { + var data = graphicsData[i]; + if(!data.fill)continue; + + // only deal with fills.. + if(data.shape) + { + if(data.shape.contains(x, y)) + { + interactionData.target = item; + return true; + } + } + } + } var length = item.children.length; - for (var i = 0; i < length; i++) + for (i = 0; i < length; i++) { var tempItem = item.children[i]; var hit = this.hitTest(tempItem, interactionData); - if(hit) + if (hit) { // hmm.. TODO SET CORRECT TARGET? interactionData.target = item; return true; } } - return false; }; @@ -3811,7 +4419,7 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - if(this.dirty) + if (this.dirty) { this.rebuildInteractiveGraph(); } @@ -3824,13 +4432,15 @@ for (i = 0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; + touchData = this.touches[touchEvent.identifier]; + touchData.originalEvent = event; // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(navigator.isCocoonJS) { + touchData.global.x = ( (touchEvent.clientX - rect.left) * (this.target.width / rect.width) ) / this.resolution; + touchData.global.y = ( (touchEvent.clientY - rect.top) * (this.target.height / rect.height) ) / this.resolution; + if (navigator.isCocoonJS && !rect.left && !rect.top && !event.target.style.width && !event.target.style.height) + { + //Support for CocoonJS fullscreen scale modes touchData.global.x = touchEvent.clientX; touchData.global.y = touchEvent.clientY; } @@ -3838,7 +4448,10 @@ for (var j = 0; j < this.interactiveItems.length; j++) { var item = this.interactiveItems[j]; - if(item.touchmove && item.__touchData && item.__touchData[touchEvent.identifier]) item.touchmove(touchData); + if (item.touchmove && item.__touchData && item.__touchData[touchEvent.identifier]) + { + item.touchmove(touchData); + } } } }; @@ -3852,29 +4465,37 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - if(this.dirty) + if (this.dirty) { this.rebuildInteractiveGraph(); } var rect = this.interactionDOMElement.getBoundingClientRect(); - if(PIXI.AUTO_PREVENT_DEFAULT)event.preventDefault(); - + if (PIXI.AUTO_PREVENT_DEFAULT) + { + event.preventDefault(); + } + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); + if (!touchData) + { + touchData = new PIXI.InteractionData(); + } - touchData.originalEvent = event || window.event; + touchData.originalEvent = event; - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(navigator.isCocoonJS) { + this.touches[touchEvent.identifier] = touchData; + touchData.global.x = ( (touchEvent.clientX - rect.left) * (this.target.width / rect.width) ) / this.resolution; + touchData.global.y = ( (touchEvent.clientY - rect.top) * (this.target.height / rect.height) ) / this.resolution; + if (navigator.isCocoonJS && !rect.left && !rect.top && !event.target.style.width && !event.target.style.height) + { + //Support for CocoonJS fullscreen scale modes touchData.global.x = touchEvent.clientX; touchData.global.y = touchEvent.clientY; } @@ -3885,19 +4506,19 @@ { var item = this.interactiveItems[j]; - if(item.touchstart || item.tap) + if (item.touchstart || item.tap) { item.__hit = this.hitTest(item, touchData); - if(item.__hit) + if (item.__hit) { //call the function! - if(item.touchstart)item.touchstart(touchData); + if (item.touchstart)item.touchstart(touchData); item.__isDown = true; item.__touchData = item.__touchData || {}; item.__touchData[touchEvent.identifier] = touchData; - if(!item.interactiveChildren)break; + if (!item.interactiveChildren) break; } } } @@ -3913,23 +4534,24 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - if(this.dirty) + if (this.dirty) { this.rebuildInteractiveGraph(); } - - //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; + var touchData = this.touches[touchEvent.identifier]; var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(navigator.isCocoonJS) { + touchData.global.x = ( (touchEvent.clientX - rect.left) * (this.target.width / rect.width) ) / this.resolution; + touchData.global.y = ( (touchEvent.clientY - rect.top) * (this.target.height / rect.height) ) / this.resolution; + if (navigator.isCocoonJS && !rect.left && !rect.top && !event.target.style.width && !event.target.style.height) + { + //Support for CocoonJS fullscreen scale modes touchData.global.x = touchEvent.clientX; touchData.global.y = touchEvent.clientY; } @@ -3939,31 +4561,37 @@ { var item = this.interactiveItems[j]; - if(item.__touchData && item.__touchData[touchEvent.identifier]) { + if (item.__touchData && item.__touchData[touchEvent.identifier]) + { item.__hit = this.hitTest(item, item.__touchData[touchEvent.identifier]); // so this one WAS down... - touchData.originalEvent = event || window.event; + touchData.originalEvent = event; // hitTest?? - if(item.touchend || item.tap) + if (item.touchend || item.tap) { - if(item.__hit && !up) + if (item.__hit && !up) { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) + if (item.touchend) { - if(item.tap)item.tap(touchData); + item.touchend(touchData); } - - if(!item.interactiveChildren)up = true; + if (item.__isDown && item.tap) + { + item.tap(touchData); + } + if (!item.interactiveChildren) + { + up = true; + } } else { - if(item.__isDown) + if (item.__isDown && item.touchendoutside) { - if(item.touchendoutside)item.touchendoutside(touchData); + item.touchendoutside(touchData); } } @@ -3975,7 +4603,7 @@ } // remove the touch.. this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; + this.touches[touchEvent.identifier] = null; } }; @@ -4007,7 +4635,7 @@ * [read-only] Current transform of the object based on world (parent) factors * * @property worldTransform - * @type Mat3 + * @type Matrix * @readOnly * @private */ @@ -4042,7 +4670,7 @@ this.stage = this; //optimize hit detection a bit - this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); + this.stage.hitArea = new PIXI.Rectangle(0, 0, 100000, 100000); this.setBackgroundColor(backgroundColor); }; @@ -4105,10 +4733,10 @@ }; /** - * This will return the point containing global coords of the mouse. + * This will return the point containing global coordinates of the mouse. * * @method getMousePosition - * @return {Point} The point containing the coords of the global InteractionData position. + * @return {Point} A point containing the coordinates of the global InteractionData position. */ PIXI.Stage.prototype.getMousePosition = function() { @@ -4133,37 +4761,40 @@ * * @method requestAnimationFrame */ + /** * A polyfill for cancelAnimationFrame * * @method cancelAnimationFrame */ -var lastTime = 0; -var vendors = ['ms', 'moz', 'webkit', 'o']; -for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { - window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']; - window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || - window[vendors[x] + 'CancelRequestAnimationFrame']; -} +(function(window) { + var lastTime = 0; + var vendors = ['ms', 'moz', 'webkit', 'o']; + for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { + window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || + window[vendors[x] + 'CancelRequestAnimationFrame']; + } -if (!window.requestAnimationFrame) { - window.requestAnimationFrame = function(callback) { - var currTime = new Date().getTime(); - var timeToCall = Math.max(0, 16 - (currTime - lastTime)); - var id = window.setTimeout(function() { callback(currTime + timeToCall); }, - timeToCall); - lastTime = currTime + timeToCall; - return id; - }; -} + if (!window.requestAnimationFrame) { + window.requestAnimationFrame = function(callback) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, + timeToCall); + lastTime = currTime + timeToCall; + return id; + }; + } -if (!window.cancelAnimationFrame) { - window.cancelAnimationFrame = function(id) { - clearTimeout(id); - }; -} + if (!window.cancelAnimationFrame) { + window.cancelAnimationFrame = function(id) { + clearTimeout(id); + }; + } -window.requestAnimFrame = window.requestAnimationFrame; + window.requestAnimFrame = window.requestAnimationFrame; +})(this); /** * Converts a hex color number to an [R, G, B] array @@ -4192,15 +4823,21 @@ */ if (typeof Function.prototype.bind !== 'function') { Function.prototype.bind = (function () { - var slice = Array.prototype.slice; return function (thisArg) { - var target = this, boundArgs = slice.call(arguments, 1); + var target = this, i = arguments.length - 1, boundArgs = []; + if (i > 0) + { + boundArgs.length = i; + while (i--) boundArgs[i] = arguments[i + 1]; + } if (typeof target !== 'function') throw new TypeError(); function bound() { - var args = boundArgs.concat(slice.call(arguments)); - target.apply(this instanceof bound ? this : thisArg, args); + var i = arguments.length, args = new Array(i); + while (i--) args[i] = arguments[i]; + args = boundArgs.concat(args); + return target.apply(this instanceof bound ? this : thisArg, args); } bound.prototype = (function F(proto) { @@ -4281,6 +4918,7 @@ */ PIXI.canUseNewCanvasBlendModes = function() { + if (typeof document === 'undefined') return false; var canvas = document.createElement('canvas'); canvas.width = 1; canvas.height = 1; @@ -4315,115 +4953,287 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * https://github.com/mrdoob/eventtarget.js/ - * THankS mr DOob! + * @author Chad Engler https://github.com/englercj @Rolnaaba */ /** - * Adds event emitter functionality to a class + * Originally based on https://github.com/mrdoob/eventtarget.js/ from mr Doob. + * Currently takes inspiration from the nodejs EventEmitter, EventEmitter3, and smokesignals + */ + +/** + * Mixins event emitter functionality to a class * * @class EventTarget * @example - * function MyEmitter() { - * PIXI.EventTarget.call(this); //mixes in event target stuff - * } + * function MyEmitter() {} + * + * PIXI.EventTarget.mixin(MyEmitter.prototype); * * var em = new MyEmitter(); - * em.emit({ type: 'eventName', data: 'some data' }); + * em.emit('eventName', 'some data', 'some more data', {}, null, ...); */ -PIXI.EventTarget = function () { +PIXI.EventTarget = { + /** + * Backward compat from when this used to be a function + */ + call: function callCompat(obj) { + if(obj) { + obj = obj.prototype || obj; + PIXI.EventTarget.mixin(obj); + } + }, /** - * Holds all the listeners + * Mixes in the properties of the EventTarget prototype onto another object * - * @property listeners + * @method mixin + * @param object {Object} The obj to mix into + */ + mixin: function mixin(obj) { + /** + * Return a list of assigned event listeners. + * + * @method listeners + * @param eventName {String} The events that should be listed. + * @returns {Array} An array of listener functions + */ + obj.listeners = function listeners(eventName) { + this._listeners = this._listeners || {}; + + return this._listeners[eventName] ? this._listeners[eventName].slice() : []; + }; + + /** + * Emit an event to all registered event listeners. + * + * @method emit + * @alias dispatchEvent + * @param eventName {String} The name of the event. + * @returns {Boolean} Indication if we've emitted an event. + */ + obj.emit = obj.dispatchEvent = function emit(eventName, data) { + this._listeners = this._listeners || {}; + + //backwards compat with old method ".emit({ type: 'something' })" + if(typeof eventName === 'object') { + data = eventName; + eventName = eventName.type; + } + + //ensure we are using a real pixi event + if(!data || data.__isEventObject !== true) { + data = new PIXI.Event(this, eventName, data); + } + + //iterate the listeners + if(this._listeners && this._listeners[eventName]) { + var listeners = this._listeners[eventName], + length = listeners.length, + fn = listeners[0], + i; + + for(i = 0; i < length; fn = listeners[++i]) { + //call the event listener + fn.call(this, data); + + //if "stopImmediatePropagation" is called, stop calling sibling events + if(data.stoppedImmediate) { + return this; + } + } + + //if "stopPropagation" is called then don't bubble the event + if(data.stopped) { + return this; + } + } + + //bubble this event up the scene graph + if(this.parent && this.parent.emit) { + this.parent.emit.call(this.parent, eventName, data); + } + + return this; + }; + + /** + * Register a new EventListener for the given event. + * + * @method on + * @alias addEventListener + * @param eventName {String} Name of the event. + * @param callback {Functon} fn Callback function. + */ + obj.on = obj.addEventListener = function on(eventName, fn) { + this._listeners = this._listeners || {}; + + (this._listeners[eventName] = this._listeners[eventName] || []) + .push(fn); + + return this; + }; + + /** + * Add an EventListener that's only called once. + * + * @method once + * @param eventName {String} Name of the event. + * @param callback {Function} Callback function. + */ + obj.once = function once(eventName, fn) { + this._listeners = this._listeners || {}; + + var self = this; + function onceHandlerWrapper() { + fn.apply(self.off(eventName, onceHandlerWrapper), arguments); + } + onceHandlerWrapper._originalHandler = fn; + + return this.on(eventName, onceHandlerWrapper); + }; + + /** + * Remove event listeners. + * + * @method off + * @alias removeEventListener + * @param eventName {String} The event we want to remove. + * @param callback {Function} The listener that we need to find. + */ + obj.off = obj.removeEventListener = function off(eventName, fn) { + this._listeners = this._listeners || {}; + + if(!this._listeners[eventName]) + return this; + + var list = this._listeners[eventName], + i = fn ? list.length : 0; + + while(i-- > 0) { + if(list[i] === fn || list[i]._originalHandler === fn) { + list.splice(i, 1); + } + } + + if(list.length === 0) { + delete this._listeners[eventName]; + } + + return this; + }; + + /** + * Remove all listeners or only the listeners for the specified event. + * + * @method removeAllListeners + * @param eventName {String} The event you want to remove all listeners for. + */ + obj.removeAllListeners = function removeAllListeners(eventName) { + this._listeners = this._listeners || {}; + + if(!this._listeners[eventName]) + return this; + + delete this._listeners[eventName]; + + return this; + }; + } +}; + +/** + * Creates an homogenous object for tracking events so users can know what to expect. + * + * @class Event + * @extends Object + * @constructor + * @param target {Object} The target object that the event is called on + * @param name {String} The string name of the event that was triggered + * @param data {Object} Arbitrary event data to pass along + */ +PIXI.Event = function(target, name, data) { + //for duck typing in the ".on()" function + this.__isEventObject = true; + + /** + * Tracks the state of bubbling propagation. Do not + * set this directly, instead use `event.stopPropagation()` + * + * @property stopped + * @type Boolean + * @private + * @readOnly + */ + this.stopped = false; + + /** + * Tracks the state of sibling listener propagation. Do not + * set this directly, instead use `event.stopImmediatePropagation()` + * + * @property stoppedImmediate + * @type Boolean + * @private + * @readOnly + */ + this.stoppedImmediate = false; + + /** + * The original target the event triggered on. + * + * @property target * @type Object + * @readOnly */ - var listeners = {}; + this.target = target; /** - * Adds a listener for a specific event + * The string name of the event that this represents. * - * @method addEventListener - * @param type {string} A string representing the event type to listen for. - * @param listener {function} The callback function that will be fired when the event occurs + * @property type + * @type String + * @readOnly */ - this.addEventListener = this.on = function ( type, listener ) { - - - if ( listeners[ type ] === undefined ) { - - listeners[ type ] = []; - - } - - if ( listeners[ type ].indexOf( listener ) === - 1 ) { - - listeners[ type ].unshift( listener ); - } - - }; + this.type = name; /** - * Fires the event, ie pretends that the event has happened + * The data that was passed in with this event. * - * @method dispatchEvent - * @param event {Event} the event object + * @property data + * @type Object + * @readOnly */ - this.dispatchEvent = this.emit = function ( event ) { + this.data = data; - if ( !listeners[ event.type ] || !listeners[ event.type ].length ) { - - return; - - } - - - for(var i = listeners[ event.type ].length-1; i >= 0; i--) { -// for(var i = 0, l=listeners[ event.type ].length; i < l; i++) { - - - listeners[ event.type ][ i ]( event ); - - } - - }; + //backwards compat with older version of events + this.content = data; /** - * Removes the specified listener that was assigned to the specified event type + * The timestamp when the event occurred. * - * @method removeEventListener - * @param type {string} A string representing the event type which will have its listener removed - * @param listener {function} The callback function that was be fired when the event occured + * @property timeStamp + * @type Number + * @readOnly */ - this.removeEventListener = this.off = function ( type, listener ) { + this.timeStamp = Date.now(); +}; - if ( listeners[ type ] === undefined ) return; +/** + * Stops the propagation of events up the scene graph (prevents bubbling). + * + * @method stopPropagation + */ +PIXI.Event.prototype.stopPropagation = function stopPropagation() { + this.stopped = true; +}; - var index = listeners[ type ].indexOf( listener ); - - if ( index !== - 1 ) { - - listeners[ type ].splice( index, 1 ); - - } - - }; - - /** - * Removes all the listeners that were active for the specified event type - * - * @method removeAllEventListeners - * @param type {string} A string representing the event type which will have all its listeners removed - */ - this.removeAllEventListeners = function( type ) { - var a = listeners[type]; - if (a) - a.length = 0; - }; +/** + * Stops the propagation of events to sibling listeners (no longer calls any listeners). + * + * @method stopImmediatePropagation + */ +PIXI.Event.prototype.stopImmediatePropagation = function stopImmediatePropagation() { + this.stoppedImmediate = true; }; /** @@ -4438,12 +5248,16 @@ * @static * @param width=800 {Number} the width of the renderers view * @param height=600 {Number} the height of the renderers view - * @param [view] {Canvas} the canvas to use as a view, optional - * @param [transparent=false] {Boolean} the transparency of the render view, default false - * @param [antialias=false] {Boolean} sets antialias (only applicable in webGL chrome at the moment) - * + * + * @param [options] {Object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {Boolean} If the render view is transparent, default false + * @param [options.antialias=false] {Boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {Boolean} enables drawing buffer preservation, enable this if you need to call toDataUrl on the webgl context + * @param [options.resolution=1] {Number} the resolution of the renderer retina would be 2 + * */ -PIXI.autoDetectRenderer = function(width, height, view, transparent, antialias) +PIXI.autoDetectRenderer = function(width, height, options) { if(!width)width = 800; if(!height)height = 600; @@ -4459,27 +5273,32 @@ if( webgl ) { - return new PIXI.WebGLRenderer(width, height, view, transparent, antialias); + return new PIXI.WebGLRenderer(width, height, options); } - return new PIXI.CanvasRenderer(width, height, view, transparent); + return new PIXI.CanvasRenderer(width, height, options); }; /** * This helper function will automatically detect which renderer you should be using. * This function is very similar to the autoDetectRenderer function except that is will return a canvas renderer for android. - * Even thought both android chrome suports webGL the canvas implementation perform better at the time of writing. - * This function will likely change and update as webGL performance imporoves on thease devices. - * @class getRecommendedRenderer + * Even thought both android chrome supports webGL the canvas implementation perform better at the time of writing. + * This function will likely change and update as webGL performance improves on these devices. + * + * @class autoDetectRecommendedRenderer * @static * @param width=800 {Number} the width of the renderers view * @param height=600 {Number} the height of the renderers view - * @param [view] {Canvas} the canvas to use as a view, optional - * @param [transparent=false] {Boolean} the transparency of the render view, default false - * @param [antialias=false] {Boolean} sets antialias (only applicable in webGL chrome at the moment) - * + * + * @param [options] {Object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {Boolean} If the render view is transparent, default false + * @param [options.antialias=false] {Boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {Boolean} enables drawing buffer preservation, enable this if you need to call toDataUrl on the webgl context + * @param [options.resolution=1] {Number} the resolution of the renderer retina would be 2 + * */ -PIXI.autoDetectRecommendedRenderer = function(width, height, view, transparent, antialias) +PIXI.autoDetectRecommendedRenderer = function(width, height, options) { if(!width)width = 800; if(!height)height = 600; @@ -4497,10 +5316,10 @@ if( webgl && !isAndroid) { - return new PIXI.WebGLRenderer(width, height, view, transparent, antialias); + return new PIXI.WebGLRenderer(width, height, options); } - return new PIXI.CanvasRenderer(width, height, view, transparent); + return new PIXI.CanvasRenderer(width, height, options); }; /* @@ -4533,23 +5352,21 @@ This is an amazing lib! - slightly modified by Mat Groves (matgroves.com); + Slightly modified by Mat Groves (matgroves.com); */ /** * Based on the Polyk library http://polyk.ivank.net released under MIT licence. * This is an amazing lib! - * slightly modified by Mat Groves (matgroves.com); + * Slightly modified by Mat Groves (matgroves.com); * @class PolyK - * */ PIXI.PolyK = {}; /** - * Triangulates shapes for webGL graphic fills + * Triangulates shapes for webGL graphic fills. * * @method Triangulate - * */ PIXI.PolyK.Triangulate = function(p) { @@ -4637,6 +5454,7 @@ * @param cx {Number} x coordinate of the c point of the triangle * @param cy {Number} y coordinate of the c point of the triangle * @private + * @return {Boolean} */ PIXI.PolyK._PointInTriangle = function(px, py, ax, ay, bx, by, cx, cy) { @@ -4665,8 +5483,8 @@ * Checks whether a shape is convex * * @method _convex - * * @private + * @return {Boolean} */ PIXI.PolyK._convex = function(ax, ay, bx, by, cx, cy, sign) { @@ -4677,27 +5495,48 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ -// TODO Alvin and Mat -// Should we eventually create a Utils class ? -// Or just move this file to the pixi.js file ? +/** +* @method initDefaultShaders +* @static +* @private +*/ PIXI.initDefaultShaders = function() { - - // PIXI.stripShader = new PIXI.StripShader(); -// PIXI.stripShader.init(); - }; +/** +* @method CompileVertexShader +* @static +* @param gl {WebGLContext} the current WebGL drawing context +* @param shaderSrc {Array} +* @return {Any} +*/ PIXI.CompileVertexShader = function(gl, shaderSrc) { return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER); }; +/** +* @method CompileFragmentShader +* @static +* @param gl {WebGLContext} the current WebGL drawing context +* @param shaderSrc {Array} +* @return {Any} +*/ PIXI.CompileFragmentShader = function(gl, shaderSrc) { return PIXI._CompileShader(gl, shaderSrc, gl.FRAGMENT_SHADER); }; +/** +* @method _CompileShader +* @static +* @private +* @param gl {WebGLContext} the current WebGL drawing context +* @param shaderSrc {Array} +* @param shaderType {Number} +* @return {Any} +*/ PIXI._CompileShader = function(gl, shaderSrc, shaderType) { var src = shaderSrc.join("\n"); @@ -4705,7 +5544,8 @@ gl.shaderSource(shader, src); gl.compileShader(shader); - if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { + if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) + { window.console.log(gl.getShaderInfoLog(shader)); return null; } @@ -4713,6 +5553,14 @@ return shader; }; +/** +* @method compileProgram +* @static +* @param gl {WebGLContext} the current WebGL drawing context +* @param vertexSrc {Array} +* @param fragmentSrc {Array} +* @return {Any} +*/ PIXI.compileProgram = function(gl, vertexSrc, fragmentSrc) { var fragmentShader = PIXI.CompileFragmentShader(gl, fragmentSrc); @@ -4724,7 +5572,8 @@ gl.attachShader(shaderProgram, fragmentShader); gl.linkProgram(shaderProgram); - if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { + if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) + { window.console.log("Could not initialise shaders"); } @@ -4739,9 +5588,15 @@ /** * @class PixiShader * @constructor +* @param gl {WebGLContext} the current WebGL drawing context */ PIXI.PixiShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -4751,13 +5606,17 @@ this.gl = gl; /** - * @property {any} program - The WebGL program. - */ + * The WebGL program. + * @property program + * @type {Any} + */ this.program = null; /** - * @property {array} fragmentSrc - The fragment shader. - */ + * The fragment shader. + * @property fragmentSrc + * @type Array + */ this.fragmentSrc = [ 'precision lowp float;', 'varying vec2 vTextureCoord;', @@ -4769,19 +5628,44 @@ ]; /** - * @property {number} textureCount - A local texture counter for multi-texture shaders. - */ + * A local texture counter for multi-texture shaders. + * @property textureCount + * @type Number + */ this.textureCount = 0; + /** + * A local flag + * @property firstRun + * @type Boolean + * @private + */ + this.firstRun = true; + + /** + * A dirty flag + * @property dirty + * @type Boolean + */ + this.dirty = true; + + /** + * Uniform attributes cache. + * @property attributes + * @type Array + * @private + */ this.attributes = []; this.init(); }; +PIXI.PixiShader.prototype.constructor = PIXI.PixiShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.PixiShader.prototype.init = function() { @@ -4802,12 +5686,11 @@ this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); this.colorAttribute = gl.getAttribLocation(program, 'aColor'); - // Begin worst hack eva // // WHY??? ONLY on my chrome pixel the line above returns -1 when using filters? // maybe its something to do with the current state of the gl context. - // Im convinced this is a bug in the chrome browser as there is NO reason why this should be returning -1 especially as it only manifests on my chrome pixel + // I'm convinced this is a bug in the chrome browser as there is NO reason why this should be returning -1 especially as it only manifests on my chrome pixel // If theres any webGL people that know why could happen please help :) if(this.colorAttribute === -1) { @@ -4832,6 +5715,7 @@ /** * Initialises the shader uniform values. +* * Uniforms are specified in the GLSL_ES Specification: http://www.khronos.org/registry/webgl/specs/latest/1.0/ * http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf * @@ -5022,7 +5906,18 @@ if (uniform._init) { gl.activeTexture(gl['TEXTURE' + this.textureCount]); - gl.bindTexture(gl.TEXTURE_2D, uniform.value.baseTexture._glTextures[gl.id] || PIXI.createWebGLTexture( uniform.value.baseTexture, gl)); + + if(uniform.value.baseTexture._dirty[gl.id]) + { + PIXI.defaultRenderer.updateTexture(uniform.value.baseTexture); + } + else + { + // bind the current texture + gl.bindTexture(gl.TEXTURE_2D, uniform.value.baseTexture._glTextures[gl.id]); + } + + // gl.bindTexture(gl.TEXTURE_2D, uniform.value.baseTexture._glTextures[gl.id] || PIXI.createWebGLTexture( uniform.value.baseTexture, gl)); gl.uniform1i(uniform.uniformLocation, this.textureCount); this.textureCount++; } @@ -5036,7 +5931,8 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy */ PIXI.PixiShader.prototype.destroy = function() @@ -5049,14 +5945,15 @@ }; /** -* The Default Vertex shader source +* The Default Vertex shader source. +* * @property defaultVertexSrc * @type String */ PIXI.PixiShader.defaultVertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', - 'attribute vec2 aColor;', + 'attribute vec4 aColor;', 'uniform vec2 projectionVector;', 'uniform vec2 offsetVector;', @@ -5076,7 +5973,6 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -5086,6 +5982,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -5095,12 +5996,16 @@ this.gl = gl; /** - * @property {any} program - The WebGL program. + * The WebGL program. + * @property program + * @type {Any} */ this.program = null; /** - * @property {array} fragmentSrc - The fragment shader. + * The fragment shader. + * @property fragmentSrc + * @type Array */ this.fragmentSrc = [ 'precision lowp float;', @@ -5113,8 +6018,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -5145,24 +6052,25 @@ '}' ]; - /** - * @property {number} textureCount - A local texture counter for multi-texture shaders. - */ + * A local texture counter for multi-texture shaders. + * @property textureCount + * @type Number + */ this.textureCount = 0; - this.init(); }; +PIXI.PixiFastShader.prototype.constructor = PIXI.PixiFastShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.PixiFastShader.prototype.init = function() { - var gl = this.gl; var program = PIXI.compileProgram(gl, this.vertexSrc, this.fragmentSrc); @@ -5187,8 +6095,6 @@ this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); this.colorAttribute = gl.getAttribLocation(program, 'aColor'); - - // Begin worst hack eva // // WHY??? ONLY on my chrome pixel the line above returns -1 when using filters? @@ -5204,14 +6110,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { @@ -5226,20 +6131,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - +/** +* @class StripShader +* @constructor +* @param gl {WebGLContext} the current WebGL drawing context +*/ PIXI.StripShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** + * @property gl + * @type WebGLContext + */ this.gl = gl; /** - * @property {any} program - The WebGL program. - */ + * The WebGL program. + * @property program + * @type {Any} + */ this.program = null; /** - * @property {array} fragmentSrc - The fragment shader. + * The fragment shader. + * @property fragmentSrc + * @type Array */ this.fragmentSrc = [ 'precision mediump float;', @@ -5254,9 +6176,11 @@ '}' ]; - /** - * @property {array} fragmentSrc - The fragment shader. - */ + /** + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -5280,10 +6204,12 @@ this.init(); }; +PIXI.StripShader.prototype.constructor = PIXI.StripShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.StripShader.prototype.init = function() { @@ -5312,6 +6238,20 @@ }; /** +* Destroys the shader. +* +* @method destroy +*/ +PIXI.StripShader.prototype.destroy = function() +{ + this.gl.deleteProgram( this.program ); + this.uniforms = null; + this.gl = null; + + this.attribute = null; +}; + +/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -5322,6 +6262,11 @@ */ PIXI.PrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -5331,11 +6276,14 @@ this.gl = gl; /** - * @property {any} program - The WebGL program. - */ + * The WebGL program. + * @property program + * @type {Any} + */ this.program = null; /** + * The fragment shader. * @property fragmentSrc * @type Array */ @@ -5349,6 +6297,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -5373,14 +6322,15 @@ this.init(); }; +PIXI.PrimitiveShader.prototype.constructor = PIXI.PrimitiveShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.PrimitiveShader.prototype.init = function() { - var gl = this.gl; var program = PIXI.compileProgram(gl, this.vertexSrc, this.fragmentSrc); @@ -5391,7 +6341,6 @@ this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); this.tintColor = gl.getUniformLocation(program, 'tint'); - // get and store the attributes this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); this.colorAttribute = gl.getAttribLocation(program, 'aColor'); @@ -5405,9 +6354,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PrimitiveShader.prototype.destroy = function() { @@ -5415,7 +6364,7 @@ this.uniforms = null; this.gl = null; - this.attribute = null; + this.attributes = null; }; /** @@ -5429,7 +6378,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -5437,18 +6392,20 @@ this.gl = gl; /** - * @property {any} program - The WebGL program. - */ + * The WebGL program. + * @property program + * @type {Any} + */ this.program = null; /** + * The fragment shader. * @property fragmentSrc * @type Array */ this.fragmentSrc = [ - 'precision mediump float;', - + 'precision mediump float;', 'varying vec4 vColor;', @@ -5458,6 +6415,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -5485,14 +6443,15 @@ this.init(); }; +PIXI.ComplexPrimitiveShader.prototype.constructor = PIXI.ComplexPrimitiveShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.ComplexPrimitiveShader.prototype.init = function() { - var gl = this.gl; var program = PIXI.compileProgram(gl, this.vertexSrc, this.fragmentSrc); @@ -5504,7 +6463,6 @@ this.tintColor = gl.getUniformLocation(program, 'tint'); this.color = gl.getUniformLocation(program, 'color'); - // get and store the attributes this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); // this.colorAttribute = gl.getAttribLocation(program, 'aColor'); @@ -5518,9 +6476,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { @@ -5544,7 +6502,6 @@ */ PIXI.WebGLGraphics = function() { - }; /** @@ -5585,8 +6542,6 @@ gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 ); renderSession.stencilManager.popStencil(graphics, webGLData, renderSession); - - this.last = webGLData.mode; } else { @@ -5655,7 +6610,6 @@ webGL.data = []; webGL.lastIndex = 0; } - var webGLData; @@ -5668,10 +6622,21 @@ if(data.type === PIXI.Graphics.POLY) { + // need to add the points the the graphics object.. + data.points = data.shape.points.slice(); + if(data.shape.closed) + { + // close the poly if the valu is true! + if(data.points[0] !== data.points[data.points.length-2] && data.points[1] !== data.points[data.points.length-1]) + { + data.points.push(data.points[0], data.points[1]); + } + } + // MAKE SURE WE HAVE THE CORRECT TYPE.. if(data.fill) { - if(data.points.length > 6) + if(data.points.length >= 6) { if(data.points.length > 5 * 2) { @@ -5711,7 +6676,6 @@ } } - webGL.lastIndex++; } @@ -5723,7 +6687,13 @@ } }; - +/** + * @static + * @private + * @method switchMode + * @param webGL {WebGLContext} + * @param type {Number} + */ PIXI.WebGLGraphics.switchMode = function(webGL, type) { var webGLData; @@ -5765,12 +6735,11 @@ // --- // // need to convert points to a nice regular data // - var rectData = graphicsData.points; - var x = rectData[0]; - var y = rectData[1]; - var width = rectData[2]; - var height = rectData[3]; - + var rectData = graphicsData.shape; + var x = rectData.x; + var y = rectData.y; + var width = rectData.width; + var height = rectData.height; if(graphicsData.fill) { @@ -5831,15 +6800,13 @@ */ PIXI.WebGLGraphics.buildRoundedRectangle = function(graphicsData, webGLData) { - - var points = graphicsData.points; + var points = graphicsData.shape.points; var x = points[0]; var y = points[1]; var width = points[2]; var height = points[3]; var radius = points[4]; - var recPoints = []; recPoints.push(x, y + radius); recPoints = recPoints.concat(PIXI.WebGLGraphics.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height)); @@ -5847,7 +6814,6 @@ recPoints = recPoints.concat(PIXI.WebGLGraphics.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y)); recPoints = recPoints.concat(PIXI.WebGLGraphics.quadraticBezierCurve(x + radius, y, x, y, x, y + radius)); - if (graphicsData.fill) { var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; @@ -5891,18 +6857,22 @@ }; /** - * Calcul the points for a quadratic bezier curve. (helper function..) - * Based on : https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c + * Calculate the points for a quadratic bezier curve. (helper function..) + * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c * - * @param {number} fromX Origin point x - * @param {number} fromY Origin point x - * @param {number} cpX Control point x - * @param {number} cpY Control point y - * @param {number} toX Destination point x - * @param {number} toY Destination point y - * @return {number[]} + * @static + * @private + * @method quadraticBezierCurve + * @param fromX {Number} Origin point x + * @param fromY {Number} Origin point x + * @param cpX {Number} Control point x + * @param cpY {Number} Control point y + * @param toX {Number} Destination point x + * @param toY {Number} Destination point y + * @return {Array} */ PIXI.WebGLGraphics.quadraticBezierCurve = function(fromX, fromY, cpX, cpY, toX, toY) { + var xa, ya, xb, @@ -5949,13 +6919,24 @@ */ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData) { - // need to convert points to a nice regular data - var rectData = graphicsData.points; - var x = rectData[0]; - var y = rectData[1]; - var width = rectData[2]; - var height = rectData[3]; + var circleData = graphicsData.shape; + var x = circleData.x; + var y = circleData.y; + var width; + var height; + + // TODO - bit hacky?? + if(graphicsData.type === PIXI.Graphics.CIRC) + { + width = circleData.radius; + height = circleData.radius; + } + else + { + width = circleData.width; + height = circleData.height; + } var totalSegs = 40; var seg = (Math.PI * 2) / totalSegs ; @@ -6023,7 +7004,6 @@ { // TODO OPTIMISE! var i = 0; - var points = graphicsData.points; if(points.length === 0)return; @@ -6228,13 +7208,12 @@ * * @static * @private - * @method buildPoly + * @method buildComplexPoly * @param graphicsData {Graphics} The graphics object containing all the necessary properties * @param webGLData {Object} */ PIXI.WebGLGraphics.buildComplexPoly = function(graphicsData, webGLData) { - //TODO - no need to copy this as it gets turned into a FLoat32Array anyways.. var points = graphicsData.points.slice(); if(points.length < 6)return; @@ -6286,11 +7265,20 @@ }; +/** + * Builds a polygon to draw + * + * @static + * @private + * @method buildPoly + * @param graphicsData {Graphics} The graphics object containing all the necessary properties + * @param webGLData {Object} + */ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData) { var points = graphicsData.points; - if(points.length < 6)return; + if(points.length < 6)return; // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; @@ -6328,6 +7316,11 @@ PIXI.WebGLGraphics.graphicsDataPool = []; +/** + * @class WebGLGraphicsData + * @private + * @static + */ PIXI.WebGLGraphicsData = function(gl) { this.gl = gl; @@ -6344,6 +7337,9 @@ this.dirty = true; }; +/** + * @method reset + */ PIXI.WebGLGraphicsData.prototype.reset = function() { this.points = []; @@ -6351,6 +7347,9 @@ this.lastIndex = 0; }; +/** + * @method upload + */ PIXI.WebGLGraphicsData.prototype.upload = function() { var gl = this.gl; @@ -6376,39 +7375,66 @@ PIXI.glContexts = []; // this is where we store the webGL contexts for easy access. /** - * the WebGLRenderer draws the stage and all its content onto a webGL enabled canvas. This renderer - * should be used for browsers that support webGL. This Render works by automatically managing webGLBatch's. - * So no need for Sprite Batch's or Sprite Cloud's - * Dont forget to add the view to your DOM or you will not see anything :) + * The WebGLRenderer draws the stage and all its content onto a webGL enabled canvas. This renderer + * should be used for browsers that support webGL. This Render works by automatically managing webGLBatchs. + * So no need for Sprite Batches or Sprite Clouds. + * Don't forget to add the view to your DOM or you will not see anything :) * * @class WebGLRenderer * @constructor - * @param width=0 {Number} the width of the canvas view - * @param height=0 {Number} the height of the canvas view - * @param view {HTMLCanvasElement} the canvas to use as a view, optional - * @param transparent=false {Boolean} If the render view is transparent, default false - * @param antialias=false {Boolean} sets antialias (only applicable in chrome at the moment) - * @param preserveDrawingBuffer=false {Boolean} enables drawing buffer preservation, enable this if you need to call toDataUrl on the webgl context - * + * @param [width=0] {Number} the width of the canvas view + * @param [height=0] {Number} the height of the canvas view + * @param [options] {Object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {Boolean} If the render view is transparent, default false + * @param [options.antialias=false] {Boolean} sets antialias (only applicable in chrome at the moment) + * @param [options.preserveDrawingBuffer=false] {Boolean} enables drawing buffer preservation, enable this if you need to call toDataUrl on the webgl context + * @param [options.resolution=1] {Number} the resolution of the renderer retina would be 2 */ -PIXI.WebGLRenderer = function(width, height, view, transparent, antialias, preserveDrawingBuffer) +PIXI.WebGLRenderer = function(width, height, options) { + if(options) + { + for (var i in PIXI.defaultRenderOptions) + { + if (typeof options[i] === 'undefined') options[i] = PIXI.defaultRenderOptions[i]; + } + } + else + { + options = PIXI.defaultRenderOptions; + } + if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; + /** + * The resolution of the renderer + * + * @property resolution + * @type Number + * @default 1 + */ + this.resolution = options.resolution; + // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * * @property transparent * @type Boolean */ - this.transparent = !!transparent; + this.transparent = options.transparent; /** * The value of the preserveDrawingBuffer flag affects whether or not the contents of the stencil buffer is retained after rendering. @@ -6416,8 +7442,20 @@ * @property preserveDrawingBuffer * @type Boolean */ - this.preserveDrawingBuffer = preserveDrawingBuffer; - + this.preserveDrawingBuffer = options.preserveDrawingBuffer; + + /** + * This sets if the WebGLRenderer will clear the context texture or not before the new render pass. If true: + * If the Stage is NOT transparent, Pixi will clear to alpha (0, 0, 0, 0). + * If the Stage is transparent, Pixi will clear to the target Stage's background color. + * Disable this by setting this to false. For example: if your game has a canvas filling background image, you often don't need this set. + * + * @property clearBeforeRender + * @type Boolean + * @default + */ + this.clearBeforeRender = options.clearBeforeRender; + /** * The width of the canvas view * @@ -6442,87 +7480,99 @@ * @property view * @type HTMLCanvasElement */ - this.view = view || document.createElement( 'canvas' ); - this.view.width = this.width; - this.view.height = this.height; + this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. - this.contextLost = this.handleContextLost.bind(this); - this.contextRestoredLost = this.handleContextRestored.bind(this); - - this.view.addEventListener('webglcontextlost', this.contextLost, false); - this.view.addEventListener('webglcontextrestored', this.contextRestoredLost, false); - this.options = { + /** + * @property contextLostBound + * @type Function + */ + this.contextLostBound = this.handleContextLost.bind(this); + + /** + * @property contextRestoredBound + * @type Function + */ + this.contextRestoredBound = this.handleContextRestored.bind(this); + + this.view.addEventListener('webglcontextlost', this.contextLostBound, false); + this.view.addEventListener('webglcontextrestored', this.contextRestoredBound, false); + + /** + * @property _contextOptions + * @type Object + * @private + */ + this._contextOptions = { alpha: this.transparent, - antialias:!!antialias, // SPEED UP?? - premultipliedAlpha:!!transparent, + antialias: options.antialias, // SPEED UP?? + premultipliedAlpha:this.transparent && this.transparent !== 'notMultiplied', stencil:true, - preserveDrawingBuffer: preserveDrawingBuffer + preserveDrawingBuffer: options.preserveDrawingBuffer }; - var gl = null; - - ['experimental-webgl', 'webgl'].forEach(function(name) { - try { - gl = gl || this.view.getContext(name, this.options); - } catch(e) {} - }, this); - - if (!gl) { - // fail, not able to get a context - throw new Error('This browser does not support webGL. Try using the canvas renderer' + this); - } - - this.gl = gl; - this.glContextId = gl.id = PIXI.WebGLRenderer.glContextId ++; - - PIXI.glContexts[this.glContextId] = gl; - - if(!PIXI.blendModesWebGL) - { - PIXI.blendModesWebGL = []; - - PIXI.blendModesWebGL[PIXI.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; - PIXI.blendModesWebGL[PIXI.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - PIXI.blendModesWebGL[PIXI.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; - } - - - - + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); - this.projection.x = this.width/2; - this.projection.y = -this.height/2; + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - this.resize(this.width, this.height); - this.contextLost = false; + // time to create the render managers! each one focuses on managing a state in webGL - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(gl); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(gl); // manages the rendering of sprites - //this.primitiveBatch = new PIXI.WebGLPrimitiveBatch(gl); // primitive batch renderer - this.maskManager = new PIXI.WebGLMaskManager(gl); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(gl, this.transparent); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(gl); - this.blendModeManager = new PIXI.WebGLBlendModeManager(gl); + /** + * Deals with managing the shader programs and their attribs + * @property shaderManager + * @type WebGLShaderManager + */ + this.shaderManager = new PIXI.WebGLShaderManager(); + /** + * Manages the rendering of sprites + * @property spriteBatch + * @type WebGLSpriteBatch + */ + this.spriteBatch = new PIXI.WebGLSpriteBatch(); + + /** + * Manages the masks using the stencil buffer + * @property maskManager + * @type WebGLMaskManager + */ + this.maskManager = new PIXI.WebGLMaskManager(); + + /** + * Manages the filters + * @property filterManager + * @type WebGLFilterManager + */ + this.filterManager = new PIXI.WebGLFilterManager(); + + /** + * Manages the stencil buffer + * @property stencilManager + * @type WebGLStencilManager + */ + this.stencilManager = new PIXI.WebGLStencilManager(); + + /** + * Manages the blendModes + * @property blendModeManager + * @type WebGLBlendModeManager + */ + this.blendModeManager = new PIXI.WebGLBlendModeManager(); + + /** + * TODO remove + * @property renderSession + * @type Object + */ this.renderSession = {}; this.renderSession.gl = this.gl; this.renderSession.drawCount = 0; @@ -6530,24 +7580,58 @@ this.renderSession.maskManager = this.maskManager; this.renderSession.filterManager = this.filterManager; this.renderSession.blendModeManager = this.blendModeManager; - // this.renderSession.primitiveBatch = this.primitiveBatch; this.renderSession.spriteBatch = this.spriteBatch; this.renderSession.stencilManager = this.stencilManager; this.renderSession.renderer = this; + this.renderSession.resolution = this.resolution; - gl.useProgram(this.shaderManager.defaultShader.program); + // time init the context.. + this.initContext(); - gl.disable(gl.DEPTH_TEST); - gl.disable(gl.CULL_FACE); - - gl.enable(gl.BLEND); - gl.colorMask(true, true, true, true); + // map some webGL blend modes.. + this.mapBlendModes(); }; // constructor PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer; /** +* @method initContext +*/ +PIXI.WebGLRenderer.prototype.initContext = function() +{ + var gl = this.view.getContext('webgl', this._contextOptions) || this.view.getContext('experimental-webgl', this._contextOptions); + this.gl = gl; + + if (!gl) { + // fail, not able to get a context + throw new Error('This browser does not support webGL. Try using the canvas renderer'); + } + + this.glContextId = gl.id = PIXI.WebGLRenderer.glContextId ++; + + PIXI.glContexts[this.glContextId] = gl; + + // set up the default pixi settings.. + gl.disable(gl.DEPTH_TEST); + gl.disable(gl.CULL_FACE); + gl.enable(gl.BLEND); + + // need to set the context for all the managers... + this.shaderManager.setContext(gl); + this.spriteBatch.setContext(gl); + this.maskManager.setContext(gl); + this.filterManager.setContext(gl); + this.blendModeManager.setContext(gl); + this.stencilManager.setContext(gl); + + this.renderSession.gl = this.gl; + + // now resize and we are good to go! + this.resize(this.width, this.height); +}; + +/** * Renders the stage to its webGL view * * @method render @@ -6555,9 +7639,9 @@ */ PIXI.WebGLRenderer.prototype.render = function(stage) { + // no point rendering if our context has been blown up! if(this.contextLost)return; - // if rendering a new stage clear the batches.. if(this.__stage !== stage) { @@ -6568,13 +7652,11 @@ this.__stage = stage; } - // update any textures this includes uvs and uploading them to the gpu - PIXI.WebGLRenderer.updateTextures(); - // update the scene graph stage.updateTransform(); - + var gl = this.gl; + // interaction if(stage._interactive) { @@ -6585,40 +7667,6 @@ stage.interactionManager.setTarget(this); } } - - var gl = this.gl; - - // -- Does this need to be set every frame? -- // - //gl.colorMask(true, true, true, this.transparent); - gl.viewport(0, 0, this.width, this.height); - - // make sure we are bound to the main frame buffer - gl.bindFramebuffer(gl.FRAMEBUFFER, null); - - if(this.transparent) - { - gl.clearColor(0, 0, 0, 0); - } - else - { - gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], 1); - } - - - gl.clear(gl.COLOR_BUFFER_BIT); - - this.renderDisplayObject( stage, this.projection ); - - // interaction - if(stage.interactive) - { - //need to add some events! - if(!stage._interactiveEventsAdded) - { - stage._interactiveEventsAdded = true; - stage.interactionManager.setTarget(this); - } - } else { if(stage._interactiveEventsAdded) @@ -6628,51 +7676,53 @@ } } - /* - //can simulate context loss in Chrome like so: - this.view.onmousedown = function(ev) { - console.dir(this.gl.getSupportedExtensions()); - var ext = ( - gl.getExtension("WEBGL_scompressed_texture_s3tc") - // gl.getExtension("WEBGL_compressed_texture_s3tc") || - // gl.getExtension("MOZ_WEBGL_compressed_texture_s3tc") || - // gl.getExtension("WEBKIT_WEBGL_compressed_texture_s3tc") - ); - console.dir(ext); - var loseCtx = this.gl.getExtension("WEBGL_lose_context"); - console.log("killing context"); - loseCtx.loseContext(); - setTimeout(function() { - console.log("restoring context..."); - loseCtx.restoreContext(); - }.bind(this), 1000); - }.bind(this); - */ + // -- Does this need to be set every frame? -- // + gl.viewport(0, 0, this.width, this.height); + + // make sure we are bound to the main frame buffer + gl.bindFramebuffer(gl.FRAMEBUFFER, null); + + if (this.clearBeforeRender) + { + if(this.transparent) + { + gl.clearColor(0, 0, 0, 0); + } + else + { + gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], 1); + } + + gl.clear (gl.COLOR_BUFFER_BIT); + } + + this.renderDisplayObject( stage, this.projection ); }; /** - * Renders a display Object + * Renders a Display Object. * - * @method renderDIsplayObject + * @method renderDisplayObject * @param displayObject {DisplayObject} The DisplayObject to render * @param projection {Point} The projection - * @param buffer {Array} a standard WebGL buffer + * @param buffer {Array} a standard WebGL buffer */ PIXI.WebGLRenderer.prototype.renderDisplayObject = function(displayObject, projection, buffer) { this.renderSession.blendModeManager.setBlendMode(PIXI.blendModes.NORMAL); + // reset the render session data.. this.renderSession.drawCount = 0; - this.renderSession.currentBlendMode = 9999; + // set the default projection this.renderSession.projection = projection; + + //set the default offset this.renderSession.offset = this.offset; // start the sprite batch this.spriteBatch.begin(this.renderSession); -// this.primitiveBatch.begin(this.renderSession); - // start the filter manager this.filterManager.begin(this.renderSession, buffer); @@ -6681,79 +7731,10 @@ // finish the sprite batch this.spriteBatch.end(); - -// this.primitiveBatch.end(); }; /** - * Updates the textures loaded into this webgl renderer - * - * @static - * @method updateTextures - * @private - */ -PIXI.WebGLRenderer.updateTextures = function() -{ - var i = 0; - - //TODO break this out into a texture manager... - // for (i = 0; i < PIXI.texturesToUpdate.length; i++) - // PIXI..updateWebGLTexture(PIXI.texturesToUpdate[i], this.gl); - - - for (i=0; i < PIXI.Texture.frameUpdates.length; i++) - PIXI.WebGLRenderer.updateTextureFrame(PIXI.Texture.frameUpdates[i]); - - for (i = 0; i < PIXI.texturesToDestroy.length; i++) - PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]); - - PIXI.texturesToUpdate.length = 0; - PIXI.texturesToDestroy.length = 0; - PIXI.Texture.frameUpdates.length = 0; -}; - -/** - * Destroys a loaded webgl texture - * - * @method destroyTexture - * @param texture {Texture} The texture to update - * @private - */ -PIXI.WebGLRenderer.destroyTexture = function(texture) -{ - //TODO break this out into a texture manager... - - for (var i = texture._glTextures.length - 1; i >= 0; i--) - { - var glTexture = texture._glTextures[i]; - var gl = PIXI.glContexts[i]; - - if(gl && glTexture) - { - gl.deleteTexture(glTexture); - } - } - - texture._glTextures.length = 0; -}; - -/** - * - * @method updateTextureFrame - * @param texture {Texture} The texture to update the frame from - * @private - */ -PIXI.WebGLRenderer.updateTextureFrame = function(texture) -{ - //texture.updateFrame = false; - - // now set the uvs. Figured that the uv data sits with a texture rather than a sprite. - // so uv data is stored on the texture itself - texture._updateWebGLuvs(); -}; - -/** - * resizes the webGL view to the specified width and height + * Resizes the webGL view to the specified width and height. * * @method resize * @param width {Number} the new width of the webGL view @@ -6761,100 +7742,58 @@ */ PIXI.WebGLRenderer.prototype.resize = function(width, height) { - this.width = width; - this.height = height; + this.width = width * this.resolution; + this.height = height * this.resolution; - this.view.width = width; - this.view.height = height; + this.view.width = this.width; + this.view.height = this.height; this.gl.viewport(0, 0, this.width, this.height); - this.projection.x = this.width/2; - this.projection.y = -this.height/2; + this.projection.x = this.width / 2 / this.resolution; + this.projection.y = -this.height / 2 / this.resolution; }; /** - * Creates a WebGL texture + * Updates and Creates a WebGL texture for the renderers context. * - * @method createWebGLTexture - * @param texture {Texture} the texture to render - * @param gl {webglContext} the WebGL context - * @static + * @method updateTexture + * @param texture {Texture} the texture to update */ -PIXI.createWebGLTexture = function(texture, gl) +PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { + if(!texture.hasLoaded )return; + var gl = this.gl; - if(texture.hasLoaded) + if(!texture._glTextures[gl.id])texture._glTextures[gl.id] = gl.createTexture(); + + gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); + + gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); + + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === PIXI.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === PIXI.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); + + // reguler... + if(!texture._powerOf2) { - texture._glTextures[gl.id] = gl.createTexture(); - - gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); - - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === PIXI.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === PIXI.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - - // reguler... - - if(!texture._powerOf2) - { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - } - else - { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); - } - - gl.bindTexture(gl.TEXTURE_2D, null); - - texture._dirty[gl.id] = false; + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); } + else + { + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); + } + + texture._dirty[gl.id] = false; return texture._glTextures[gl.id]; }; /** - * Updates a WebGL texture - * - * @method updateWebGLTexture - * @param texture {Texture} the texture to update - * @param gl {webglContext} the WebGL context - * @private - */ -PIXI.updateWebGLTexture = function(texture, gl) -{ - if( texture._glTextures[gl.id] ) - { - gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); - gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha); - - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === PIXI.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === PIXI.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); - - // reguler... - - if(!texture._powerOf2) - { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - } - else - { - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); - } - - texture._dirty[gl.id] = false; - } - -}; - -/** * Handles a lost webgl context * * @method handleContextLost @@ -6876,56 +7815,16 @@ */ PIXI.WebGLRenderer.prototype.handleContextRestored = function() { + this.initContext(); - //try 'experimental-webgl' - try { - this.gl = this.view.getContext('experimental-webgl', this.options); - } catch (e) { - //try 'webgl' - try { - this.gl = this.view.getContext('webgl', this.options); - } catch (e2) { - // fail, not able to get a context - throw new Error(' This browser does not support webGL. Try using the canvas renderer' + this); - } - } - - var gl = this.gl; - gl.id = PIXI.WebGLRenderer.glContextId ++; - - - - // need to set the context... - this.shaderManager.setContext(gl); - this.spriteBatch.setContext(gl); - this.primitiveBatch.setContext(gl); - this.maskManager.setContext(gl); - this.filterManager.setContext(gl); - - - this.renderSession.gl = this.gl; - - gl.disable(gl.DEPTH_TEST); - gl.disable(gl.CULL_FACE); - - gl.enable(gl.BLEND); - gl.colorMask(true, true, true, true); - - this.gl.viewport(0, 0, this.width, this.height); - + // empty all the ol gl textures as they are useless now for(var key in PIXI.TextureCache) { var texture = PIXI.TextureCache[key].baseTexture; texture._glTextures = []; } - - /** - * Whether the context was lost - * @property contextLost - * @type Boolean - */ + this.contextLost = false; - }; /** @@ -6935,12 +7834,9 @@ */ PIXI.WebGLRenderer.prototype.destroy = function() { - - // deal with losing context.. - // remove listeners - this.view.removeEventListener('webglcontextlost', this.contextLost); - this.view.removeEventListener('webglcontextrestored', this.contextRestoredLost); + this.view.off('webglcontextlost', this.contextLostBound); + this.view.off('webglcontextrestored', this.contextRestoredBound); PIXI.glContexts[this.glContextId] = null; @@ -6950,7 +7846,6 @@ // time to create the render managers! each one focuses on managine a state in webGL this.shaderManager.destroy(); this.spriteBatch.destroy(); - this.primitiveBatch.destroy(); this.maskManager.destroy(); this.filterManager.destroy(); @@ -6958,12 +7853,43 @@ this.spriteBatch = null; this.maskManager = null; this.filterManager = null; - + this.gl = null; - // this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ +PIXI.WebGLRenderer.prototype.mapBlendModes = function() +{ + var gl = this.gl; + + if(!PIXI.blendModesWebGL) + { + PIXI.blendModesWebGL = []; + + PIXI.blendModesWebGL[PIXI.blendModes.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.ADD] = [gl.SRC_ALPHA, gl.DST_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.SCREEN] = [gl.SRC_ALPHA, gl.ONE]; + PIXI.blendModesWebGL[PIXI.blendModes.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + PIXI.blendModesWebGL[PIXI.blendModes.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA]; + } +}; PIXI.WebGLRenderer.glContextId = 0; @@ -6972,27 +7898,42 @@ */ /** -* @class WebGLMaskManager +* @class WebGLBlendModeManager * @constructor * @param gl {WebGLContext} the current WebGL drawing context -* @private */ -PIXI.WebGLBlendModeManager = function(gl) +PIXI.WebGLBlendModeManager = function() { - this.gl = gl; + /** + * @property currentBlendMode + * @type Number + */ this.currentBlendMode = 99999; }; +PIXI.WebGLBlendModeManager.prototype.constructor = PIXI.WebGLBlendModeManager; + /** -* Sets-up the given blendMode from WebGL's point of view + * Sets the WebGL Context. + * + * @method setContext + * @param gl {WebGLContext} the current WebGL drawing context + */ +PIXI.WebGLBlendModeManager.prototype.setContext = function(gl) +{ + this.gl = gl; +}; + +/** +* Sets-up the given blendMode from WebGL's point of view. +* * @method setBlendMode -* * @param blendMode {Number} the blendMode, should be a Pixi const, such as PIXI.BlendModes.ADD */ PIXI.WebGLBlendModeManager.prototype.setBlendMode = function(blendMode) { if(this.currentBlendMode === blendMode)return false; - // console.log("SWAP!") + this.currentBlendMode = blendMode; var blendModeWebGL = PIXI.blendModesWebGL[this.currentBlendMode]; @@ -7001,10 +7942,16 @@ return true; }; +/** +* Destroys this object. +* +* @method destroy +*/ PIXI.WebGLBlendModeManager.prototype.destroy = function() { this.gl = null; }; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -7012,22 +7959,17 @@ /** * @class WebGLMaskManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ -PIXI.WebGLMaskManager = function(gl) +PIXI.WebGLMaskManager = function() { - this.maskStack = []; - this.maskPosition = 0; - - this.setContext(gl); - - this.reverse = false; - this.count = 0; }; +PIXI.WebGLMaskManager.prototype.constructor = PIXI.WebGLMaskManager; + /** -* Sets the drawing context to the one given in parameter +* Sets the drawing context to the one given in parameter. +* * @method setContext * @param gl {WebGLContext} the current WebGL drawing context */ @@ -7037,10 +7979,11 @@ }; /** -* Applies the Mask and adds it to the current filter stack +* Applies the Mask and adds it to the current filter stack. +* * @method pushMask * @param maskData {Array} -* @param renderSession {RenderSession} +* @param renderSession {Object} */ PIXI.WebGLMaskManager.prototype.pushMask = function(maskData, renderSession) { @@ -7057,10 +8000,11 @@ }; /** -* Removes the last filter from the filter stack and doesn't return it +* Removes the last filter from the filter stack and doesn't return it. +* * @method popMask -* -* @param renderSession {RenderSession} an object containing all the useful parameters +* @param maskData {Array} +* @param renderSession {Object} an object containing all the useful parameters */ PIXI.WebGLMaskManager.prototype.popMask = function(maskData, renderSession) { @@ -7068,42 +8012,35 @@ renderSession.stencilManager.popStencil(maskData, maskData._webGL[gl.id].data[0], renderSession); }; - /** -* Destroys the mask stack +* Destroys the mask stack. +* * @method destroy */ PIXI.WebGLMaskManager.prototype.destroy = function() { - this.maskStack = null; this.gl = null; }; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - -//BA0285 -//Intercontinental Hotel, 888 Howard Street -//San Francisco /** * @class WebGLStencilManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ -PIXI.WebGLStencilManager = function(gl) +PIXI.WebGLStencilManager = function() { - this.stencilStack = []; - this.setContext(gl); this.reverse = true; this.count = 0; - }; /** -* Sets the drawing context to the one given in parameter +* Sets the drawing context to the one given in parameter. +* * @method setContext * @param gl {WebGLContext} the current WebGL drawing context */ @@ -7113,10 +8050,12 @@ }; /** -* Applies the Mask and adds it to the current filter stack +* Applies the Mask and adds it to the current filter stack. +* * @method pushMask -* @param maskData {Array} -* @param renderSession {RenderSession} +* @param graphics {Graphics} +* @param webGLData {Array} +* @param renderSession {Object} */ PIXI.WebGLStencilManager.prototype.pushStencil = function(graphics, webGLData, renderSession) { @@ -7144,7 +8083,6 @@ if(webGLData.mode === 1) { - gl.drawElements(gl.TRIANGLE_FAN, webGLData.indices.length - 4, gl.UNSIGNED_SHORT, 0 ); if(this.reverse) @@ -7203,7 +8141,14 @@ this.count++; }; -//TODO this does not belong here! +/** + * TODO this does not belong here! + * + * @method bindGraphics + * @param graphics {Graphics} + * @param webGLData {Array} + * @param renderSession {Object} + */ PIXI.WebGLStencilManager.prototype.bindGraphics = function(graphics, webGLData, renderSession) { //if(this._currentGraphics === graphics)return; @@ -7218,7 +8163,7 @@ if(webGLData.mode === 1) { - shader = renderSession.shaderManager.complexPrimativeShader; + shader = renderSession.shaderManager.complexPrimitiveShader; renderSession.shaderManager.setShader( shader ); @@ -7266,6 +8211,12 @@ } }; +/** + * @method popStencil + * @param graphics {Graphics} + * @param webGLData {Array} + * @param renderSession {Object} + */ PIXI.WebGLStencilManager.prototype.popStencil = function(graphics, webGLData, renderSession) { var gl = this.gl; @@ -7353,19 +8304,19 @@ } - - //renderSession.shaderManager.deactivatePrimitiveShader(); }; /** -* Destroys the mask stack +* Destroys the mask stack. +* * @method destroy */ PIXI.WebGLStencilManager.prototype.destroy = function() { - this.maskStack = null; + this.stencilStack = null; this.gl = null; }; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -7373,41 +8324,58 @@ /** * @class WebGLShaderManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ -PIXI.WebGLShaderManager = function(gl) +PIXI.WebGLShaderManager = function() { - + /** + * @property maxAttibs + * @type Number + */ this.maxAttibs = 10; - this.attribState = []; - this.tempAttribState = []; - this.shaderMap = []; - for (var i = 0; i < this.maxAttibs; i++) { + /** + * @property attribState + * @type Array + */ + this.attribState = []; + + /** + * @property tempAttribState + * @type Array + */ + this.tempAttribState = []; + + for (var i = 0; i < this.maxAttibs; i++) + { this.attribState[i] = false; } - this.setContext(gl); - // the final one is used for the rendering strips + /** + * @property stack + * @type Array + */ + this.stack = []; + }; +PIXI.WebGLShaderManager.prototype.constructor = PIXI.WebGLShaderManager; /** -* Initialises the context and the properties +* Initialises the context and the properties. +* * @method setContext * @param gl {WebGLContext} the current WebGL drawing context -* @param transparent {Boolean} Whether or not the drawing context should be transparent */ PIXI.WebGLShaderManager.prototype.setContext = function(gl) { this.gl = gl; - // the next one is used for rendering primatives + // the next one is used for rendering primitives this.primitiveShader = new PIXI.PrimitiveShader(gl); // the next one is used for rendering triangle strips - this.complexPrimativeShader = new PIXI.ComplexPrimitiveShader(gl); + this.complexPrimitiveShader = new PIXI.ComplexPrimitiveShader(gl); // this shader is used for the default sprite rendering this.defaultShader = new PIXI.PixiShader(gl); @@ -7420,16 +8388,15 @@ this.setShader(this.defaultShader); }; - /** -* Takes the attributes given in parameters +* Takes the attributes given in parameters. +* * @method setAttribs * @param attribs {Array} attribs */ PIXI.WebGLShaderManager.prototype.setAttribs = function(attribs) { // reset temp state - var i; for (i = 0; i < this.tempAttribState.length; i++) @@ -7464,6 +8431,12 @@ } }; +/** +* Sets the current shader. +* +* @method setShader +* @param shader {Any} +*/ PIXI.WebGLShaderManager.prototype.setShader = function(shader) { if(this._currentId === shader._UID)return false; @@ -7479,7 +8452,8 @@ }; /** -* Destroys +* Destroys this object. +* * @method destroy */ PIXI.WebGLShaderManager.prototype.destroy = function() @@ -7490,6 +8464,8 @@ this.primitiveShader.destroy(); + this.complexPrimitiveShader.destroy(); + this.defaultShader.destroy(); this.fastShader.destroy(); @@ -7499,7 +8475,6 @@ this.gl = null; }; - /** * @author Mat Groves * @@ -7515,15 +8490,10 @@ * @class WebGLSpriteBatch * @private * @constructor - * @param gl {WebGLContext} the current WebGL drawing context - * */ -PIXI.WebGLSpriteBatch = function(gl) +PIXI.WebGLSpriteBatch = function() { - /** - * - * * @property vertSize * @type Number */ @@ -7541,8 +8511,6 @@ //the total number of indices in our batch var numIndices = this.size * 6; - //vertex data - /** * Holds the vertices * @@ -7551,7 +8519,6 @@ */ this.vertices = new Float32Array(numVerts); - //index data /** * Holds the indices * @@ -7560,6 +8527,10 @@ */ this.indices = new Uint16Array(numIndices); + /** + * @property lastIndexCount + * @type Number + */ this.lastIndexCount = 0; for (var i=0, j=0; i < numIndices; i += 6, j += 4) @@ -7572,23 +8543,71 @@ this.indices[i + 5] = j + 3; } - + /** + * @property drawing + * @type Boolean + */ this.drawing = false; - this.currentBatchSize = 0; - this.currentBaseTexture = null; - - this.setContext(gl); + /** + * @property currentBatchSize + * @type Number + */ + this.currentBatchSize = 0; + + /** + * @property currentBaseTexture + * @type BaseTexture + */ + this.currentBaseTexture = null; + + /** + * @property dirty + * @type Boolean + */ this.dirty = true; + /** + * @property textures + * @type Array + */ this.textures = []; + + /** + * @property blendModes + * @type Array + */ this.blendModes = []; + + /** + * @property shaders + * @type Array + */ + this.shaders = []; + + /** + * @property sprites + * @type Array + */ + this.sprites = []; + + /** + * @property defaultShader + * @type AbstractFilter + */ + this.defaultShader = new PIXI.AbstractFilter([ + 'precision lowp float;', + 'varying vec2 vTextureCoord;', + 'varying vec4 vColor;', + 'uniform sampler2D uSampler;', + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;', + '}' + ]); }; /** -* * @method setContext -* * @param gl {WebGLContext} the current WebGL drawing context */ PIXI.WebGLSpriteBatch.prototype.setContext = function(gl) @@ -7601,7 +8620,6 @@ // 65535 is max index, so 65535 / 6 = 10922. - //upload the index data gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); @@ -7610,13 +8628,19 @@ gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.DYNAMIC_DRAW); this.currentBlendMode = 99999; + + var shader = new PIXI.PixiShader(gl); + + shader.fragmentSrc = this.defaultShader.fragmentSrc; + shader.uniforms = {}; + shader.init(); + + this.defaultShader.shaders[gl.id] = shader; }; /** -* * @method begin -* -* @param renderSession {RenderSession} the RenderSession +* @param renderSession {Object} The RenderSession object */ PIXI.WebGLSpriteBatch.prototype.begin = function(renderSession) { @@ -7627,9 +8651,7 @@ }; /** -* * @method end -* */ PIXI.WebGLSpriteBatch.prototype.end = function() { @@ -7637,9 +8659,7 @@ }; /** -* * @method render -* * @param sprite {Sprite} the sprite to render when using this spritebatch */ PIXI.WebGLSpriteBatch.prototype.render = function(sprite) @@ -7650,7 +8670,6 @@ // check texture.. if(this.currentBatchSize >= this.size) { - //return; this.flush(); this.currentBaseTexture = texture.baseTexture; } @@ -7666,7 +8685,6 @@ var verticies = this.vertices; - // TODO trim?? var aX = sprite.anchor.x; var aY = sprite.anchor.y; @@ -7695,15 +8713,18 @@ } var index = this.currentBatchSize * 4 * this.vertSize; + + var resolution = texture.baseTexture.resolution; var worldTransform = sprite.worldTransform; - var a = worldTransform.a;//[0]; - var b = worldTransform.c;//[3]; - var c = worldTransform.b;//[1]; - var d = worldTransform.d;//[4]; - var tx = worldTransform.tx;//[2]; - var ty = worldTransform.ty;///[5]; + var a = worldTransform.a / resolution; + var b = worldTransform.b / resolution; + var c = worldTransform.c / resolution; + var d = worldTransform.d / resolution; + var tx = worldTransform.tx; + var ty = worldTransform.ty; + // xy verticies[index++] = a * w1 + c * h1 + tx; @@ -7746,24 +8767,20 @@ verticies[index++] = tint; // increment the batchsize - this.textures[this.currentBatchSize] = sprite.texture.baseTexture; - this.blendModes[this.currentBatchSize] = sprite.blendMode; - - this.currentBatchSize++; + this.sprites[this.currentBatchSize++] = sprite; }; /** -* Renders a tilingSprite using the spriteBatch -* @method renderTilingSprite +* Renders a TilingSprite using the spriteBatch. * +* @method renderTilingSprite * @param sprite {TilingSprite} the tilingSprite to render */ PIXI.WebGLSpriteBatch.prototype.renderTilingSprite = function(tilingSprite) { var texture = tilingSprite.tilingTexture; - // check texture.. if(this.currentBatchSize >= this.size) { @@ -7820,12 +8837,14 @@ var index = this.currentBatchSize * 4 * this.vertSize; + var resolution = texture.baseTexture.resolution; + var worldTransform = tilingSprite.worldTransform; - var a = worldTransform.a;//[0]; - var b = worldTransform.c;//[3]; - var c = worldTransform.b;//[1]; - var d = worldTransform.d;//[4]; + var a = worldTransform.a / resolution;//[0]; + var b = worldTransform.b / resolution;//[3]; + var c = worldTransform.c / resolution;//[1]; + var d = worldTransform.d / resolution;//[4]; var tx = worldTransform.tx;//[2]; var ty = worldTransform.ty;///[5]; @@ -7869,18 +8888,14 @@ verticies[index++] = alpha; verticies[index++] = tint; - // increment the batchs - this.textures[this.currentBatchSize] = texture.baseTexture; - this.blendModes[this.currentBatchSize] = tilingSprite.blendMode; - this.currentBatchSize++; + // increment the batchsize + this.sprites[this.currentBatchSize++] = tilingSprite; }; - /** -* Renders the content and empties the current batch +* Renders the content and empties the current batch. * * @method flush -* */ PIXI.WebGLSpriteBatch.prototype.flush = function() { @@ -7888,8 +8903,7 @@ if (this.currentBatchSize===0)return; var gl = this.gl; - - this.renderSession.shaderManager.setShader(this.renderSession.shaderManager.defaultShader); + var shader; if(this.dirty) { @@ -7901,16 +8915,13 @@ gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - // set the projection - var projection = this.renderSession.projection; - gl.uniform2f(this.shader.projectionVector, projection.x, projection.y); + shader = this.defaultShader.shaders[gl.id]; - // set the pointers + // this is the same for each shader? var stride = this.vertSize * 4; - gl.vertexAttribPointer(this.shader.aVertexPosition, 2, gl.FLOAT, false, stride, 0); - gl.vertexAttribPointer(this.shader.aTextureCoord, 2, gl.FLOAT, false, stride, 2 * 4); - gl.vertexAttribPointer(this.shader.colorAttribute, 2, gl.FLOAT, false, stride, 4 * 4); - + gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, stride, 0); + gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, stride, 2 * 4); + gl.vertexAttribPointer(shader.colorAttribute, 2, gl.FLOAT, false, stride, 4 * 4); } // upload the verts to the buffer @@ -7924,28 +8935,76 @@ gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); } - var nextTexture, nextBlendMode; + var nextTexture, nextBlendMode, nextShader; var batchSize = 0; var start = 0; var currentBaseTexture = null; var currentBlendMode = this.renderSession.blendModeManager.currentBlendMode; + var currentShader = null; + + var blendSwap = false; + var shaderSwap = false; + var sprite; for (var i = 0, j = this.currentBatchSize; i < j; i++) { - nextTexture = this.textures[i]; - nextBlendMode = this.blendModes[i]; + sprite = this.sprites[i]; - if(currentBaseTexture !== nextTexture || currentBlendMode !== nextBlendMode) + nextTexture = sprite.texture.baseTexture; + nextBlendMode = sprite.blendMode; + nextShader = sprite.shader || this.defaultShader; + + blendSwap = currentBlendMode !== nextBlendMode; + shaderSwap = currentShader !== nextShader; // should I use _UIDS??? + + if(currentBaseTexture !== nextTexture || blendSwap || shaderSwap) { this.renderBatch(currentBaseTexture, batchSize, start); start = i; batchSize = 0; currentBaseTexture = nextTexture; - currentBlendMode = nextBlendMode; - - this.renderSession.blendModeManager.setBlendMode( currentBlendMode ); + + if( blendSwap ) + { + currentBlendMode = nextBlendMode; + this.renderSession.blendModeManager.setBlendMode( currentBlendMode ); + } + + if( shaderSwap ) + { + currentShader = nextShader; + + shader = currentShader.shaders[gl.id]; + + if(!shader) + { + shader = new PIXI.PixiShader(gl); + + shader.fragmentSrc =currentShader.fragmentSrc; + shader.uniforms =currentShader.uniforms; + shader.init(); + + currentShader.shaders[gl.id] = shader; + } + + // set shader function??? + this.renderSession.shaderManager.setShader(shader); + + if(shader.dirty)shader.syncUniforms(); + + // both thease only need to be set if they are changing.. + // set the projection + var projection = this.renderSession.projection; + gl.uniform2f(shader.projectionVector, projection.x, projection.y); + + // TODO - this is temprorary! + var offsetVector = this.renderSession.offset; + gl.uniform2f(shader.offsetVector, offsetVector.x, offsetVector.y); + + // set the pointers + } } batchSize++; @@ -7957,18 +9016,27 @@ this.currentBatchSize = 0; }; +/** +* @method renderBatch +* @param texture {Texture} +* @param size {Number} +* @param startIndex {Number} +*/ PIXI.WebGLSpriteBatch.prototype.renderBatch = function(texture, size, startIndex) { if(size === 0)return; var gl = this.gl; - // bind the current texture - gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id] || PIXI.createWebGLTexture(texture, gl)); // check if a texture is dirty.. if(texture._dirty[gl.id]) { - PIXI.updateWebGLTexture(this.currentBaseTexture, gl); + this.renderSession.renderer.updateTexture(texture); + } + else + { + // bind the current texture + gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); } // now draw those suckas! @@ -7979,19 +9047,16 @@ }; /** -* * @method stop -* */ PIXI.WebGLSpriteBatch.prototype.stop = function() { this.flush(); + this.dirty = true; }; /** -* * @method start -* */ PIXI.WebGLSpriteBatch.prototype.start = function() { @@ -7999,12 +9064,12 @@ }; /** -* Destroys the SpriteBatch +* Destroys the SpriteBatch. +* * @method destroy */ PIXI.WebGLSpriteBatch.prototype.destroy = function() { - this.vertices = null; this.indices = null; @@ -8016,7 +9081,6 @@ this.gl = null; }; - /** * @author Mat Groves * @@ -8027,27 +9091,66 @@ * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java */ +/** +* @class WebGLFastSpriteBatch +* @constructor +*/ PIXI.WebGLFastSpriteBatch = function(gl) { - - + /** + * @property vertSize + * @type Number + */ this.vertSize = 10; + + /** + * @property maxSize + * @type Number + */ this.maxSize = 6000;//Math.pow(2, 16) / this.vertSize; + + /** + * @property size + * @type Number + */ this.size = this.maxSize; //the total number of floats in our batch var numVerts = this.size * 4 * this.vertSize; + //the total number of indices in our batch var numIndices = this.maxSize * 6; - //vertex data + /** + * Vertex data + * @property vertices + * @type Float32Array + */ this.vertices = new Float32Array(numVerts); - //index data + + /** + * Index data + * @property indices + * @type Uint16Array + */ this.indices = new Uint16Array(numIndices); + /** + * @property vertexBuffer + * @type Object + */ this.vertexBuffer = null; + + /** + * @property indexBuffer + * @type Object + */ this.indexBuffer = null; + /** + * @property lastIndexCount + * @type Number + */ this.lastIndexCount = 0; for (var i=0, j=0; i < numIndices; i += 6, j += 4) @@ -8060,21 +9163,59 @@ this.indices[i + 5] = j + 3; } + /** + * @property drawing + * @type Boolean + */ this.drawing = false; + + /** + * @property currentBatchSize + * @type Number + */ this.currentBatchSize = 0; + + /** + * @property currentBaseTexture + * @type BaseTexture + */ this.currentBaseTexture = null; + /** + * @property currentBlendMode + * @type Number + */ this.currentBlendMode = 0; + + /** + * @property renderSession + * @type Object + */ this.renderSession = null; - + /** + * @property shader + * @type Object + */ this.shader = null; + /** + * @property matrix + * @type Matrix + */ this.matrix = null; this.setContext(gl); }; +PIXI.WebGLFastSpriteBatch.prototype.constructor = PIXI.WebGLFastSpriteBatch; + +/** + * Sets the WebGL Context. + * + * @method setContext + * @param gl {WebGLContext} the current WebGL drawing context + */ PIXI.WebGLFastSpriteBatch.prototype.setContext = function(gl) { this.gl = gl; @@ -8085,7 +9226,6 @@ // 65535 is max index, so 65535 / 6 = 10922. - //upload the index data gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); @@ -8094,6 +9234,11 @@ gl.bufferData(gl.ARRAY_BUFFER, this.vertices, gl.DYNAMIC_DRAW); }; +/** + * @method begin + * @param spriteBatch {WebGLSpriteBatch} + * @param renderSession {Object} + */ PIXI.WebGLFastSpriteBatch.prototype.begin = function(spriteBatch, renderSession) { this.renderSession = renderSession; @@ -8104,15 +9249,20 @@ this.start(); }; +/** + * @method end + */ PIXI.WebGLFastSpriteBatch.prototype.end = function() { this.flush(); }; - +/** + * @method render + * @param spriteBatch {WebGLSpriteBatch} + */ PIXI.WebGLFastSpriteBatch.prototype.render = function(spriteBatch) { - var children = spriteBatch.children; var sprite = children[0]; @@ -8138,6 +9288,10 @@ this.flush(); }; +/** + * @method renderSprite + * @param sprite {Sprite} + */ PIXI.WebGLFastSpriteBatch.prototype.renderSprite = function(sprite) { //sprite = children[i]; @@ -8156,7 +9310,6 @@ uvs = sprite.texture._uvs; - width = sprite.texture.frame.width; height = sprite.texture.frame.height; @@ -8276,9 +9429,11 @@ } }; +/** + * @method flush + */ PIXI.WebGLFastSpriteBatch.prototype.flush = function() { - // If the batch is length 0 then return as there is nothing to draw if (this.currentBatchSize===0)return; @@ -8286,12 +9441,11 @@ // bind the current texture - if(!this.currentBaseTexture._glTextures[gl.id])PIXI.createWebGLTexture(this.currentBaseTexture, gl); + if(!this.currentBaseTexture._glTextures[gl.id])this.renderSession.renderer.updateTexture(this.currentBaseTexture, gl); gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); // upload the verts to the buffer - if(this.currentBatchSize > ( this.size * 0.5 ) ) { @@ -8304,7 +9458,6 @@ gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, this.currentBatchSize * 6, gl.UNSIGNED_SHORT, 0); @@ -8316,11 +9469,17 @@ }; +/** + * @method stop + */ PIXI.WebGLFastSpriteBatch.prototype.stop = function() { this.flush(); }; +/** + * @method start + */ PIXI.WebGLFastSpriteBatch.prototype.start = function() { var gl = this.gl; @@ -8348,12 +9507,9 @@ gl.vertexAttribPointer(this.shader.aRotation, 1, gl.FLOAT, false, stride, 6 * 4); gl.vertexAttribPointer(this.shader.aTextureCoord, 2, gl.FLOAT, false, stride, 7 * 4); gl.vertexAttribPointer(this.shader.colorAttribute, 1, gl.FLOAT, false, stride, 9 * 4); - }; - - /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -8361,25 +9517,33 @@ /** * @class WebGLFilterManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context -* @param transparent {Boolean} Whether or not the drawing context should be transparent -* @private */ -PIXI.WebGLFilterManager = function(gl, transparent) +PIXI.WebGLFilterManager = function() { - this.transparent = transparent; - + /** + * @property filterStack + * @type Array + */ this.filterStack = []; + /** + * @property offsetX + * @type Number + */ this.offsetX = 0; - this.offsetY = 0; - this.setContext(gl); + /** + * @property offsetY + * @type Number + */ + this.offsetY = 0; }; -// API +PIXI.WebGLFilterManager.prototype.constructor = PIXI.WebGLFilterManager; + /** -* Initialises the context and the properties +* Initialises the context and the properties. +* * @method setContext * @param gl {WebGLContext} the current WebGL drawing context */ @@ -8392,7 +9556,6 @@ }; /** -* * @method begin * @param renderSession {RenderSession} * @param buffer {ArrayBuffer} @@ -8403,14 +9566,14 @@ this.defaultShader = renderSession.shaderManager.defaultShader; var projection = this.renderSession.projection; - // console.log(this.width) this.width = projection.x * 2; this.height = -projection.y * 2; this.buffer = buffer; }; /** -* Applies the filter and adds it to the current filter stack +* Applies the filter and adds it to the current filter stack. +* * @method pushFilter * @param filterBlock {Object} the filter that will be pushed to the current filter stack */ @@ -8423,7 +9586,6 @@ filterBlock._filterArea = filterBlock.target.filterArea || filterBlock.target.getBounds(); - // filter program // OPTIMISATION - the first filter is free if its a simple color change? this.filterStack.push(filterBlock); @@ -8473,9 +9635,9 @@ // update projection // now restore the regular shader.. - this.renderSession.shaderManager.setShader(this.defaultShader); - gl.uniform2f(this.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); - gl.uniform2f(this.defaultShader.offsetVector, -filterArea.x, -filterArea.y); + // this.renderSession.shaderManager.setShader(this.defaultShader); + //gl.uniform2f(this.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); + //gl.uniform2f(this.defaultShader.offsetVector, -filterArea.x, -filterArea.y); gl.colorMask(true, true, true, true); gl.clearColor(0,0,0, 0); @@ -8485,9 +9647,9 @@ }; - /** -* Removes the last filter from the filter stack and doesn't return it +* Removes the last filter from the filter stack and doesn't return it. +* * @method popFilter */ PIXI.WebGLFilterManager.prototype.popFilter = function() @@ -8570,7 +9732,6 @@ this.offsetX -= filterArea.x; this.offsetY -= filterArea.y; - var sizeX = this.width; var sizeY = this.height; @@ -8598,9 +9759,7 @@ buffer = currentFilter._glFilterTexture.frameBuffer; } - - - // TODO need toremove thease global elements.. + // TODO need to remove these global elements.. projection.x = sizeX/2; projection.y = -sizeY/2; @@ -8639,10 +9798,6 @@ gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - //console.log(this.vertexArray) - //console.log(this.uvArray) - //console.log(sizeX + " : " + sizeY) - gl.viewport(0, 0, sizeX, sizeY); // bind the buffer @@ -8658,10 +9813,10 @@ // apply! this.applyFilterPass(filter, filterArea, sizeX, sizeY); - // now restore the regular shader.. - this.renderSession.shaderManager.setShader(this.defaultShader); - gl.uniform2f(this.defaultShader.projectionVector, sizeX/2, -sizeY/2); - gl.uniform2f(this.defaultShader.offsetVector, -offsetX, -offsetY); + // now restore the regular shader.. should happen automatically now.. + // this.renderSession.shaderManager.setShader(this.defaultShader); + // gl.uniform2f(this.defaultShader.projectionVector, sizeX/2, -sizeY/2); + // gl.uniform2f(this.defaultShader.offsetVector, -offsetX, -offsetY); // return the texture to the pool this.texturePool.push(texture); @@ -8670,10 +9825,11 @@ /** -* Applies the filter to the specified area +* Applies the filter to the specified area. +* * @method applyFilterPass * @param filter {AbstractFilter} the filter that needs to be applied -* @param filterArea {texture} TODO - might need an update +* @param filterArea {Texture} TODO - might need an update * @param width {Number} the horizontal range of the filter * @param height {Number} the vertical range of the filter */ @@ -8710,7 +9866,6 @@ filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; } - // console.log(this.uvArray ) shader.syncUniforms(); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); @@ -8731,7 +9886,8 @@ }; /** -* Initialises the shader buffers +* Initialises the shader buffers. +* * @method initShaderBuffers */ PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() @@ -8744,7 +9900,6 @@ this.colorBuffer = gl.createBuffer(); this.indexBuffer = gl.createBuffer(); - // bind and upload the vertexs.. // keep a reference to the vertexFloatData.. this.vertexArray = new Float32Array([0.0, 0.0, @@ -8753,11 +9908,7 @@ 1.0, 1.0]); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.vertexArray, - gl.STATIC_DRAW); - + gl.bufferData(gl.ARRAY_BUFFER, this.vertexArray, gl.STATIC_DRAW); // bind and upload the uv buffer this.uvArray = new Float32Array([0.0, 0.0, @@ -8766,10 +9917,7 @@ 1.0, 1.0]); gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.uvArray, - gl.STATIC_DRAW); + gl.bufferData(gl.ARRAY_BUFFER, this.uvArray, gl.STATIC_DRAW); this.colorArray = new Float32Array([1.0, 0xFFFFFF, 1.0, 0xFFFFFF, @@ -8777,21 +9925,17 @@ 1.0, 0xFFFFFF]); gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.colorArray, - gl.STATIC_DRAW); + gl.bufferData(gl.ARRAY_BUFFER, this.colorArray, gl.STATIC_DRAW); // bind and upload the index gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData( - gl.ELEMENT_ARRAY_BUFFER, - new Uint16Array([0, 1, 2, 1, 3, 2]), - gl.STATIC_DRAW); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0, 1, 2, 1, 3, 2]), gl.STATIC_DRAW); + }; /** -* Destroys the filter and removes it from the filter stack +* Destroys the filter and removes it from the filter stack. +* * @method destroy */ PIXI.WebGLFilterManager.prototype.destroy = function() @@ -8828,7 +9972,6 @@ * @param width {Number} the horizontal range of the filter * @param height {Number} the vertical range of the filter * @param scaleMode {Number} Should be one of the PIXI.scaleMode consts -* @private */ PIXI.FilterTexture = function(gl, width, height, scaleMode) { @@ -8839,9 +9982,23 @@ this.gl = gl; // next time to create a frame buffer and texture + + /** + * @property frameBuffer + * @type Any + */ this.frameBuffer = gl.createFramebuffer(); + + /** + * @property texture + * @type Any + */ this.texture = gl.createTexture(); + /** + * @property scaleMode + * @type Number + */ scaleMode = scaleMode || PIXI.scaleModes.DEFAULT; gl.bindTexture(gl.TEXTURE_2D, this.texture); @@ -8849,7 +10006,7 @@ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === PIXI.scaleModes.LINEAR ? gl.LINEAR : gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); + gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); @@ -8862,9 +10019,11 @@ this.resize(width, height); }; +PIXI.FilterTexture.prototype.constructor = PIXI.FilterTexture; /** -* Clears the filter texture +* Clears the filter texture. +* * @method clear */ PIXI.FilterTexture.prototype.clear = function() @@ -8892,15 +10051,15 @@ var gl = this.gl; gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width , height , 0, gl.RGBA, gl.UNSIGNED_BYTE, null); // update the stencil buffer width and height gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); - gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width, height); + gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width , height ); }; /** -* Destroys the filter texture +* Destroys the filter texture. +* * @method destroy */ PIXI.FilterTexture.prototype.destroy = function() @@ -8914,35 +10073,121 @@ }; /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ + /** - * A set of functions used to handle masking + * Creates a Canvas element of the given size. * - * @class CanvasMaskManager + * @class CanvasBuffer + * @constructor + * @param width {Number} the width for the newly created canvas + * @param height {Number} the height for the newly created canvas */ -PIXI.CanvasMaskManager = function() +PIXI.CanvasBuffer = function(width, height) { - + /** + * The width of the Canvas in pixels. + * + * @property width + * @type Number + */ + this.width = width; + + /** + * The height of the Canvas in pixels. + * + * @property height + * @type Number + */ + this.height = height; + + /** + * The Canvas object that belongs to this CanvasBuffer. + * + * @property canvas + * @type HTMLCanvasElement + */ + this.canvas = document.createElement("canvas"); + + /** + * A CanvasRenderingContext2D object representing a two-dimensional rendering context. + * + * @property context + * @type CanvasRenderingContext2D + */ + this.context = this.canvas.getContext("2d"); + + this.canvas.width = width; + this.canvas.height = height; +}; + +PIXI.CanvasBuffer.prototype.constructor = PIXI.CanvasBuffer; + +/** + * Clears the canvas that was created by the CanvasBuffer class. + * + * @method clear + * @private + */ +PIXI.CanvasBuffer.prototype.clear = function() +{ + this.context.clearRect(0,0, this.width, this.height); }; /** - * This method adds it to the current stack of masks + * Resizes the canvas to the specified width and height. + * + * @method resize + * @param width {Number} the new width of the canvas + * @param height {Number} the new height of the canvas + */ +PIXI.CanvasBuffer.prototype.resize = function(width, height) +{ + this.width = this.canvas.width = width; + this.height = this.canvas.height = height; +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * A set of functions used to handle masking. + * + * @class CanvasMaskManager + * @constructor + */ +PIXI.CanvasMaskManager = function() +{ +}; + +PIXI.CanvasMaskManager.prototype.constructor = PIXI.CanvasMaskManager; + +/** + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {Context2D} the 2d drawing method of the canvas + * @param maskData {Object} the maskData that will be pushed + * @param renderSession {Object} The renderSession whose context will be used for this mask manager. */ -PIXI.CanvasMaskManager.prototype.pushMask = function(maskData, context) +PIXI.CanvasMaskManager.prototype.pushMask = function(maskData, renderSession) { + var context = renderSession.context; + context.save(); var cacheAlpha = maskData.alpha; var transform = maskData.worldTransform; - context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx, transform.ty); + var resolution = renderSession.resolution; + + context.setTransform(transform.a * resolution, + transform.b * resolution, + transform.c * resolution, + transform.d * resolution, + transform.tx * resolution, + transform.ty * resolution); PIXI.CanvasGraphics.renderGraphicsMask(maskData, context); @@ -8952,20 +10197,18 @@ }; /** - * Restores the current drawing context to the state it was before the mask was applied + * Restores the current drawing context to the state it was before the mask was applied. * * @method popMask - * @param context {Context2D} the 2d drawing method of the canvas + * @param renderSession {Object} The renderSession whose context will be used for this mask manager. */ -PIXI.CanvasMaskManager.prototype.popMask = function(context) +PIXI.CanvasMaskManager.prototype.popMask = function(renderSession) { - context.restore(); + renderSession.context.restore(); }; /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -8975,23 +10218,18 @@ */ PIXI.CanvasTinter = function() { - /// this.textureCach }; -//PIXI.CanvasTinter.cachTint = true; - - /** - * Basically this method just needs a sprite and a color and tints the sprite - * with the given color + * Basically this method just needs a sprite and a color and tints the sprite with the given color. * * @method getTintedTexture * @param sprite {Sprite} the sprite to tint * @param color {Number} the color to use to tint the sprite with + * @return {HTMLCanvasElement} The tinted canvas */ PIXI.CanvasTinter.getTintedTexture = function(sprite, color) { - var texture = sprite.texture; color = PIXI.CanvasTinter.roundColor(color); @@ -9006,8 +10244,6 @@ var canvas = PIXI.CanvasTinter.canvas || document.createElement("canvas"); //PIXI.CanvasTinter.tintWithPerPixel(texture, stringColor, canvas); - - PIXI.CanvasTinter.tintMethod(texture, color, canvas); if(PIXI.CanvasTinter.convertTintToImage) @@ -9020,20 +10256,19 @@ } else { - texture.tintCache[stringColor] = canvas; // if we are not converting the texture to an image then we need to lose the reference to the canvas PIXI.CanvasTinter.canvas = null; - } return canvas; }; /** - * Tint a texture using the "multiply" operation + * Tint a texture using the "multiply" operation. + * * @method tintWithMultiply - * @param texture {texture} the texture to tint + * @param texture {Texture} the texture to tint * @param color {Number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ @@ -9041,44 +10276,45 @@ { var context = canvas.getContext( "2d" ); - var frame = texture.frame; + var crop = texture.crop; - canvas.width = frame.width; - canvas.height = frame.height; + canvas.width = crop.width; + canvas.height = crop.height; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); - context.fillRect(0, 0, frame.width, frame.height); + context.fillRect(0, 0, crop.width, crop.height); context.globalCompositeOperation = "multiply"; context.drawImage(texture.baseTexture.source, - frame.x, - frame.y, - frame.width, - frame.height, + crop.x, + crop.y, + crop.width, + crop.height, 0, 0, - frame.width, - frame.height); + crop.width, + crop.height); context.globalCompositeOperation = "destination-atop"; - + context.drawImage(texture.baseTexture.source, - frame.x, - frame.y, - frame.width, - frame.height, + crop.x, + crop.y, + crop.width, + crop.height, 0, 0, - frame.width, - frame.height); + crop.width, + crop.height); }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay - * @param texture {texture} the texture to tint + * @param texture {Texture} the texture to tint * @param color {Number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ @@ -9086,37 +10322,34 @@ { var context = canvas.getContext( "2d" ); - var frame = texture.frame; + var crop = texture.crop; - canvas.width = frame.width; - canvas.height = frame.height; - - + canvas.width = crop.width; + canvas.height = crop.height; context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); - context.fillRect(0, 0, frame.width, frame.height); + context.fillRect(0, 0, crop.width, crop.height); context.globalCompositeOperation = "destination-atop"; context.drawImage(texture.baseTexture.source, - frame.x, - frame.y, - frame.width, - frame.height, + crop.x, + crop.y, + crop.width, + crop.height, 0, 0, - frame.width, - frame.height); - + crop.width, + crop.height); //context.globalCompositeOperation = "copy"; - }; /** - * Tint a texture pixel per pixel + * Tint a texture pixel per pixel. + * * @method tintPerPixel - * @param texture {texture} the texture to tint + * @param texture {Texture} the texture to tint * @param color {Number} the color to use to tint the sprite with * @param canvas {HTMLCanvasElement} the current canvas */ @@ -9124,26 +10357,26 @@ { var context = canvas.getContext( "2d" ); - var frame = texture.frame; + var crop = texture.crop; - canvas.width = frame.width; - canvas.height = frame.height; + canvas.width = crop.width; + canvas.height = crop.height; context.globalCompositeOperation = "copy"; context.drawImage(texture.baseTexture.source, - frame.x, - frame.y, - frame.width, - frame.height, + crop.x, + crop.y, + crop.width, + crop.height, 0, 0, - frame.width, - frame.height); + crop.width, + crop.height); var rgbValues = PIXI.hex2rgb(color); var r = rgbValues[0], g = rgbValues[1], b = rgbValues[2]; - var pixelData = context.getImageData(0, 0, frame.width, frame.height); + var pixelData = context.getImageData(0, 0, crop.width, crop.height); var pixels = pixelData.data; @@ -9158,7 +10391,8 @@ }; /** - * Rounds the specified color according to the PIXI.CanvasTinter.cacheStepsPerColorChannel + * Rounds the specified color according to the PIXI.CanvasTinter.cacheStepsPerColorChannel. + * * @method roundColor * @param color {number} the color to round, should be a hex color */ @@ -9176,16 +10410,15 @@ }; /** - * - * Number of steps which will be used as a cap when rounding colors + * Number of steps which will be used as a cap when rounding colors. * * @property cacheStepsPerColorChannel * @type Number */ PIXI.CanvasTinter.cacheStepsPerColorChannel = 8; + /** - * - * Number of steps which will be used as a cap when rounding colors + * Tint cache boolean flag. * * @property convertTintToImage * @type Boolean @@ -9193,42 +10426,75 @@ PIXI.CanvasTinter.convertTintToImage = false; /** - * Whether or not the Canvas BlendModes are supported, consequently the ability to tint using the multiply method + * Whether or not the Canvas BlendModes are supported, consequently the ability to tint using the multiply method. * * @property canUseMultiply * @type Boolean */ PIXI.CanvasTinter.canUseMultiply = PIXI.canUseNewCanvasBlendModes(); +/** + * The tinting method that will be used. + * + * @method tintMethod + */ PIXI.CanvasTinter.tintMethod = PIXI.CanvasTinter.canUseMultiply ? PIXI.CanvasTinter.tintWithMultiply : PIXI.CanvasTinter.tintWithPerPixel; - /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL. - * Dont forget to add the view to your DOM or you will not see anything :) + * The CanvasRenderer draws the Stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL. + * Don't forget to add the CanvasRenderer.view to your DOM or you will not see anything :) * * @class CanvasRenderer * @constructor - * @param width=800 {Number} the width of the canvas view - * @param height=600 {Number} the height of the canvas view - * @param [view] {HTMLCanvasElement} the canvas to use as a view, optional - * @param [transparent=false] {Boolean} the transparency of the render view, default false + * @param [width=800] {Number} the width of the canvas view + * @param [height=600] {Number} the height of the canvas view + * @param [options] {Object} The optional renderer parameters + * @param [options.view] {HTMLCanvasElement} the canvas to use as a view, optional + * @param [options.transparent=false] {Boolean} If the render view is transparent, default false + * @param [options.resolution=1] {Number} the resolution of the renderer retina would be 2 + * @param [options.clearBeforeRender=true] {Boolean} This sets if the CanvasRenderer will clear the canvas or not before the new render pass. */ -PIXI.CanvasRenderer = function(width, height, view, transparent) +PIXI.CanvasRenderer = function(width, height, options) { + if(options) + { + for (var i in PIXI.defaultRenderOptions) + { + if (typeof options[i] === "undefined") options[i] = PIXI.defaultRenderOptions[i]; + } + } + else + { + options = PIXI.defaultRenderOptions; + } + if(!PIXI.defaultRenderer) { PIXI.sayHello("Canvas"); PIXI.defaultRenderer = this; } + /** + * The renderer type. + * + * @property type + * @type Number + */ this.type = PIXI.CANVAS_RENDERER; /** + * The resolution of the canvas. + * + * @property resolution + * @type Number + */ + this.resolution = options.resolution; + + /** * This sets if the CanvasRenderer will clear the canvas or not before the new render pass. * If the Stage is NOT transparent Pixi will use a canvas sized fillRect operation every frame to set the canvas background color. * If the Stage is transparent Pixi will use clearRect to clear the canvas every frame. @@ -9238,7 +10504,7 @@ * @type Boolean * @default */ - this.clearBeforeRender = true; + this.clearBeforeRender = options.clearBeforeRender; /** * Whether the render view is transparent @@ -9246,8 +10512,220 @@ * @property transparent * @type Boolean */ - this.transparent = !!transparent; + this.transparent = options.transparent; + + /** + * The width of the canvas view + * + * @property width + * @type Number + * @default 800 + */ + this.width = width || 800; + /** + * The height of the canvas view + * + * @property height + * @type Number + * @default 600 + */ + this.height = height || 600; + + this.width *= this.resolution; + this.height *= this.resolution; + + /** + * The canvas element that everything is drawn to. + * + * @property view + * @type HTMLCanvasElement + */ + this.view = options.view || document.createElement( "canvas" ); + + /** + * The canvas 2d context that everything is drawn with + * @property context + * @type CanvasRenderingContext2D + */ + this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ + this.refresh = true; + + this.view.width = this.width * this.resolution; + this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ + this.count = 0; + + /** + * Instance of a PIXI.CanvasMaskManager, handles masking when using the canvas renderer + * @property CanvasMaskManager + * @type CanvasMaskManager + */ + this.maskManager = new PIXI.CanvasMaskManager(); + + /** + * The render session is just a bunch of parameter used for rendering + * @property renderSession + * @type Object + */ + this.renderSession = { + context: this.context, + maskManager: this.maskManager, + scaleMode: null, + smoothProperty: null, + /** + * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. + * Handy for crisp pixel art and speed on legacy devices. + * + */ + roundPixels: false + }; + + this.mapBlendModes(); + + this.resize(width, height); + + if("imageSmoothingEnabled" in this.context) + this.renderSession.smoothProperty = "imageSmoothingEnabled"; + else if("webkitImageSmoothingEnabled" in this.context) + this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; + else if("mozImageSmoothingEnabled" in this.context) + this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; + else if("oImageSmoothingEnabled" in this.context) + this.renderSession.smoothProperty = "oImageSmoothingEnabled"; + else if ("msImageSmoothingEnabled" in this.context) + this.renderSession.smoothProperty = "msImageSmoothingEnabled"; +}; + +// constructor +PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; + +/** + * Renders the Stage to this canvas view + * + * @method render + * @param stage {Stage} the Stage element to be rendered + */ +PIXI.CanvasRenderer.prototype.render = function(stage) +{ + stage.updateTransform(); + + this.context.setTransform(1,0,0,1,0,0); + + this.context.globalAlpha = 1; + + this.renderSession.currentBlendMode = PIXI.blendModes.NORMAL; + this.context.globalCompositeOperation = PIXI.blendModesCanvas[PIXI.blendModes.NORMAL]; + + if (navigator.isCocoonJS && this.view.screencanvas) { + this.context.fillStyle = "black"; + this.context.clear(); + } + + if (this.clearBeforeRender) + { + if (this.transparent) + { + this.context.clearRect(0, 0, this.width, this.height); + } + else + { + this.context.fillStyle = stage.backgroundColorString; + this.context.fillRect(0, 0, this.width , this.height); + } + } + + this.renderDisplayObject(stage); + + // run interaction! + if(stage.interactive) + { + //need to add some events! + if(!stage._interactiveEventsAdded) + { + stage._interactiveEventsAdded = true; + stage.interactionManager.setTarget(this); + } + } +}; + +/** + * Removes everything from the renderer and optionally removes the Canvas DOM element. + * + * @method destroy + * @param [removeView=true] {boolean} Removes the Canvas element from the DOM. + */ +PIXI.CanvasRenderer.prototype.destroy = function(removeView) +{ + if (typeof removeView === "undefined") { removeView = true; } + + if (removeView && this.view.parent) + { + this.view.parent.removeChild(this.view); + } + + this.view = null; + this.context = null; + this.maskManager = null; + this.renderSession = null; + +}; + +/** + * Resizes the canvas view to the specified width and height + * + * @method resize + * @param width {Number} the new width of the canvas view + * @param height {Number} the new height of the canvas view + */ +PIXI.CanvasRenderer.prototype.resize = function(width, height) +{ + this.width = width * this.resolution; + this.height = height * this.resolution; + + this.view.width = this.width; + this.view.height = this.height; + + this.view.style.width = this.width / this.resolution + "px"; + this.view.style.height = this.height / this.resolution + "px"; +}; + +/** + * Renders a display object + * + * @method renderDisplayObject + * @param displayObject {DisplayObject} The displayObject to render + * @param context {CanvasRenderingContext2D} the context 2d method of the canvas + * @private + */ +PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject, context) +{ + this.renderSession.context = context || this.context; + this.renderSession.resolution = this.resolution; + displayObject._renderCanvas(this.renderSession); +}; + +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ +PIXI.CanvasRenderer.prototype.mapBlendModes = function() +{ if(!PIXI.blendModesCanvas) { PIXI.blendModesCanvas = []; @@ -9294,335 +10772,30 @@ PIXI.blendModesCanvas[PIXI.blendModes.LUMINOSITY] = "source-over"; } } - - /** - * The width of the canvas view - * - * @property width - * @type Number - * @default 800 - */ - this.width = width || 800; - - /** - * The height of the canvas view - * - * @property height - * @type Number - * @default 600 - */ - this.height = height || 600; - - /** - * The canvas element that everything is drawn to - * - * @property view - * @type HTMLCanvasElement - */ - this.view = view || document.createElement( "canvas" ); - - /** - * The canvas 2d context that everything is drawn with - * @property context - * @type HTMLCanvasElement 2d Context - */ - this.context = this.view.getContext( "2d", { alpha: this.transparent } ); - - this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; - - this.view.width = this.width; - this.view.height = this.height; - this.count = 0; - - /** - * Instance of a PIXI.CanvasMaskManager, handles masking when using the canvas renderer - * @property CanvasMaskManager - * @type CanvasMaskManager - */ - this.maskManager = new PIXI.CanvasMaskManager(); - - /** - * The render session is just a bunch of parameter used for rendering - * @property renderSession - * @type Object - */ - this.renderSession = { - context: this.context, - maskManager: this.maskManager, - scaleMode: null, - smoothProperty: null, - - /** - * If true Pixi will Math.floor() x/y values when rendering, stopping pixel interpolation. - * Handy for crisp pixel art and speed on legacy devices. - * - */ - roundPixels: false - }; - - if("imageSmoothingEnabled" in this.context) - this.renderSession.smoothProperty = "imageSmoothingEnabled"; - else if("webkitImageSmoothingEnabled" in this.context) - this.renderSession.smoothProperty = "webkitImageSmoothingEnabled"; - else if("mozImageSmoothingEnabled" in this.context) - this.renderSession.smoothProperty = "mozImageSmoothingEnabled"; - else if("oImageSmoothingEnabled" in this.context) - this.renderSession.smoothProperty = "oImageSmoothingEnabled"; }; -// constructor -PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; - -/** - * Renders the stage to its canvas view - * - * @method render - * @param stage {Stage} the Stage element to be rendered - */ -PIXI.CanvasRenderer.prototype.render = function(stage) -{ - // update textures if need be - PIXI.texturesToUpdate.length = 0; - PIXI.texturesToDestroy.length = 0; - - stage.updateTransform(); - - this.context.setTransform(1,0,0,1,0,0); - this.context.globalAlpha = 1; - - if (navigator.isCocoonJS && this.view.screencanvas) { - this.context.fillStyle = "black"; - this.context.clear(); - } - - if (!this.transparent && this.clearBeforeRender) - { - this.context.fillStyle = stage.backgroundColorString; - this.context.fillRect(0, 0, this.width, this.height); - } - else if (this.transparent && this.clearBeforeRender) - { - this.context.clearRect(0, 0, this.width, this.height); - } - - this.renderDisplayObject(stage); - - // run interaction! - if(stage.interactive) - { - //need to add some events! - if(!stage._interactiveEventsAdded) - { - stage._interactiveEventsAdded = true; - stage.interactionManager.setTarget(this); - } - } - - // remove frame updates.. - if(PIXI.Texture.frameUpdates.length > 0) - { - PIXI.Texture.frameUpdates.length = 0; - } -}; - -/** - * Resizes the canvas view to the specified width and height - * - * @method resize - * @param width {Number} the new width of the canvas view - * @param height {Number} the new height of the canvas view - */ -PIXI.CanvasRenderer.prototype.resize = function(width, height) -{ - this.width = width; - this.height = height; - - this.view.width = width; - this.view.height = height; -}; - -/** - * Renders a display object - * - * @method renderDisplayObject - * @param displayObject {DisplayObject} The displayObject to render - * @param context {Context2D} the context 2d method of the canvas - * @private - */ -PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject, context) -{ - // no longer recursive! - //var transform; - //var context = this.context; - - this.renderSession.context = context || this.context; - displayObject._renderCanvas(this.renderSession); -}; - -/** - * Renders a flat strip - * - * @method renderStripFlat - * @param strip {Strip} The Strip to render - * @private - */ -PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip) -{ - var context = this.context; - var verticies = strip.verticies; - - var length = verticies.length/2; - this.count++; - - context.beginPath(); - for (var i=1; i < length-2; i++) - { - // draw some triangles! - var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - - context.moveTo(x0, y0); - context.lineTo(x1, y1); - context.lineTo(x2, y2); - } - - context.fillStyle = "#FF0000"; - context.fill(); - context.closePath(); -}; - -/** - * Renders a strip - * - * @method renderStrip - * @param strip {Strip} The Strip to render - * @private - */ -PIXI.CanvasRenderer.prototype.renderStrip = function(strip) -{ - var context = this.context; - - // draw triangles!! - var verticies = strip.verticies; - var uvs = strip.uvs; - - var length = verticies.length/2; - this.count++; - - for (var i = 1; i < length-2; i++) - { - // draw some triangles! - var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - - var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; - var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; - - context.save(); - context.beginPath(); - context.moveTo(x0, y0); - context.lineTo(x1, y1); - context.lineTo(x2, y2); - context.closePath(); - - context.clip(); - - // Compute matrix transform - var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2; - var deltaA = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; - var deltaB = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; - var deltaC = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; - var deltaD = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; - var deltaE = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; - var deltaF = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; - - context.transform(deltaA / delta, deltaD / delta, - deltaB / delta, deltaE / delta, - deltaC / delta, deltaF / delta); - - context.drawImage(strip.texture.baseTexture.source, 0, 0); - context.restore(); - } -}; - -/** - * Creates a Canvas element of the given size - * - * @method CanvasBuffer - * @param width {Number} the width for the newly created canvas - * @param height {Number} the height for the newly created canvas - * @static - * @private - */ -PIXI.CanvasBuffer = function(width, height) -{ - this.width = width; - this.height = height; - - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); - - this.canvas.width = width; - this.canvas.height = height; -}; - -/** - * Clears the canvas that was created by the CanvasBuffer class - * - * @method clear - * @private - */ -PIXI.CanvasBuffer.prototype.clear = function() -{ - this.context.clearRect(0,0, this.width, this.height); -}; - -/** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height - * - * @method resize - * @param width {Number} the new width of the canvas - * @param height {Number} the new height of the canvas - * @private - */ - -PIXI.CanvasBuffer.prototype.resize = function(width, height) -{ - this.width = this.canvas.width = width; - this.height = this.canvas.height = height; -}; - - /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * A set of functions used by the canvas renderer to draw the primitive graphics data + * A set of functions used by the canvas renderer to draw the primitive graphics data. * * @class CanvasGraphics + * @static */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * - * @static - * @private * @method renderGraphics + * @static * @param graphics {Graphics} the actual graphics object to render - * @param context {Context2D} the 2d drawing method of the canvas + * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas */ PIXI.CanvasGraphics.renderGraphics = function(graphics, context) { @@ -9632,7 +10805,7 @@ for (var i = 0; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; - var points = data.points; + var shape = data.shape; context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); @@ -9642,6 +10815,8 @@ { context.beginPath(); + var points = shape.points; + context.moveTo(points[0], points[1]); for (var j=1; j < points.length/2; j++) @@ -9649,6 +10824,11 @@ context.lineTo(points[j * 2], points[j * 2 + 1]); } + if(shape.closed) + { + context.lineTo(points[0], points[1]); + } + // if the first and last point are the same close the path - much neater :) if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { @@ -9674,21 +10854,20 @@ { context.globalAlpha = data.fillAlpha * worldAlpha; context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); - context.fillRect(points[0], points[1], points[2], points[3]); + context.fillRect(shape.x, shape.y, shape.width, shape.height); } if(data.lineWidth) { context.globalAlpha = data.lineAlpha * worldAlpha; - context.strokeRect(points[0], points[1], points[2], points[3]); + context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); - context.arc(points[0], points[1], points[2],0,2*Math.PI); + context.arc(shape.x, shape.y, shape.radius,0,2*Math.PI); context.closePath(); if(data.fill) @@ -9705,16 +10884,13 @@ } else if(data.type === PIXI.Graphics.ELIP) { - // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - var ellipseData = data.points; + var w = shape.width * 2; + var h = shape.height * 2; - var w = ellipseData[2] * 2; - var h = ellipseData[3] * 2; - - var x = ellipseData[0] - w/2; - var y = ellipseData[1] - h/2; + var x = shape.x - w/2; + var y = shape.y - h/2; context.beginPath(); @@ -9748,11 +10924,12 @@ } else if (data.type === PIXI.Graphics.RREC) { - var rx = points[0]; - var ry = points[1]; - var width = points[2]; - var height = points[3]; - var radius = points[4]; + var pts = shape.points; + var rx = pts[0]; + var ry = pts[1]; + var width = pts[2]; + var height = pts[3]; + var radius = pts[4]; var maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; @@ -9792,7 +10969,7 @@ * @private * @method renderGraphicsMask * @param graphics {Graphics} the graphics which will be used as a mask - * @param context {Context2D} the context 2d method of the canvas + * @param context {CanvasRenderingContext2D} the context 2d method of the canvas */ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context) { @@ -9809,11 +10986,14 @@ for (var i = 0; i < 1; i++) { var data = graphics.graphicsData[i]; - var points = data.points; + var shape = data.shape; if(data.type === PIXI.Graphics.POLY) { context.beginPath(); + + var points = shape.points; + context.moveTo(points[0], points[1]); for (var j=1; j < points.length/2; j++) @@ -9831,27 +11011,26 @@ else if(data.type === PIXI.Graphics.RECT) { context.beginPath(); - context.rect(points[0], points[1], points[2], points[3]); + context.rect(shape.x, shape.y, shape.width, shape.height); context.closePath(); } else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); - context.arc(points[0], points[1], points[2],0,2*Math.PI); + context.arc(shape.x, shape.y, shape.radius,0,2*Math.PI); context.closePath(); } else if(data.type === PIXI.Graphics.ELIP) { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - var ellipseData = data.points; - var w = ellipseData[2] * 2; - var h = ellipseData[3] * 2; + var w = shape.width * 2; + var h = shape.height * 2; - var x = ellipseData[0] - w/2; - var y = ellipseData[1] - h/2; + var x = shape.x - w/2; + var y = shape.y - h/2; context.beginPath(); @@ -9872,11 +11051,13 @@ } else if (data.type === PIXI.Graphics.RREC) { - var rx = points[0]; - var ry = points[1]; - var width = points[2]; - var height = points[3]; - var radius = points[4]; + + var pts = shape.points; + var rx = pts[0]; + var ry = pts[1]; + var width = pts[2]; + var height = pts[3]; + var radius = pts[4]; var maxRadius = Math.min(width, height) / 2 | 0; radius = radius > maxRadius ? maxRadius : radius; @@ -9900,12 +11081,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * The Graphics class contains a set of methods that you can use to create primitive shapes and lines. - * It is important to know that with the webGL renderer only simple polygons can be filled at this stage - * Complex polygons will not be filled. Heres an example of a complex polygon: http://www.goodboydigital.com/wp-content/uploads/2013/06/complexPolygon.png - * + * The Graphics class contains methods used to draw primitive shapes such as lines, circles and rectangles to the display, and color and fill them. + * * @class Graphics * @extends DisplayObjectContainer * @constructor @@ -9917,7 +11095,7 @@ this.renderable = true; /** - * The alpha of the fill of this graphics object + * The alpha value used when filling the Graphics object. * * @property fillAlpha * @type Number @@ -9925,7 +11103,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -9933,12 +11111,13 @@ this.lineWidth = 0; /** - * The color of any lines drawn + * The color of any lines drawn. * * @property lineColor * @type String + * @default 0 */ - this.lineColor = "black"; + this.lineColor = 0; /** * Graphics data @@ -9949,18 +11128,17 @@ */ this.graphicsData = []; - /** - * The tint applied to the graphic shape. This is a hex value + * The tint applied to the graphic shape. This is a hex value. Apply a value of 0xFFFFFF to reset the tint. * * @property tint * @type Number * @default 0xFFFFFF */ - this.tint = 0xFFFFFF;// * Math.random(); + this.tint = 0xFFFFFF; /** - * The blend mode to be applied to the graphic shape + * The blend mode to be applied to the graphic shape. Apply a value of PIXI.blendModes.NORMAL to reset the blend mode. * * @property blendMode * @type Number @@ -9975,10 +11153,10 @@ * @type Object * @private */ - this.currentPath = {points:[]}; - + this.currentPath = null; + /** - * Array containing some WebGL-related properties used by the WebGL renderer + * Array containing some WebGL-related properties used by the WebGL renderer. * * @property _webGL * @type Array @@ -9987,35 +11165,48 @@ this._webGL = []; /** - * Whether this shape is being used as a mask + * Whether this shape is being used as a mask. * * @property isMask - * @type isMask + * @type Boolean */ this.isMask = false; /** - * The bounds of the graphic shape as rectangle object - * - * @property bounds - * @type Rectangle - */ - this.bounds = null; - - /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number */ - this.boundsPadding = 10; + this.boundsPadding = 0; /** - * Used to detect if the graphics object has changed if this is set to true then the graphics object will be recalculated + * Used to detect if the graphics object has changed. If this is set to true then the graphics object will be recalculated. * - * @type {Boolean} + * @property dirty + * @type Boolean + * @private */ this.dirty = true; + + /** + * Used to detect if the webgl graphics object has changed. If this is set to true then the graphics object will be recalculated. + * + * @property webGLDirty + * @type Boolean + * @private + */ + this.webGLDirty = false; + + /** + * Used to detect if the cached sprite object needs to be updated. + * + * @property cachedSpriteDirty + * @type Boolean + * @private + */ + this.cachedSpriteDirty = false; + }; // constructor @@ -10023,14 +11214,14 @@ PIXI.Graphics.prototype.constructor = PIXI.Graphics; /** - * If cacheAsBitmap is true the graphics object will then be rendered as if it was a sprite. - * This is useful if your graphics element does not change often as it will speed up the rendering of the object - * It is also usful as the graphics object will always be antialiased because it will be rendered using canvas - * Not recommended if you are constanly redrawing the graphics element. + * When cacheAsBitmap is set to true the graphics object will be rendered as if it was a sprite. + * This is useful if your graphics element does not change often, as it will speed up the rendering of the object in exchange for taking up texture memory. + * It is also useful if you need the graphics object to be anti-aliased, because it will be rendered using canvas. + * This is not recommended if you are constantly redrawing the graphics element. * * @property cacheAsBitmap - * @default false * @type Boolean + * @default false * @private */ Object.defineProperty(PIXI.Graphics.prototype, "cacheAsBitmap", { @@ -10042,6 +11233,7 @@ if(this._cacheAsBitmap) { + this._generateCachedSprite(); } else @@ -10053,87 +11245,98 @@ } }); - /** * Specifies the line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method. * * @method lineStyle - * @param lineWidth {Number} width of the line to draw, will update the object's stored style - * @param color {Number} color of the line to draw, will update the object's stored style - * @param alpha {Number} alpha of the line to draw, will update the object's stored style + * @param lineWidth {Number} width of the line to draw, will update the objects stored style + * @param color {Number} color of the line to draw, will update the objects stored style + * @param alpha {Number} alpha of the line to draw, will update the objects stored style + * @return {Graphics} */ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha) { - if (!this.currentPath.points.length) this.graphicsData.pop(); - this.lineWidth = lineWidth || 0; this.lineColor = color || 0; this.lineAlpha = (arguments.length < 3) ? 1 : alpha; - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; + if(this.currentPath) + { + if(this.currentPath.shape.points.length) + { + // halfway through a line? start a new one! + this.drawShape( new PIXI.Polygon( this.currentPath.shape.points.slice(-2) )); + return this; + } - this.graphicsData.push(this.currentPath); + // otherwise its empty so lets just set the line properties + this.currentPath.lineWidth = this.lineWidth; + this.currentPath.lineColor = this.lineColor; + this.currentPath.lineAlpha = this.lineAlpha; + + } return this; }; /** - * Moves the current drawing position to (x, y). + * Moves the current drawing position to x, y. * * @method moveTo * @param x {Number} the X coordinate to move to * @param y {Number} the Y coordinate to move to - */ + * @return {Graphics} + */ PIXI.Graphics.prototype.moveTo = function(x, y) { - if (!this.currentPath.points.length) this.graphicsData.pop(); - - this.currentPath = this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; - - this.currentPath.points.push(x, y); - - this.graphicsData.push(this.currentPath); + this.drawShape(new PIXI.Polygon([x,y])); return this; }; /** * Draws a line using the current line style from the current drawing position to (x, y); - * the current drawing position is then set to (x, y). + * The current drawing position is then set to (x, y). * * @method lineTo * @param x {Number} the X coordinate to draw to * @param y {Number} the Y coordinate to draw to + * @return {Graphics} */ PIXI.Graphics.prototype.lineTo = function(x, y) { - this.currentPath.points.push(x, y); + this.currentPath.shape.points.push(x, y); this.dirty = true; return this; }; /** - * Calculate the points for a quadratic bezier curve. - * Based on : https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c + * Calculate the points for a quadratic bezier curve and then draws it. + * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c * * @method quadraticCurveTo - * @param {number} cpX Control point x - * @param {number} cpY Control point y - * @param {number} toX Destination point x - * @param {number} toY Destination point y - * @return {PIXI.Graphics} + * @param cpX {Number} Control point x + * @param cpY {Number} Control point y + * @param toX {Number} Destination point x + * @param toY {Number} Destination point y + * @return {Graphics} */ PIXI.Graphics.prototype.quadraticCurveTo = function(cpX, cpY, toX, toY) { - if( this.currentPath.points.length === 0)this.moveTo(0,0); + if( this.currentPath ) + { + if(this.currentPath.shape.points.length === 0)this.currentPath.shape.points = [0,0]; + } + else + { + this.moveTo(0,0); + } var xa, ya, n = 20, - points = this.currentPath.points; + points = this.currentPath.shape.points; if(points.length === 0)this.moveTo(0, 0); @@ -10159,20 +11362,27 @@ }; /** - * Calculate the points for a bezier curve. + * Calculate the points for a bezier curve and then draws it. * * @method bezierCurveTo - * @param {number} cpX Control point x - * @param {number} cpY Control point y - * @param {number} cpX2 Second Control point x - * @param {number} cpY2 Second Control point y - * @param {number} toX Destination point x - * @param {number} toY Destination point y - * @return {PIXI.Graphics} + * @param cpX {Number} Control point x + * @param cpY {Number} Control point y + * @param cpX2 {Number} Second Control point x + * @param cpY2 {Number} Second Control point y + * @param toX {Number} Destination point x + * @param toY {Number} Destination point y + * @return {Graphics} */ PIXI.Graphics.prototype.bezierCurveTo = function(cpX, cpY, cpX2, cpY2, toX, toY) { - if( this.currentPath.points.length === 0)this.moveTo(0,0); + if( this.currentPath ) + { + if(this.currentPath.shape.points.length === 0)this.currentPath.shape.points = [0,0]; + } + else + { + this.moveTo(0,0); + } var n = 20, dt, @@ -10180,14 +11390,14 @@ dt3, t2, t3, - points = this.currentPath.points; + points = this.currentPath.shape.points; var fromX = points[points.length-2]; var fromY = points[points.length-1]; var j = 0; - for (var i=1; i b2 * a1); } @@ -10270,28 +11484,28 @@ }; /** - * The arc() method creates an arc/curve (used to create circles, or parts of circles). + * The arc method creates an arc/curve (used to create circles, or parts of circles). * * @method arc - * @param {number} cx The x-coordinate of the center of the circle - * @param {number} cy The y-coordinate of the center of the circle - * @param {number} radius The radius of the circle - * @param {number} startAngle The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle) - * @param {number} endAngle The ending angle, in radians - * @param {number} anticlockwise Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. - * @return {PIXI.Graphics} + * @param cx {Number} The x-coordinate of the center of the circle + * @param cy {Number} The y-coordinate of the center of the circle + * @param radius {Number} The radius of the circle + * @param startAngle {Number} The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle) + * @param endAngle {Number} The ending angle, in radians + * @param anticlockwise {Boolean} Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. + * @return {Graphics} */ PIXI.Graphics.prototype.arc = function(cx, cy, radius, startAngle, endAngle, anticlockwise) { var startX = cx + Math.cos(startAngle) * radius; var startY = cy + Math.sin(startAngle) * radius; - var points = this.currentPath.points; + var points = this.currentPath.shape.points; if(points.length !== 0 && points[points.length-2] !== startX || points[points.length-1] !== startY) { this.moveTo(startX, startY); - points = this.currentPath.points; + points = this.currentPath.shape.points; } if (startAngle === endAngle)return this; @@ -10340,43 +11554,29 @@ }; /** - * Draws a line using the current line style from the current drawing position to (x, y); - * the current drawing position is then set to (x, y). - * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to - */ -PIXI.Graphics.prototype.drawPath = function(path) -{ - if (!this.currentPath.points.length) this.graphicsData.pop(); - - this.currentPath = this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; - - this.graphicsData.push(this.currentPath); - - this.currentPath.points = this.currentPath.points.concat(path); - this.dirty = true; - - return this; -}; - -/** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * * @method beginFill * @param color {Number} the color of the fill * @param alpha {Number} the alpha of the fill + * @return {Graphics} */ PIXI.Graphics.prototype.beginFill = function(color, alpha) { - this.filling = true; this.fillColor = color || 0; - this.fillAlpha = (arguments.length < 2) ? 1 : alpha; + this.fillAlpha = (alpha === undefined) ? 1 : alpha; + if(this.currentPath) + { + if(this.currentPath.shape.points.length <= 2) + { + this.currentPath.fill = this.filling; + this.currentPath.fillColor = this.fillColor; + this.currentPath.fillAlpha = this.fillAlpha; + } + } return this; }; @@ -10384,6 +11584,7 @@ * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method. * * @method endFill + * @return {Graphics} */ PIXI.Graphics.prototype.endFill = function() { @@ -10401,17 +11602,11 @@ * @param y {Number} The Y coord of the top-left of the rectangle * @param width {Number} The width of the rectangle * @param height {Number} The height of the rectangle + * @return {Graphics} */ PIXI.Graphics.prototype.drawRect = function( x, y, width, height ) { - if (!this.currentPath.points.length) this.graphicsData.pop(); - - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, - points:[x, y, width, height], type:PIXI.Graphics.RECT}; - - this.graphicsData.push(this.currentPath); - this.dirty = true; + this.drawShape(new PIXI.Rectangle(x,y, width, height)); return this; }; @@ -10427,14 +11622,7 @@ */ PIXI.Graphics.prototype.drawRoundedRect = function( x, y, width, height, radius ) { - if (!this.currentPath.points.length) this.graphicsData.pop(); - - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, - points:[x, y, width, height, radius], type:PIXI.Graphics.RREC}; - - this.graphicsData.push(this.currentPath); - this.dirty = true; + this.drawShape({ points:[x, y, width, height, radius], type:PIXI.Graphics.RREC }); return this; }; @@ -10446,18 +11634,11 @@ * @param x {Number} The X coordinate of the center of the circle * @param y {Number} The Y coordinate of the center of the circle * @param radius {Number} The radius of the circle + * @return {Graphics} */ PIXI.Graphics.prototype.drawCircle = function(x, y, radius) { - - if (!this.currentPath.points.length) this.graphicsData.pop(); - - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, - points:[x, y, radius, radius], type:PIXI.Graphics.CIRC}; - - this.graphicsData.push(this.currentPath); - this.dirty = true; + this.drawShape(new PIXI.Circle(x,y, radius)); return this; }; @@ -10470,19 +11651,26 @@ * @param y {Number} The Y coordinate of the center of the ellipse * @param width {Number} The half width of the ellipse * @param height {Number} The half height of the ellipse + * @return {Graphics} */ PIXI.Graphics.prototype.drawEllipse = function(x, y, width, height) { + this.drawShape(new PIXI.Ellipse(x, y, width, height)); - if (!this.currentPath.points.length) this.graphicsData.pop(); + return this; +}; - this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, - fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, - points:[x, y, width, height], type:PIXI.Graphics.ELIP}; - - this.graphicsData.push(this.currentPath); - this.dirty = true; - +/** + * Draws a polygon using the given path. + * + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} + */ +PIXI.Graphics.prototype.drawPolygon = function(path) +{ + if(!(path instanceof Array))path = Array.prototype.slice.call(arguments); + this.drawShape(new PIXI.Polygon(path)); return this; }; @@ -10490,6 +11678,7 @@ * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. * * @method clear + * @return {Graphics} */ PIXI.Graphics.prototype.clear = function() { @@ -10500,8 +11689,6 @@ this.clearDirty = true; this.graphicsData = []; - this.bounds = null; //new PIXI.Rectangle(); - return this; }; @@ -10510,14 +11697,22 @@ * This can be quite useful if your geometry is complicated and needs to be reused multiple times. * * @method generateTexture + * @param resolution {Number} The resolution of the texture being generated + * @param scaleMode {Number} Should be one of the PIXI.scaleMode consts * @return {Texture} a texture of the graphics object */ -PIXI.Graphics.prototype.generateTexture = function() +PIXI.Graphics.prototype.generateTexture = function(resolution, scaleMode) { - var bounds = this.getBounds(); + resolution = resolution || 1; - var canvasBuffer = new PIXI.CanvasBuffer(bounds.width, bounds.height); - var texture = PIXI.Texture.fromCanvas(canvasBuffer.canvas); + var bounds = this.getBounds(); + + var canvasBuffer = new PIXI.CanvasBuffer(bounds.width * resolution, bounds.height * resolution); + + var texture = PIXI.Texture.fromCanvas(canvasBuffer.canvas, scaleMode); + texture.baseTexture.resolution = resolution; + + canvasBuffer.context.scale(resolution, resolution); canvasBuffer.context.translate(-bounds.x,-bounds.y); @@ -10537,18 +11732,20 @@ { // if the sprite is not visible or the alpha is 0 then no need to render this element if(this.visible === false || this.alpha === 0 || this.isMask === true)return; - if(this._cacheAsBitmap) { - - if(this.dirty) + + if(this.dirty || this.cachedSpriteDirty) { + this._generateCachedSprite(); + // we will also need to update the texture on the gpu too! - PIXI.updateWebGLTexture(this._cachedSprite.texture.baseTexture, renderSession.gl); - - this.dirty = false; + this.updateCachedSpriteTexture(); + + this.cachedSpriteDirty = false; + this.dirty = false; } this._cachedSprite.alpha = this.alpha; @@ -10572,11 +11769,13 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - + // check if the webgl graphic needs to be updated + if(this.webGLDirty) + { + this.dirty = true; + this.webGLDirty = false; + } + PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -10614,32 +11813,60 @@ // if the sprite is not visible or the alpha is 0 then no need to render this element if(this.visible === false || this.alpha === 0 || this.isMask === true)return; - var context = renderSession.context; - var transform = this.worldTransform; - - if(this.blendMode !== renderSession.currentBlendMode) + if(this._cacheAsBitmap) { - renderSession.currentBlendMode = this.blendMode; - context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + if(this.dirty || this.cachedSpriteDirty) + { + this._generateCachedSprite(); + + // we will also need to update the texture + this.updateCachedSpriteTexture(); + + this.cachedSpriteDirty = false; + this.dirty = false; + } + + this._cachedSprite.alpha = this.alpha; + PIXI.Sprite.prototype._renderCanvas.call(this._cachedSprite, renderSession); + + return; } - - if(this._mask) + else { - renderSession.maskManager.pushMask(this._mask, renderSession.context); - } + var context = renderSession.context; + var transform = this.worldTransform; + + if(this.blendMode !== renderSession.currentBlendMode) + { + renderSession.currentBlendMode = this.blendMode; + context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode]; + } - context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx, transform.ty); - PIXI.CanvasGraphics.renderGraphics(this, context); + if(this._mask) + { + renderSession.maskManager.pushMask(this._mask, renderSession); + } - // simple render children! - for(var i=0, j=this.children.length; i maxY ? y3 : maxY; maxY = y4 > maxY ? y4 : maxY; - var bounds = this._bounds; - bounds.x = minX; bounds.width = maxX - minX; @@ -10720,69 +11953,98 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; var minY = Infinity; var maxY = -Infinity; - var points, x, y, w, h; + if(this.graphicsData.length) + { + var shape, points, x, y, w, h; - for (var i = 0; i < this.graphicsData.length; i++) { - var data = this.graphicsData[i]; - var type = data.type; - var lineWidth = data.lineWidth; + for (var i = 0; i < this.graphicsData.length; i++) { + var data = this.graphicsData[i]; + var type = data.type; + var lineWidth = data.lineWidth; + shape = data.shape; + - points = data.points; - - if(type === PIXI.Graphics.RECT) - { - x = points[0] - lineWidth/2; - y = points[1] - lineWidth/2; - w = points[2] + lineWidth; - h = points[3] + lineWidth; - - minX = x < minX ? x : minX; - maxX = x + w > maxX ? x + w : maxX; - - minY = y < minY ? x : minY; - maxY = y + h > maxY ? y + h : maxY; - } - else if(type === PIXI.Graphics.CIRC || type === PIXI.Graphics.ELIP) - { - x = points[0]; - y = points[1]; - w = points[2] + lineWidth/2; - h = points[3] + lineWidth/2; - - minX = x - w < minX ? x - w : minX; - maxX = x + w > maxX ? x + w : maxX; - - minY = y - h < minY ? y - h : minY; - maxY = y + h > maxY ? y + h : maxY; - } - else - { - // POLY - for (var j = 0; j < points.length; j+=2) + if(type === PIXI.Graphics.RECT || type === PIXI.Graphics.RRECT) { + x = shape.x - lineWidth/2; + y = shape.y - lineWidth/2; + w = shape.width + lineWidth; + h = shape.height + lineWidth; - x = points[j]; - y = points[j+1]; - minX = x-lineWidth < minX ? x-lineWidth : minX; - maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + minX = x < minX ? x : minX; + maxX = x + w > maxX ? x + w : maxX; - minY = y-lineWidth < minY ? y-lineWidth : minY; - maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + minY = y < minY ? y : minY; + maxY = y + h > maxY ? y + h : maxY; + } + else if(type === PIXI.Graphics.CIRC) + { + x = shape.x; + y = shape.y; + w = shape.radius + lineWidth/2; + h = shape.radius + lineWidth/2; + + minX = x - w < minX ? x - w : minX; + maxX = x + w > maxX ? x + w : maxX; + + minY = y - h < minY ? y - h : minY; + maxY = y + h > maxY ? y + h : maxY; + } + else if(type === PIXI.Graphics.ELIP) + { + x = shape.x; + y = shape.y; + w = shape.width + lineWidth/2; + h = shape.height + lineWidth/2; + + minX = x - w < minX ? x - w : minX; + maxX = x + w > maxX ? x + w : maxX; + + minY = y - h < minY ? y - h : minY; + maxY = y + h > maxY ? y + h : maxY; + } + else + { + // POLY + points = shape.points; + + for (var j = 0; j < points.length; j+=2) + { + + x = points[j]; + y = points[j+1]; + minX = x-lineWidth < minX ? x-lineWidth : minX; + maxX = x+lineWidth > maxX ? x+lineWidth : maxX; + + minY = y-lineWidth < minY ? y-lineWidth : minY; + maxY = y+lineWidth > maxY ? y+lineWidth : maxY; + } } } } + else + { + minX = 0; + maxX = 0; + minY = 0; + maxY = 0; + } var padding = this.boundsPadding; - this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); -}; + var bounds = this._bounds; + + bounds.x = minX - padding; + bounds.width = (maxX - minX) + padding * 2; + bounds.y = minY - padding; + bounds.height = (maxY - minY) + padding * 2; +}; /** * Generates the cached sprite when the sprite has cacheAsBitmap = true @@ -10816,12 +12078,43 @@ // this._cachedSprite.buffer.context.save(); this._cachedSprite.buffer.context.translate(-bounds.x,-bounds.y); + // make sure we set the alpha of the graphics to 1 for the render.. + this.worldAlpha = 1; + + // now render the graphic.. PIXI.CanvasGraphics.renderGraphics(this, this._cachedSprite.buffer.context); this._cachedSprite.alpha = this.alpha; - - // this._cachedSprite.buffer.context.restore(); }; +/** + * Updates texture size based on canvas size + * + * @method updateCachedSpriteTexture + * @private + */ +PIXI.Graphics.prototype.updateCachedSpriteTexture = function() +{ + var cachedSprite = this._cachedSprite; + var texture = cachedSprite.texture; + var canvas = cachedSprite.buffer.canvas; + + texture.baseTexture.width = canvas.width; + texture.baseTexture.height = canvas.height; + texture.crop.width = texture.frame.width = canvas.width; + texture.crop.height = texture.frame.height = canvas.height; + + cachedSprite._width = canvas.width; + cachedSprite._height = canvas.height; + + // update the dirty base textures + texture.baseTexture.dirty(); +}; + +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -10831,6 +12124,57 @@ this._cachedSprite = null; }; +/** + * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon. + * + * @method drawShape + * @param {Circle|Rectangle|Ellipse|Line|Polygon} shape The Shape object to draw. + * @return {GraphicsData} The generated GraphicsData object. + */ +PIXI.Graphics.prototype.drawShape = function(shape) +{ + if(this.currentPath) + { + // check current path! + if(this.currentPath.shape.points.length <= 2)this.graphicsData.pop(); + } + + this.currentPath = null; + + var data = new PIXI.GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); + + this.graphicsData.push(data); + + if(data.type === PIXI.Graphics.POLY) + { + data.shape.closed = this.filling; + this.currentPath = data; + } + + this.dirty = true; + + return data; +}; + +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ +PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) +{ + this.lineWidth = lineWidth; + this.lineColor = lineColor; + this.lineAlpha = lineAlpha; + + this.fillColor = fillColor; + this.fillAlpha = fillAlpha; + this.fill = fill; + + this.shape = shape; + this.type = shape.type; +}; // SOME TYPES: PIXI.Graphics.POLY = 0; @@ -10839,6 +12183,10 @@ PIXI.Graphics.ELIP = 3; PIXI.Graphics.RREC = 4; +PIXI.Polygon.prototype.type = PIXI.Graphics.POLY; +PIXI.Rectangle.prototype.type = PIXI.Graphics.RECT; +PIXI.Circle.prototype.type = PIXI.Graphics.CIRC; +PIXI.Ellipse.prototype.type = PIXI.Graphics.ELIP; /** * @author Mat Groves http://matgroves.com/ @@ -10858,25 +12206,48 @@ { PIXI.DisplayObjectContainer.call( this ); + + /** + * The texture of the strip + * + * @property texture + * @type Texture + */ this.texture = texture; // set up the main bits.. this.uvs = new PIXI.Float32Array([0, 1, - 1, 1, - 1, 0, - 0,1]); + 1, 1, + 1, 0, + 0, 1]); this.verticies = new PIXI.Float32Array([0, 0, - 100,0, - 100,100, - 0, 100]); + 100, 0, + 100, 100, + 0, 100]); this.colors = new PIXI.Float32Array([1, 1, 1, 1]); this.indices = new PIXI.Uint16Array([0, 1, 2, 3]); - + /** + * Whether the strip is dirty or not + * + * @property dirty + * @type Boolean + */ this.dirty = true; + + + /** + * if you need a padding, not yet implemented + * + * @property padding + * @type Number + */ + this.padding = 0; + // NYI, TODO padding ? + }; // constructor @@ -10944,7 +12315,7 @@ gl.uniformMatrix3fv(shader.translationMatrix, false, this.worldTransform.toArray(true)); gl.uniform2f(shader.projectionVector, projection.x, -projection.y); gl.uniform2f(shader.offsetVector, -offset.x, -offset.y); - gl.uniform1f(shader.alpha, 1); + gl.uniform1f(shader.alpha, this.worldAlpha); if(!this.dirty) { @@ -10958,8 +12329,17 @@ gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); gl.activeTexture(gl.TEXTURE0); - // bind the current texture - gl.bindTexture(gl.TEXTURE_2D, this.texture.baseTexture._glTextures[gl.id] || PIXI.createWebGLTexture(this.texture.baseTexture, gl)); + + // check if a texture is dirty.. + if(this.texture.baseTexture._dirty[gl.id]) + { + renderSession.renderer.updateTexture(this.texture.baseTexture); + } + else + { + // bind the current texture + gl.bindTexture(gl.TEXTURE_2D, this.texture.baseTexture._glTextures[gl.id]); + } // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indexBuffer); @@ -10980,7 +12360,16 @@ gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, this.texture.baseTexture._glTextures[gl.id] || PIXI.createWebGLTexture(this.texture.baseTexture, gl)); + + // check if a texture is dirty.. + if(this.texture.baseTexture._dirty[gl.id]) + { + renderSession.renderer.updateTexture(this.texture.baseTexture); + } + else + { + gl.bindTexture(gl.TEXTURE_2D, this.texture.baseTexture._glTextures[gl.id]); + } // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indexBuffer); @@ -10995,6 +12384,8 @@ }; + + PIXI.Strip.prototype._renderCanvas = function(renderSession) { var context = renderSession.context; @@ -11003,11 +12394,11 @@ if (renderSession.roundPixels) { - context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx | 0, transform.ty | 0); + context.setTransform(transform.a, transform.b, transform.c, transform.d, transform.tx | 0, transform.ty | 0); } else { - context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx, transform.ty); + context.setTransform(transform.a, transform.b, transform.c, transform.d, transform.tx, transform.ty); } var strip = this; @@ -11026,10 +12417,8 @@ var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - if(true) + if(this.padding > 0) { - - //expand(); var centerX = (x0 + x1 + x2)/3; var centerY = (y0 + y1 + y2)/3; @@ -11055,7 +12444,6 @@ dist = Math.sqrt( normX * normX + normY * normY ); x2 = centerX + (normX / dist) * (dist + 3); y2 = centerY + (normY / dist) * (dist + 3); - } var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; @@ -11091,13 +12479,40 @@ } }; -/* - * Sets the texture that the Strip will use + +/** + * Renders a flat strip * - * @method setTexture - * @param texture {Texture} the texture that will be used + * @method renderStripFlat + * @param strip {Strip} The Strip to render * @private */ +PIXI.Strip.prototype.renderStripFlat = function(strip) +{ + var context = this.context; + var verticies = strip.verticies; + + var length = verticies.length/2; + this.count++; + + context.beginPath(); + for (var i=1; i < length-2; i++) + { + // draw some triangles! + var index = i*2; + + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + + context.moveTo(x0, y0); + context.lineTo(x1, y1); + context.lineTo(x2, y2); + } + + context.fillStyle = "#FF0000"; + context.fill(); + context.closePath(); +}; /* PIXI.Strip.prototype.setTexture = function(texture) @@ -11125,16 +12540,19 @@ { this.updateFrame = true; }; -/* @author Mat Groves http://matgroves.com/ @Doormat23 +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + * @copyright Mat Groves, Rovanion Luckey */ /** - * + * * @class Rope * @constructor - * @param texture {Texture} The texture to use - * @param points {Array} - * + * @extends Strip + * @param {Texture} texture - The texture to use on the rope. + * @param {Array} points - An array of {PIXI.Point}. + * */ PIXI.Rope = function(texture, points) { @@ -11145,7 +12563,7 @@ this.uvs = new PIXI.Float32Array(points.length * 4); this.colors = new PIXI.Float32Array(points.length * 2); this.indices = new PIXI.Uint16Array(points.length * 2); - + this.refresh(); }; @@ -11156,7 +12574,7 @@ PIXI.Rope.prototype.constructor = PIXI.Rope; /* - * Refreshes + * Refreshes * * @method refresh */ @@ -11285,7 +12703,7 @@ PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); }; /* - * Sets the texture that the Rope will use + * Sets the texture that the Rope will use * * @method setTexture * @param texture {Texture} the texture that will be used @@ -11485,7 +12903,7 @@ renderSession.spriteBatch.stop(); if (this._filters) renderSession.filterManager.popFilter(); - if (this._mask) renderSession.maskManager.popMask(renderSession); + if (this._mask) renderSession.maskManager.popMask(this._mask, renderSession); renderSession.spriteBatch.start(); }; @@ -11514,7 +12932,14 @@ var i,j; - context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx , transform.ty); + var resolution = renderSession.resolution; + + context.setTransform(transform.a * resolution, + transform.c * resolution, + transform.b * resolution, + transform.d * resolution, + transform.tx * resolution, + transform.ty * resolution); if (!this.__tilePattern || this.refreshTexture) { @@ -11543,20 +12968,19 @@ tilePosition.x %= this.tilingTexture.baseTexture.width; tilePosition.y %= this.tilingTexture.baseTexture.height; - // offset + // offset - make sure to account for the anchor point.. context.scale(tileScale.x,tileScale.y); - context.translate(tilePosition.x, tilePosition.y); + context.translate(tilePosition.x + (this.anchor.x * -this._width), tilePosition.y + (this.anchor.y * -this._height)); context.fillStyle = this.__tilePattern; - // make sure to account for the anchor point.. - context.fillRect(-tilePosition.x + (this.anchor.x * -this._width), - -tilePosition.y + (this.anchor.y * -this._height), + context.fillRect(-tilePosition.x, + -tilePosition.y, this._width / tileScale.x, this._height / tileScale.y); context.scale(1 / tileScale.x, 1 / tileScale.y); - context.translate(-tilePosition.x, -tilePosition.y); + context.translate(-tilePosition.x + (this.anchor.x * this._width), -tilePosition.y + (this.anchor.y * this._height)); if (this._mask) { @@ -11673,7 +13097,7 @@ { if (!this.texture.baseTexture.hasLoaded) return; - var texture = this.texture; + var texture = this.originalTexture || this.texture; var frame = texture.frame; var targetWidth, targetHeight; @@ -11750,8 +13174,13 @@ } this.refreshTexture = false; + + this.originalTexture = this.texture; + this.texture = this.tilingTexture; + this.tilingTexture.baseTexture._powerOf2 = true; }; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 * based on pixi impact spine implementation made by Eemeli Kelokorpi (@ekelokorpi) https://github.com/ekelokorpi @@ -13232,13 +14661,11 @@ */ PIXI.BaseTextureCache = {}; -PIXI.texturesToUpdate = []; -PIXI.texturesToDestroy = []; PIXI.BaseTextureCacheIdGenerator = 0; /** - * A texture stores the information that represents an image. All textures have a base texture + * A texture stores the information that represents an image. All textures have a base texture. * * @class BaseTexture * @uses EventTarget @@ -13248,8 +14675,14 @@ */ PIXI.BaseTexture = function(source, scaleMode) { - PIXI.EventTarget.call( this ); - + /** + * The Resolution of the texture. + * + * @property resolution + * @type Number + */ + this.resolution = 1; + /** * [read-only] The width of the base texture set when the image has loaded * @@ -13270,6 +14703,7 @@ /** * The scale mode to apply when scaling this texture + * * @property scaleMode * @type PIXI.scaleModes * @default PIXI.scaleModes.LINEAR @@ -13277,7 +14711,7 @@ this.scaleMode = scaleMode || PIXI.scaleModes.DEFAULT; /** - * [read-only] Describes if the base texture has loaded or not + * [read-only] Set to true once the base texture has loaded * * @property hasLoaded * @type Boolean @@ -13286,73 +14720,92 @@ this.hasLoaded = false; /** - * The source that is loaded to create the texture + * The image source that is used to create the texture. * * @property source * @type Image */ this.source = source; - //TODO will be used for futer pixi 1.5... - this.id = PIXI.BaseTextureCacheIdGenerator++; + this._UID = PIXI._UID++; /** - * Controls if RGB channels should be premultiplied by Alpha (WebGL only) + * Controls if RGB channels should be pre-multiplied by Alpha (WebGL only) * - * @property + * @property premultipliedAlpha * @type Boolean - * @default TRUE - */ + * @default true + */ this.premultipliedAlpha = true; // used for webGL + + /** + * @property _glTextures + * @type Array + * @private + */ this._glTextures = []; - - // used for webGL teture updateing... - this._dirty = []; - + + // used for webGL texture updating... + // TODO - this needs to be addressed + + /** + * @property _dirty + * @type Array + * @private + */ + this._dirty = [true, true, true, true]; + if(!source)return; if((this.source.complete || this.source.getContext) && this.source.width && this.source.height) { this.hasLoaded = true; - this.width = this.source.width; - this.height = this.source.height; - - PIXI.texturesToUpdate.push(this); + this.width = this.source.naturalWidth || this.source.width; + this.height = this.source.naturalHeight || this.source.height; + this.dirty(); } else { - var scope = this; + this.source.onload = function() { scope.hasLoaded = true; - scope.width = scope.source.width; - scope.height = scope.source.height; + scope.width = scope.source.naturalWidth || scope.source.width; + scope.height = scope.source.naturalHeight || scope.source.height; - for (var i = 0; i < scope._glTextures.length; i++) - { - scope._dirty[i] = true; - } + scope.dirty(); // add it to somewhere... scope.dispatchEvent( { type: 'loaded', content: scope } ); }; + this.source.onerror = function() { scope.dispatchEvent( { type: 'error', content: scope } ); }; } + /** + * @property imageUrl + * @type String + */ this.imageUrl = null; - this._powerOf2 = false; - + /** + * @property _powerOf2 + * @type Boolean + * @private + */ + this._powerOf2 = false; }; PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture; +PIXI.EventTarget.mixin(PIXI.BaseTexture.prototype); + /** * Destroys this base texture * @@ -13365,14 +14818,27 @@ delete PIXI.BaseTextureCache[this.imageUrl]; delete PIXI.TextureCache[this.imageUrl]; this.imageUrl = null; - this.source.src = null; + this.source.src = ''; } else if (this.source && this.source._pixiId) { delete PIXI.BaseTextureCache[this.source._pixiId]; } this.source = null; - PIXI.texturesToDestroy.push(this); + + // delete the webGL textures if any. + for (var i = this._glTextures.length - 1; i >= 0; i--) + { + var glTexture = this._glTextures[i]; + var gl = PIXI.glContexts[i]; + + if(gl && glTexture) + { + gl.deleteTexture(glTexture); + } + } + + this._glTextures.length = 0; }; /** @@ -13389,20 +14855,33 @@ }; /** - * Helper function that returns a base texture based on an image url - * If the image is not in the base texture cache it will be created and loaded + * Sets all glTextures to be dirty. + * + * @method dirty + */ +PIXI.BaseTexture.prototype.dirty = function() +{ + for (var i = 0; i < this._glTextures.length; i++) + { + this._dirty[i] = true; + } +}; + +/** + * Helper function that creates a base texture from the given image url. + * If the image is not in the base texture cache it will be created and loaded. * * @static * @method fromImage * @param imageUrl {String} The image url of the texture - * @param crossorigin {Boolean} + * @param crossorigin {Boolean} * @param scaleMode {Number} Should be one of the PIXI.scaleMode consts * @return BaseTexture */ PIXI.BaseTexture.fromImage = function(imageUrl, crossorigin, scaleMode) { var baseTexture = PIXI.BaseTextureCache[imageUrl]; - + if(crossorigin === undefined && imageUrl.indexOf('data:') === -1) crossorigin = true; if(!baseTexture) @@ -13414,18 +14893,24 @@ { image.crossOrigin = ''; } + image.src = imageUrl; baseTexture = new PIXI.BaseTexture(image, scaleMode); baseTexture.imageUrl = imageUrl; PIXI.BaseTextureCache[imageUrl] = baseTexture; + + // if there is an @2x at the end of the url we are going to assume its a highres image + if( imageUrl.indexOf(PIXI.RETINA_PREFIX + '.') !== -1) + { + baseTexture.resolution = 2; + } } return baseTexture; }; /** - * Helper function that returns a base texture based on a canvas element - * If the image is not in the base texture cache it will be created and loaded + * Helper function that creates a base texture from the given canvas element. * * @static * @method fromCanvas @@ -13451,8 +14936,6 @@ return baseTexture; }; - - /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -13464,18 +14947,18 @@ /** * A texture stores the information that represents an image or part of an image. It cannot be added - * to the display list directly. To do this use PIXI.Sprite. If no frame is provided then the whole image is used + * to the display list directly. Instead use it as the texture for a PIXI.Sprite. If no frame is provided then the whole image is used. * * @class Texture * @uses EventTarget * @constructor * @param baseTexture {BaseTexture} The base texture source to create the texture from * @param frame {Rectangle} The rectangle frame of the texture to show + * @param [crop] {Rectangle} The area of original texture + * @param [trim] {Rectangle} Trimmed texture rectangle */ -PIXI.Texture = function(baseTexture, frame) +PIXI.Texture = function(baseTexture, frame, crop, trim) { - PIXI.EventTarget.call( this ); - /** * Does this Texture have any frame data assigned to it? * @@ -13512,15 +14995,15 @@ this.frame = frame; /** - * The trim point + * The texture trim data. * * @property trim * @type Rectangle */ - this.trim = null; - + this.trim = trim; + /** - * This will let the renderer know if the texture is valid. If its not then it cannot be rendered. + * This will let the renderer know if the texture is valid. If it's not then it cannot be rendered. * * @property valid * @type Boolean @@ -13528,22 +15011,22 @@ this.valid = false; /** - * The context scope under which events are run. + * This will let a renderer know that a texture has been updated (used mainly for webGL uv updates) * - * @property scope - * @type Object + * @property requiresUpdate + * @type Boolean */ - this.scope = this; + this.requiresUpdate = false; /** * The WebGL UV data cache. * - * @private * @property _uvs * @type Object + * @private */ this._uvs = null; - + /** * The width of the Texture in pixels. * @@ -13567,7 +15050,7 @@ * @property crop * @type Rectangle */ - this.crop = new PIXI.Rectangle(0, 0, 1, 1); + this.crop = crop || new PIXI.Rectangle(0, 0, 1, 1); if (baseTexture.hasLoaded) { @@ -13576,18 +15059,17 @@ } else { - var scope = this; - baseTexture.addEventListener('loaded', function(){ scope.onBaseTextureLoaded(); }); + baseTexture.addEventListener('loaded', this.onBaseTextureLoaded.bind(this)); } }; PIXI.Texture.prototype.constructor = PIXI.Texture; +PIXI.EventTarget.mixin(PIXI.Texture.prototype); /** * Called when the base texture is loaded * * @method onBaseTextureLoaded - * @param event * @private */ PIXI.Texture.prototype.onBaseTextureLoaded = function() @@ -13596,10 +15078,10 @@ baseTexture.removeEventListener('loaded', this.onLoaded); if (this.noFrame) this.frame = new PIXI.Rectangle(0, 0, baseTexture.width, baseTexture.height); - + this.setFrame(this.frame); - this.scope.dispatchEvent( { type: 'update', content: this } ); + this.dispatchEvent( { type: 'update', content: this } ); }; /** @@ -13648,25 +15130,25 @@ this.frame.width = this.trim.width; this.frame.height = this.trim.height; } - - if (this.valid) PIXI.Texture.frameUpdates.push(this); + + if (this.valid) this._updateUvs(); }; /** * Updates the internal WebGL UV cache. * - * @method _updateWebGLuvs + * @method _updateUvs * @private */ -PIXI.Texture.prototype._updateWebGLuvs = function() +PIXI.Texture.prototype._updateUvs = function() { if(!this._uvs)this._uvs = new PIXI.TextureUvs(); var frame = this.crop; var tw = this.baseTexture.width; var th = this.baseTexture.height; - + this._uvs.x0 = frame.x / tw; this._uvs.y0 = frame.y / th; @@ -13678,12 +15160,11 @@ this._uvs.x3 = frame.x / tw; this._uvs.y3 = (frame.y + frame.height) / th; - }; /** - * Helper function that returns a texture based on an image url - * If the image is not in the texture cache it will be created and loaded + * Helper function that creates a Texture object from the given image url. + * If the image is not in the texture cache it will be created and loaded. * * @static * @method fromImage @@ -13706,8 +15187,8 @@ }; /** - * Helper function that returns a texture based on a frame id - * If the frame id is not in the texture cache an error will be thrown + * Helper function that returns a Texture objected based on the given frame id. + * If the frame id is not in the texture cache an error will be thrown. * * @static * @method fromFrame @@ -13722,8 +15203,7 @@ }; /** - * Helper function that returns a texture based on a canvas element - * If the canvas is not in the texture cache it will be created and loaded + * Helper function that creates a new a Texture based on the given canvas element. * * @static * @method fromCanvas @@ -13739,14 +15219,13 @@ }; - /** - * Adds a texture to the textureCache. + * Adds a texture to the global PIXI.TextureCache. This cache is shared across the whole PIXI object. * * @static * @method addTextureToCache - * @param texture {Texture} - * @param id {String} the id that the texture will be stored against. + * @param texture {Texture} The Texture to add to the cache. + * @param id {String} The id that the texture will be stored against. */ PIXI.Texture.addTextureToCache = function(texture, id) { @@ -13754,12 +15233,12 @@ }; /** - * Remove a texture from the textureCache. + * Remove a texture from the global PIXI.TextureCache. * * @static * @method removeTextureFromCache - * @param id {String} the id of the texture to be removed - * @return {Texture} the texture that was removed + * @param id {String} The id of the texture to be removed + * @return {Texture} The texture that was removed */ PIXI.Texture.removeTextureFromCache = function(id) { @@ -13769,9 +15248,6 @@ return texture; }; -// this is more for webGL.. it contains updated frames.. -PIXI.Texture.frameUpdates = []; - PIXI.TextureUvs = function() { this.x0 = 0; @@ -13785,8 +15261,6 @@ this.x3 = 0; this.y3 = 0; - - }; /** @@ -13794,38 +15268,37 @@ */ /** - A RenderTexture is a special texture that allows any pixi displayObject to be rendered to it. - - __Hint__: All DisplayObjects (exmpl. Sprites) that render on RenderTexture should be preloaded. - Otherwise black rectangles will be drawn instead. - - RenderTexture takes snapshot of DisplayObject passed to render method. If DisplayObject is passed to render method, position and rotation of it will be ignored. For example: - - var renderTexture = new PIXI.RenderTexture(800, 600); - var sprite = PIXI.Sprite.fromImage("spinObj_01.png"); - sprite.position.x = 800/2; - sprite.position.y = 600/2; - sprite.anchor.x = 0.5; - sprite.anchor.y = 0.5; - renderTexture.render(sprite); - - Sprite in this case will be rendered to 0,0 position. To render this sprite at center DisplayObjectContainer should be used: - - var doc = new PIXI.DisplayObjectContainer(); - doc.addChild(sprite); - renderTexture.render(doc); // Renders to center of renderTexture - + * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. + * + * __Hint__: All DisplayObjects (i.e. Sprites) that render to a RenderTexture should be preloaded otherwise black rectangles will be drawn instead. + * + * A RenderTexture takes a snapshot of any Display Object given to its render method. The position and rotation of the given Display Objects is ignored. For example: + * + * var renderTexture = new PIXI.RenderTexture(800, 600); + * var sprite = PIXI.Sprite.fromImage("spinObj_01.png"); + * sprite.position.x = 800/2; + * sprite.position.y = 600/2; + * sprite.anchor.x = 0.5; + * sprite.anchor.y = 0.5; + * renderTexture.render(sprite); + * + * The Sprite in this case will be rendered to a position of 0,0. To render this sprite at its actual position a DisplayObjectContainer should be used: + * + * var doc = new PIXI.DisplayObjectContainer(); + * doc.addChild(sprite); + * renderTexture.render(doc); // Renders to center of renderTexture + * * @class RenderTexture * @extends Texture * @constructor * @param width {Number} The width of the render texture * @param height {Number} The height of the render texture + * @param renderer {CanvasRenderer|WebGLRenderer} The renderer used for this RenderTexture * @param scaleMode {Number} Should be one of the PIXI.scaleMode consts + * @param resolution {Number} The resolution of the texture being generated */ -PIXI.RenderTexture = function(width, height, renderer, scaleMode) +PIXI.RenderTexture = function(width, height, renderer, scaleMode, resolution) { - PIXI.EventTarget.call( this ); - /** * The with of the render texture * @@ -13833,6 +15306,7 @@ * @type Number */ this.width = width || 100; + /** * The height of the render texture * @@ -13842,12 +15316,20 @@ this.height = height || 100; /** + * The Resolution of the texture. + * + * @property resolution + * @type Number + */ + this.resolution = resolution || 1; + + /** * The framing rectangle of the render texture * * @property frame * @type Rectangle */ - this.frame = new PIXI.Rectangle(0, 0, this.width, this.height); + this.frame = new PIXI.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); /** * This is the area of the BaseTexture image to actually copy to the Canvas / WebGL when rendering, @@ -13856,8 +15338,8 @@ * @property crop * @type Rectangle */ - this.crop = new PIXI.Rectangle(0, 0, this.width, this.height); - + this.crop = new PIXI.Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution); + /** * The base texture object that this texture uses * @@ -13865,45 +15347,60 @@ * @type BaseTexture */ this.baseTexture = new PIXI.BaseTexture(); - this.baseTexture.width = this.width; - this.baseTexture.height = this.height; + this.baseTexture.width = this.width * this.resolution; + this.baseTexture.height = this.height * this.resolution; this.baseTexture._glTextures = []; + this.baseTexture.resolution = this.resolution; this.baseTexture.scaleMode = scaleMode || PIXI.scaleModes.DEFAULT; this.baseTexture.hasLoaded = true; - // each render texture can only belong to one renderer at the moment if its webGL + PIXI.Texture.call(this, + this.baseTexture, + new PIXI.Rectangle(0, 0, this.width, this.height) + ); + + /** + * The renderer this RenderTexture uses. A RenderTexture can only belong to one renderer at the moment if its webGL. + * + * @property renderer + * @type CanvasRenderer|WebGLRenderer + */ this.renderer = renderer || PIXI.defaultRenderer; if(this.renderer.type === PIXI.WEBGL_RENDERER) { var gl = this.renderer.gl; + this.baseTexture._dirty[gl.id] = false; - this.textureBuffer = new PIXI.FilterTexture(gl, this.width, this.height, this.baseTexture.scaleMode); + this.textureBuffer = new PIXI.FilterTexture(gl, this.width * this.resolution, this.height * this.resolution, this.baseTexture.scaleMode); this.baseTexture._glTextures[gl.id] = this.textureBuffer.texture; this.render = this.renderWebGL; - this.projection = new PIXI.Point(this.width/2 , -this.height/2); + this.projection = new PIXI.Point(this.width*0.5, -this.height*0.5); } else { this.render = this.renderCanvas; - this.textureBuffer = new PIXI.CanvasBuffer(this.width, this.height); + this.textureBuffer = new PIXI.CanvasBuffer(this.width* this.resolution, this.height* this.resolution); this.baseTexture.source = this.textureBuffer.canvas; } + /** + * @property valid + * @type Boolean + */ this.valid = true; - PIXI.Texture.frameUpdates.push(this); - + this._updateUvs(); }; PIXI.RenderTexture.prototype = Object.create(PIXI.Texture.prototype); PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture; /** - * Resize the RenderTexture. + * Resizes the RenderTexture. * * @method resize * @param width {Number} The width to resize to. @@ -13912,10 +15409,9 @@ */ PIXI.RenderTexture.prototype.resize = function(width, height, updateBase) { - if (width === this.width && height === this.height) - { - return; - } + if (width === this.width && height === this.height)return; + + this.valid = (width > 0 && height > 0); this.width = this.frame.width = this.crop.width = width; this.height = this.frame.height = this.crop.height = height; @@ -13931,8 +15427,10 @@ this.projection.x = this.width / 2; this.projection.y = -this.height / 2; } - - this.textureBuffer.resize(this.width, this.height); + + if(!this.valid)return; + + this.textureBuffer.resize(this.width * this.resolution, this.height * this.resolution); }; /** @@ -13942,11 +15440,13 @@ */ PIXI.RenderTexture.prototype.clear = function() { + if(!this.valid)return; + if (this.renderer.type === PIXI.WEBGL_RENDERER) { this.renderer.gl.bindFramebuffer(this.renderer.gl.FRAMEBUFFER, this.textureBuffer.frameBuffer); } - + this.textureBuffer.clear(); }; @@ -13955,52 +15455,45 @@ * * @method renderWebGL * @param displayObject {DisplayObject} The display object to render this texture on - * @param clear {Boolean} If true the texture will be cleared before the displayObject is drawn + * @param [matrix] {Matrix} Optional matrix to apply to the display object before rendering. + * @param [clear] {Boolean} If true the texture will be cleared before the displayObject is drawn * @private */ -PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, clear) +PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, matrix, clear) { + if(!this.valid)return; //TOOD replace position with matrix.. - var gl = this.renderer.gl; + + //Lets create a nice matrix to apply to our display object. Frame buffers come in upside down so we need to flip the matrix + var wt = displayObject.worldTransform; + wt.identity(); + wt.translate(0, this.projection.y * 2); + if(matrix)wt.append(matrix); + wt.scale(1,-1); - gl.colorMask(true, true, true, true); + // setWorld Alpha to ensure that the object is renderer at full opacity + displayObject.worldAlpha = 1; - gl.viewport(0, 0, this.width, this.height); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.textureBuffer.frameBuffer ); - - if(clear)this.textureBuffer.clear(); - - - // THIS WILL MESS WITH HIT TESTING! + // Time to update all the children of the displayObject with the new matrix.. var children = displayObject.children; - //TODO -? create a new one??? dont think so! - var originalWorldTransform = displayObject.worldTransform; - displayObject.worldTransform = PIXI.RenderTexture.tempMatrix; - // modify to flip... - displayObject.worldTransform.d = -1; - displayObject.worldTransform.ty = this.projection.y * -2; - - if(position) - { - displayObject.worldTransform.tx = position.x; - displayObject.worldTransform.ty -= position.y; - } - for(var i=0,j=children.length; i} assetURLs an array of image/sprite sheet urls that you would like loaded + * @param assetURLs {Array} An array of image/sprite sheet urls that you would like loaded * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font * data formats include 'xml' and 'fnt'. @@ -14074,8 +15628,6 @@ */ PIXI.AssetLoader = function(assetURLs, crossorigin) { - PIXI.EventTarget.call(this); - /** * The array of asset URLs that are going to be loaded * @@ -14112,6 +15664,8 @@ }; }; +PIXI.EventTarget.mixin(PIXI.AssetLoader.prototype); + /** * Fired when an item has loaded * @event onProgress @@ -14126,7 +15680,7 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; /** - * Given a filename, returns its extension, wil + * Given a filename, returns its extension. * * @method _getDataType * @param str {String} the name of the asset @@ -14168,7 +15722,7 @@ var scope = this; function onLoad(evt) { - scope.onAssetLoaded(evt.content); + scope.onAssetLoaded(evt.data.content); } this.loadCount = this.assetURLs.length; @@ -14189,7 +15743,7 @@ var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener('loaded', onLoad); + loader.on('loaded', onLoad); loader.load(); } }; @@ -14203,12 +15757,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function(loader) { this.loadCount--; - this.dispatchEvent({ type: 'onProgress', content: this, loader: loader }); + this.emit('onProgress', { content: this, loader: loader }); if (this.onProgress) this.onProgress(loader); if (!this.loadCount) { - this.dispatchEvent({type: 'onComplete', content: this}); + this.emit('onComplete', { content: this }); if(this.onComplete) this.onComplete(); } }; @@ -14229,7 +15783,6 @@ * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.JsonLoader = function (url, crossorigin) { - PIXI.EventTarget.call(this); /** * The url of the bitmap font data @@ -14270,6 +15823,8 @@ // constructor PIXI.JsonLoader.prototype.constructor = PIXI.JsonLoader; +PIXI.EventTarget.mixin(PIXI.JsonLoader.prototype); + /** * Loads the JSON data * @@ -14277,24 +15832,18 @@ */ PIXI.JsonLoader.prototype.load = function () { - var scope = this; - - if(window.XDomainRequest && scope.crossorigin) + if(window.XDomainRequest && this.crossorigin) { this.ajaxRequest = new window.XDomainRequest(); - // XDomainRequest has a few querks. Occasionally it will abort requests + // XDomainRequest has a few quirks. Occasionally it will abort requests // A way to avoid this is to make sure ALL callbacks are set even if not used // More info here: http://stackoverflow.com/questions/15786966/xdomainrequest-aborts-post-on-ie-9 this.ajaxRequest.timeout = 3000; - this.ajaxRequest.onerror = function () { - scope.onError(); - }; - - this.ajaxRequest.ontimeout = function () { - scope.onError(); - }; + this.ajaxRequest.onerror = this.onError.bind(this); + + this.ajaxRequest.ontimeout = this.onError.bind(this); this.ajaxRequest.onprogress = function() {}; @@ -14308,12 +15857,7 @@ this.ajaxRequest = new window.ActiveXObject('Microsoft.XMLHTTP'); } - - - this.ajaxRequest.onload = function(){ - - scope.onJSONLoaded(); - }; + this.ajaxRequest.onload = this.onJSONLoaded.bind(this); this.ajaxRequest.open('GET',this.url,true); @@ -14321,33 +15865,30 @@ }; /** - * Invoke when JSON file is loaded + * Invoked when the JSON file is loaded. * * @method onJSONLoaded * @private */ PIXI.JsonLoader.prototype.onJSONLoaded = function () { - + if(!this.ajaxRequest.responseText ) { this.onError(); return; } - + this.json = JSON.parse(this.ajaxRequest.responseText); if(this.json.frames) { // sprite sheet - var scope = this; var textureUrl = this.baseUrl + this.json.meta.image; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener('loaded', function() { - scope.onLoaded(); - }); + image.addEventListener('loaded', this.onLoaded.bind(this)); for (var i in frameData) { @@ -14355,22 +15896,18 @@ if (rect) { - PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { - x: rect.x, - y: rect.y, - width: rect.w, - height: rect.h - }); - - PIXI.TextureCache[i].crop = new PIXI.Rectangle(rect.x, rect.y, rect.w, rect.h); - + var textureSize = new PIXI.Rectangle(rect.x, rect.y, rect.w, rect.h); + var crop = textureSize.clone(); + var trim = null; + // Check to see if the sprite is trimmed if (frameData[i].trimmed) { var actualSize = frameData[i].sourceSize; var realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim = new PIXI.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); + trim = new PIXI.Rectangle(realSize.x, realSize.y, actualSize.w, actualSize.h); } + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, textureSize, crop, trim); } } @@ -14392,7 +15929,7 @@ }; /** - * Invoke when json file loaded + * Invoked when the json file has loaded. * * @method onLoaded * @private @@ -14406,7 +15943,7 @@ }; /** - * Invoke when error occured + * Invoked if an error occurs. * * @method onError * @private @@ -14424,18 +15961,20 @@ */ /** - * The atlas file loader is used to load in Atlas data and parse it - * When loaded this class will dispatch a 'loaded' event - * If loading fails this class will dispatch an 'error' event + * The atlas file loader is used to load in Texture Atlas data and parse it. When loaded this class will dispatch a 'loaded' event. If loading fails this class will dispatch an 'error' event. + * + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish in the 'JSON' format. + * + * It is highly recommended to use texture atlases (also know as 'sprite sheets') as it allowed sprites to be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFrameId() + * * @class AtlasLoader - * @extends EventTarget + * @uses EventTarget * @constructor - * @param {String} url the url of the JSON file - * @param {Boolean} crossorigin + * @param url {String} The url of the JSON file + * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ - PIXI.AtlasLoader = function (url, crossorigin) { - PIXI.EventTarget.call(this); this.url = url; this.baseUrl = url.replace(/[^\/]*$/, ''); this.crossorigin = crossorigin; @@ -14446,6 +15985,7 @@ // constructor PIXI.AtlasLoader.constructor = PIXI.AtlasLoader; +PIXI.EventTarget.mixin(PIXI.AtlasLoader.prototype); /** * Starts loading the JSON file @@ -14462,7 +16002,8 @@ }; /** - * Invoke when JSON file is loaded + * Invoked when the Atlas has fully loaded. Parses the JSON and builds the texture frames. + * * @method onAtlasLoaded * @private */ @@ -14566,7 +16107,7 @@ this.currentImageId = 0; for (j = 0; j < this.images.length; j++) { - this.images[j].addEventListener('loaded', selfOnLoaded); + this.images[j].on('loaded', selfOnLoaded); } this.images[this.currentImageId].load(); @@ -14581,7 +16122,8 @@ }; /** - * Invoke when json file has loaded + * Invoked when json file has loaded. + * * @method onLoaded * @private */ @@ -14591,23 +16133,18 @@ this.images[this.currentImageId].load(); } else { this.loaded = true; - this.dispatchEvent({ - type: 'loaded', - content: this - }); + this.emit('loaded', { content: this }); } }; /** - * Invoke when error occured + * Invoked when an error occurs. + * * @method onError * @private */ PIXI.AtlasLoader.prototype.onError = function () { - this.dispatchEvent({ - type: 'error', - content: this - }); + this.emit('error', { content: this }); }; /** @@ -14630,15 +16167,9 @@ * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.SpriteSheetLoader = function (url, crossorigin) { - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as 'JSON' - */ - PIXI.EventTarget.call(this); /** - * The url of the bitmap font data + * The url of the atlas data * * @property url * @type String @@ -14682,6 +16213,8 @@ // constructor PIXI.SpriteSheetLoader.prototype.constructor = PIXI.SpriteSheetLoader; +PIXI.EventTarget.mixin(PIXI.SpriteSheetLoader.prototype); + /** * This will begin loading the JSON file * @@ -14690,8 +16223,8 @@ PIXI.SpriteSheetLoader.prototype.load = function () { var scope = this; var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); - jsonLoader.addEventListener('loaded', function (event) { - scope.json = event.content.json; + jsonLoader.on('loaded', function (event) { + scope.json = event.data.content.json; scope.onLoaded(); }); jsonLoader.load(); @@ -14704,8 +16237,7 @@ * @private */ PIXI.SpriteSheetLoader.prototype.onLoaded = function () { - this.dispatchEvent({ - type: 'loaded', + this.emit('loaded', { content: this }); }; @@ -14716,7 +16248,7 @@ /** * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') - * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFrameId() + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrame() and PIXI.Sprite.fromFrame() * When loaded this class will dispatch a 'loaded' event * * @class ImageLoader @@ -14727,8 +16259,6 @@ */ PIXI.ImageLoader = function(url, crossorigin) { - PIXI.EventTarget.call(this); - /** * The texture being loaded * @@ -14741,6 +16271,9 @@ * if the image is loaded with loadFramedSpriteSheet * frames will contain the sprite sheet frames * + * @property frames + * @type Array + * @readOnly */ this.frames = []; }; @@ -14748,6 +16281,8 @@ // constructor PIXI.ImageLoader.prototype.constructor = PIXI.ImageLoader; +PIXI.EventTarget.mixin(PIXI.ImageLoader.prototype); + /** * Loads image or takes it from cache * @@ -14757,11 +16292,7 @@ { if(!this.texture.baseTexture.hasLoaded) { - var scope = this; - this.texture.baseTexture.addEventListener('loaded', function() - { - scope.onLoaded(); - }); + this.texture.baseTexture.on('loaded', this.onLoaded.bind(this)); } else { @@ -14777,13 +16308,12 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: 'loaded', content: this}); + this.emit('loaded', { content: this }); }; /** * Loads image and split it to uniform sized frames * - * * @method loadFramedSpriteSheet * @param frameWidth {Number} width of each frame * @param frameHeight {Number} height of each frame @@ -14800,7 +16330,7 @@ { for (var x=0; x-1){var c=["%c %c %c Pixi.js "+b.VERSION+" - "+a+" %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ ","background: #ff66a5","background: #ff66a5","color: #ff66a5; background: #030307;","background: #ff66a5","background: #ffc3dc","background: #ff66a5","color: #ff2424; background: #fff","color: #ff2424; background: #fff","color: #ff2424; background: #fff"];console.log.apply(console,c)}else window.console&&console.log("Pixi.js "+b.VERSION+" - http://www.pixijs.com/");b.dontSayHello=!0}},b.Point=function(a,b){this.x=a||0,this.y=b||0},b.Point.prototype.clone=function(){return new b.Point(this.x,this.y)},b.Point.prototype.set=function(a,b){this.x=a||0,this.y=b||(0!==b?this.x:0)},b.Point.prototype.constructor=b.Point,b.Rectangle=function(a,b,c,d){this.x=a||0,this.y=b||0,this.width=c||0,this.height=d||0},b.Rectangle.prototype.clone=function(){return new b.Rectangle(this.x,this.y,this.width,this.height)},b.Rectangle.prototype.contains=function(a,b){if(this.width<=0||this.height<=0)return!1;var c=this.x;if(a>=c&&a<=c+this.width){var d=this.y;if(b>=d&&b<=d+this.height)return!0}return!1},b.Rectangle.prototype.constructor=b.Rectangle,b.EmptyRectangle=new b.Rectangle(0,0,0,0),b.Polygon=function(a){if(a instanceof Array||(a=Array.prototype.slice.call(arguments)),"number"==typeof a[0]){for(var c=[],d=0,e=a.length;e>d;d+=2)c.push(new b.Point(a[d],a[d+1]));a=c}this.points=a},b.Polygon.prototype.clone=function(){for(var a=[],c=0;cb!=i>b&&(h-f)*(b-g)/(i-g)+f>a;j&&(c=!c)}return c},b.Polygon.prototype.constructor=b.Polygon,b.Circle=function(a,b,c){this.x=a||0,this.y=b||0,this.radius=c||0},b.Circle.prototype.clone=function(){return new b.Circle(this.x,this.y,this.radius)},b.Circle.prototype.contains=function(a,b){if(this.radius<=0)return!1;var c=this.x-a,d=this.y-b,e=this.radius*this.radius;return c*=c,d*=d,e>=c+d},b.Circle.prototype.getBounds=function(){return new b.Rectangle(this.x-this.radius,this.y-this.radius,this.width,this.height)},b.Circle.prototype.constructor=b.Circle,b.Ellipse=function(a,b,c,d){this.x=a||0,this.y=b||0,this.width=c||0,this.height=d||0},b.Ellipse.prototype.clone=function(){return new b.Ellipse(this.x,this.y,this.width,this.height)},b.Ellipse.prototype.contains=function(a,b){if(this.width<=0||this.height<=0)return!1;var c=(a-this.x)/this.width,d=(b-this.y)/this.height;return c*=c,d*=d,1>=c+d},b.Ellipse.prototype.getBounds=function(){return new b.Rectangle(this.x-this.width,this.y-this.height,this.width,this.height)},b.Ellipse.prototype.constructor=b.Ellipse,b.Matrix=function(){this.a=1,this.b=0,this.c=0,this.d=1,this.tx=0,this.ty=0},b.Matrix.prototype.fromArray=function(a){this.a=a[0],this.b=a[1],this.c=a[3],this.d=a[4],this.tx=a[2],this.ty=a[5]},b.Matrix.prototype.toArray=function(a){this.array||(this.array=new Float32Array(9));var b=this.array;return a?(b[0]=this.a,b[1]=this.c,b[2]=0,b[3]=this.b,b[4]=this.d,b[5]=0,b[6]=this.tx,b[7]=this.ty,b[8]=1):(b[0]=this.a,b[1]=this.b,b[2]=this.tx,b[3]=this.c,b[4]=this.d,b[5]=this.ty,b[6]=0,b[7]=0,b[8]=1),b},b.identityMatrix=new b.Matrix,b.determineMatrixArrayType=function(){return"undefined"!=typeof Float32Array?Float32Array:Array},b.Matrix2=b.determineMatrixArrayType(),b.DisplayObject=function(){this.position=new b.Point,this.scale=new b.Point(1,1),this.pivot=new b.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.hitArea=null,this.buttonMode=!1,this.renderable=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this._interactive=!1,this.defaultCursor="pointer",this.worldTransform=new b.Matrix,this.color=[],this.dynamic=!0,this._sr=0,this._cr=1,this.filterArea=null,this._bounds=new b.Rectangle(0,0,1,1),this._currentBounds=null,this._mask=null,this._cacheAsBitmap=!1,this._cacheIsDirty=!1},b.DisplayObject.prototype.constructor=b.DisplayObject,b.DisplayObject.prototype.setInteractive=function(a){this.interactive=a},Object.defineProperty(b.DisplayObject.prototype,"interactive",{get:function(){return this._interactive},set:function(a){this._interactive=a,this.stage&&(this.stage.dirty=!0)}}),Object.defineProperty(b.DisplayObject.prototype,"worldVisible",{get:function(){var a=this;do{if(!a.visible)return!1;a=a.parent}while(a);return!0}}),Object.defineProperty(b.DisplayObject.prototype,"mask",{get:function(){return this._mask},set:function(a){this._mask&&(this._mask.isMask=!1),this._mask=a,this._mask&&(this._mask.isMask=!0)}}),Object.defineProperty(b.DisplayObject.prototype,"filters",{get:function(){return this._filters},set:function(a){if(a){for(var b=[],c=0;c=0&&b<=this.children.length)return a.parent&&a.parent.removeChild(a),a.parent=this,this.children.splice(b,0,a),this.stage&&a.setStageReference(this.stage),a;throw new Error(a+" The index "+b+" supplied is out of bounds "+this.children.length)},b.DisplayObjectContainer.prototype.swapChildren=function(a,b){if(a!==b){var c=this.children.indexOf(a),d=this.children.indexOf(b);if(0>c||0>d)throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller.");this.children[c]=b,this.children[d]=a}},b.DisplayObjectContainer.prototype.getChildAt=function(a){if(a>=0&&a0&&d>=e){for(var f=this.children.splice(c,e),g=0;ga;a++)this.children[a].updateTransform()},b.DisplayObjectContainer.prototype.getBounds=function(a){if(0===this.children.length)return b.EmptyRectangle;if(a){var c=this.worldTransform;this.worldTransform=a,this.updateTransform(),this.worldTransform=c}for(var d,e,f,g=1/0,h=1/0,i=-1/0,j=-1/0,k=!1,l=0,m=this.children.length;m>l;l++){var n=this.children[l];n.visible&&(k=!0,d=this.children[l].getBounds(a),g=ge?i:e,j=j>f?j:f)}if(!k)return b.EmptyRectangle;var o=this._bounds;return o.x=g,o.y=h,o.width=i-g,o.height=j-h,o},b.DisplayObjectContainer.prototype.getLocalBounds=function(){var a=this.worldTransform;this.worldTransform=b.identityMatrix;for(var c=0,d=this.children.length;d>c;c++)this.children[c].updateTransform();var e=this.getBounds();return this.worldTransform=a,e},b.DisplayObjectContainer.prototype.setStageReference=function(a){this.stage=a,this._interactive&&(this.stage.dirty=!0);for(var b=0,c=this.children.length;c>b;b++){var d=this.children[b];d.setStageReference(a)}},b.DisplayObjectContainer.prototype.removeStageReference=function(){for(var a=0,b=this.children.length;b>a;a++){var c=this.children[a];c.removeStageReference()}this._interactive&&(this.stage.dirty=!0),this.stage=null},b.DisplayObjectContainer.prototype._renderWebGL=function(a){if(this.visible&&!(this.alpha<=0)){if(this._cacheAsBitmap)return this._renderCachedSprite(a),void 0;var b,c;if(this._mask||this._filters){for(this._filters&&(a.spriteBatch.flush(),a.filterManager.pushFilter(this._filterBlock)),this._mask&&(a.spriteBatch.stop(),a.maskManager.pushMask(this.mask,a),a.spriteBatch.start()),b=0,c=this.children.length;c>b;b++)this.children[b]._renderWebGL(a);a.spriteBatch.stop(),this._mask&&a.maskManager.popMask(this._mask,a),this._filters&&a.filterManager.popFilter(),a.spriteBatch.start()}else for(b=0,c=this.children.length;c>b;b++)this.children[b]._renderWebGL(a)}},b.DisplayObjectContainer.prototype._renderCanvas=function(a){if(this.visible!==!1&&0!==this.alpha){if(this._cacheAsBitmap)return this._renderCachedSprite(a),void 0;this._mask&&a.maskManager.pushMask(this._mask,a.context);for(var b=0,c=this.children.length;c>b;b++){var d=this.children[b];d._renderCanvas(a)}this._mask&&a.maskManager.popMask(a.context)}},b.Sprite=function(a){b.DisplayObjectContainer.call(this),this.anchor=new b.Point,this.texture=a,this._width=0,this._height=0,this.tint=16777215,this.blendMode=b.blendModes.NORMAL,a.baseTexture.hasLoaded?this.onTextureUpdate():(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},b.Sprite.prototype=Object.create(b.DisplayObjectContainer.prototype),b.Sprite.prototype.constructor=b.Sprite,Object.defineProperty(b.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(a){this.scale.x=a/this.texture.frame.width,this._width=a}}),Object.defineProperty(b.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(a){this.scale.y=a/this.texture.frame.height,this._height=a}}),b.Sprite.prototype.setTexture=function(a){this.texture=a,this.cachedTint=16777215},b.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height)},b.Sprite.prototype.getBounds=function(a){var b=this.texture.frame.width,c=this.texture.frame.height,d=b*(1-this.anchor.x),e=b*-this.anchor.x,f=c*(1-this.anchor.y),g=c*-this.anchor.y,h=a||this.worldTransform,i=h.a,j=h.c,k=h.b,l=h.d,m=h.tx,n=h.ty,o=i*e+k*g+m,p=l*g+j*e+n,q=i*d+k*g+m,r=l*g+j*d+n,s=i*d+k*f+m,t=l*f+j*d+n,u=i*e+k*f+m,v=l*f+j*e+n,w=-1/0,x=-1/0,y=1/0,z=1/0;y=y>o?o:y,y=y>q?q:y,y=y>s?s:y,y=y>u?u:y,z=z>p?p:z,z=z>r?r:z,z=z>t?t:z,z=z>v?v:z,w=o>w?o:w,w=q>w?q:w,w=s>w?s:w,w=u>w?u:w,x=p>x?p:x,x=r>x?r:x,x=t>x?t:x,x=v>x?v:x;var A=this._bounds;return A.x=y,A.width=w-y,A.y=z,A.height=x-z,this._currentBounds=A,A},b.Sprite.prototype._renderWebGL=function(a){if(this.visible&&!(this.alpha<=0)){var b,c;if(this._mask||this._filters){var d=a.spriteBatch;for(this._filters&&(d.flush(),a.filterManager.pushFilter(this._filterBlock)),this._mask&&(d.stop(),a.maskManager.pushMask(this.mask,a),d.start()),d.render(this),b=0,c=this.children.length;c>b;b++)this.children[b]._renderWebGL(a);d.stop(),this._mask&&a.maskManager.popMask(this._mask,a),this._filters&&a.filterManager.popFilter(),d.start()}else for(a.spriteBatch.render(this),b=0,c=this.children.length;c>b;b++)this.children[b]._renderWebGL(a)}},b.Sprite.prototype._renderCanvas=function(a){if(this.visible!==!1&&0!==this.alpha){if(this.blendMode!==a.currentBlendMode&&(a.currentBlendMode=this.blendMode,a.context.globalCompositeOperation=b.blendModesCanvas[a.currentBlendMode]),this._mask&&a.maskManager.pushMask(this._mask,a.context),this.texture.valid){a.context.globalAlpha=this.worldAlpha,a.roundPixels?a.context.setTransform(this.worldTransform.a,this.worldTransform.c,this.worldTransform.b,this.worldTransform.d,0|this.worldTransform.tx,0|this.worldTransform.ty):a.context.setTransform(this.worldTransform.a,this.worldTransform.c,this.worldTransform.b,this.worldTransform.d,this.worldTransform.tx,this.worldTransform.ty),a.smoothProperty&&a.scaleMode!==this.texture.baseTexture.scaleMode&&(a.scaleMode=this.texture.baseTexture.scaleMode,a.context[a.smoothProperty]=a.scaleMode===b.scaleModes.LINEAR);var c=this.texture.trim?this.texture.trim.x-this.anchor.x*this.texture.trim.width:this.anchor.x*-this.texture.frame.width,d=this.texture.trim?this.texture.trim.y-this.anchor.y*this.texture.trim.height:this.anchor.y*-this.texture.frame.height;16777215!==this.tint?(this.cachedTint!==this.tint&&(this.cachedTint=this.tint,this.tintedTexture=b.CanvasTinter.getTintedTexture(this,this.tint)),a.context.drawImage(this.tintedTexture,0,0,this.texture.crop.width,this.texture.crop.height,c,d,this.texture.crop.width,this.texture.crop.height)):a.context.drawImage(this.texture.baseTexture.source,this.texture.crop.x,this.texture.crop.y,this.texture.crop.width,this.texture.crop.height,c,d,this.texture.crop.width,this.texture.crop.height)}for(var e=0,f=this.children.length;f>e;e++)this.children[e]._renderCanvas(a);this._mask&&a.maskManager.popMask(a.context)}},b.Sprite.fromFrame=function(a){var c=b.TextureCache[a];if(!c)throw new Error('The frameId "'+a+'" does not exist in the texture cache'+this);return new b.Sprite(c)},b.Sprite.fromImage=function(a,c,d){var e=b.Texture.fromImage(a,c,d);return new b.Sprite(e)},b.SpriteBatch=function(a){b.DisplayObjectContainer.call(this),this.textureThing=a,this.ready=!1},b.SpriteBatch.prototype=Object.create(b.DisplayObjectContainer.prototype),b.SpriteBatch.constructor=b.SpriteBatch,b.SpriteBatch.prototype.initWebGL=function(a){this.fastSpriteBatch=new b.WebGLFastSpriteBatch(a),this.ready=!0},b.SpriteBatch.prototype.updateTransform=function(){b.DisplayObject.prototype.updateTransform.call(this)},b.SpriteBatch.prototype._renderWebGL=function(a){!this.visible||this.alpha<=0||!this.children.length||(this.ready||this.initWebGL(a.gl),a.spriteBatch.stop(),a.shaderManager.setShader(a.shaderManager.fastShader),this.fastSpriteBatch.begin(this,a),this.fastSpriteBatch.render(this),a.spriteBatch.start())},b.SpriteBatch.prototype._renderCanvas=function(a){var c=a.context;c.globalAlpha=this.worldAlpha,b.DisplayObject.prototype.updateTransform.call(this);for(var d=this.worldTransform,e=!0,f=0;f=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},b.MovieClip.fromFrames=function(a){for(var c=[],d=0;de?(g>0&&(b+="\n"),b+=f[g],e=this.style.wordWrapWidth-h):(e-=i,b+=" "+f[g])}d=2?parseInt(c[c.length-2],10):b.BitmapText.fonts[this.fontName].size,this.dirty=!0,this.tint=a.tint},b.BitmapText.prototype.updateText=function(){for(var a=b.BitmapText.fonts[this.fontName],c=new b.Point,d=null,e=[],f=0,g=[],h=0,i=this.fontSize/a.size,j=0;j=j;j++){var n=0;"right"===this.style.align?n=f-g[j]:"center"===this.style.align&&(n=(f-g[j])/2),m.push(n)}var o=this.children.length,p=e.length,q=this.tint||16777215;for(j=0;p>j;j++){var r=o>j?this.children[j]:this._pool.pop();r?r.setTexture(e[j].texture):r=new b.Sprite(e[j].texture),r.position.x=(e[j].position.x+m[e[j].line])*i,r.position.y=e[j].position.y*i,r.scale.x=r.scale.y=i,r.tint=q,r.parent||this.addChild(r)}for(;this.children.length>p;){var s=this.getChildAt(this.children.length-1);this._pool.push(s),this.removeChild(s)}this.textWidth=f*i,this.textHeight=(c.y+a.lineHeight)*i},b.BitmapText.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),b.DisplayObjectContainer.prototype.updateTransform.call(this)},b.BitmapText.fonts={},b.InteractionData=function(){this.global=new b.Point,this.target=null,this.originalEvent=null},b.InteractionData.prototype.getLocalPosition=function(a){var c=a.worldTransform,d=this.global,e=c.a,f=c.b,g=c.tx,h=c.c,i=c.d,j=c.ty,k=1/(e*i+f*-h);return new b.Point(i*k*d.x+-f*k*d.y+(j*f-g*i)*k,e*k*d.y+-h*k*d.x+(-j*e+g*h)*k)},b.InteractionData.prototype.constructor=b.InteractionData,b.InteractionManager=function(a){this.stage=a,this.mouse=new b.InteractionData,this.touchs={},this.tempPoint=new b.Point,this.mouseoverEnabled=!0,this.pool=[],this.interactiveItems=[],this.interactionDOMElement=null,this.onMouseMove=this.onMouseMove.bind(this),this.onMouseDown=this.onMouseDown.bind(this),this.onMouseOut=this.onMouseOut.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onTouchStart=this.onTouchStart.bind(this),this.onTouchEnd=this.onTouchEnd.bind(this),this.onTouchMove=this.onTouchMove.bind(this),this.last=0,this.currentCursorStyle="inherit",this.mouseOut=!1},b.InteractionManager.prototype.constructor=b.InteractionManager,b.InteractionManager.prototype.collectInteractiveSprite=function(a,b){for(var c=a.children,d=c.length,e=d-1;e>=0;e--){var f=c[e];f._interactive?(b.interactiveChildren=!0,this.interactiveItems.push(f),f.children.length>0&&this.collectInteractiveSprite(f,f)):(f.__iParent=null,f.children.length>0&&this.collectInteractiveSprite(f,b))}},b.InteractionManager.prototype.setTarget=function(a){this.target=a,null===this.interactionDOMElement&&this.setTargetDomElement(a.view)},b.InteractionManager.prototype.setTargetDomElement=function(a){this.removeEvents(),window.navigator.msPointerEnabled&&(a.style["-ms-content-zooming"]="none",a.style["-ms-touch-action"]="none"),this.interactionDOMElement=a,a.addEventListener("mousemove",this.onMouseMove,!0),a.addEventListener("mousedown",this.onMouseDown,!0),a.addEventListener("mouseout",this.onMouseOut,!0),a.addEventListener("touchstart",this.onTouchStart,!0),a.addEventListener("touchend",this.onTouchEnd,!0),a.addEventListener("touchmove",this.onTouchMove,!0),window.addEventListener("mouseup",this.onMouseUp,!0)},b.InteractionManager.prototype.removeEvents=function(){this.interactionDOMElement&&(this.interactionDOMElement.style["-ms-content-zooming"]="",this.interactionDOMElement.style["-ms-touch-action"]="",this.interactionDOMElement.removeEventListener("mousemove",this.onMouseMove,!0),this.interactionDOMElement.removeEventListener("mousedown",this.onMouseDown,!0),this.interactionDOMElement.removeEventListener("mouseout",this.onMouseOut,!0),this.interactionDOMElement.removeEventListener("touchstart",this.onTouchStart,!0),this.interactionDOMElement.removeEventListener("touchend",this.onTouchEnd,!0),this.interactionDOMElement.removeEventListener("touchmove",this.onTouchMove,!0),this.interactionDOMElement=null,window.removeEventListener("mouseup",this.onMouseUp,!0))},b.InteractionManager.prototype.update=function(){if(this.target){var a=Date.now(),c=a-this.last;if(c=c*b.INTERACTION_FREQUENCY/1e3,!(1>c)){this.last=a;var d=0;this.dirty&&this.rebuildInteractiveGraph();var e=this.interactiveItems.length,f="inherit",g=!1;for(d=0;e>d;d++){var h=this.interactiveItems[d];h.__hit=this.hitTest(h,this.mouse),this.mouse.target=h,h.__hit&&!g?(h.buttonMode&&(f=h.defaultCursor),h.interactiveChildren||(g=!0),h.__isOver||(h.mouseover&&h.mouseover(this.mouse),h.__isOver=!0)):h.__isOver&&(h.mouseout&&h.mouseout(this.mouse),h.__isOver=!1)}this.currentCursorStyle!==f&&(this.currentCursorStyle=f,this.interactionDOMElement.style.cursor=f)}}},b.InteractionManager.prototype.rebuildInteractiveGraph=function(){this.dirty=!1;for(var a=this.interactiveItems.length,b=0;a>b;b++)this.interactiveItems[b].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)},b.InteractionManager.prototype.onMouseMove=function(a){this.dirty&&this.rebuildInteractiveGraph(),this.mouse.originalEvent=a||window.event;var b=this.interactionDOMElement.getBoundingClientRect();this.mouse.global.x=(a.clientX-b.left)*(this.target.width/b.width),this.mouse.global.y=(a.clientY-b.top)*(this.target.height/b.height);for(var c=this.interactiveItems.length,d=0;c>d;d++){var e=this.interactiveItems[d];e.mousemove&&e.mousemove(this.mouse)}},b.InteractionManager.prototype.onMouseDown=function(a){this.dirty&&this.rebuildInteractiveGraph(),this.mouse.originalEvent=a||window.event,b.AUTO_PREVENT_DEFAULT&&this.mouse.originalEvent.preventDefault();for(var c=this.interactiveItems.length,d=0;c>d;d++){var e=this.interactiveItems[d];if((e.mousedown||e.click)&&(e.__mouseIsDown=!0,e.__hit=this.hitTest(e,this.mouse),e.__hit&&(e.mousedown&&e.mousedown(this.mouse),e.__isDown=!0,!e.interactiveChildren)))break}},b.InteractionManager.prototype.onMouseOut=function(){this.dirty&&this.rebuildInteractiveGraph();var a=this.interactiveItems.length;this.interactionDOMElement.style.cursor="inherit";for(var b=0;a>b;b++){var c=this.interactiveItems[b];c.__isOver&&(this.mouse.target=c,c.mouseout&&c.mouseout(this.mouse),c.__isOver=!1)}this.mouseOut=!0,this.mouse.global.x=-1e4,this.mouse.global.y=-1e4},b.InteractionManager.prototype.onMouseUp=function(a){this.dirty&&this.rebuildInteractiveGraph(),this.mouse.originalEvent=a||window.event; -for(var b=this.interactiveItems.length,c=!1,d=0;b>d;d++){var e=this.interactiveItems[d];e.__hit=this.hitTest(e,this.mouse),e.__hit&&!c?(e.mouseup&&e.mouseup(this.mouse),e.__isDown&&e.click&&e.click(this.mouse),e.interactiveChildren||(c=!0)):e.__isDown&&e.mouseupoutside&&e.mouseupoutside(this.mouse),e.__isDown=!1}},b.InteractionManager.prototype.hitTest=function(a,c){var d=c.global;if(!a.worldVisible)return!1;var e=a instanceof b.Sprite,f=a.worldTransform,g=f.a,h=f.b,i=f.tx,j=f.c,k=f.d,l=f.ty,m=1/(g*k+h*-j),n=k*m*d.x+-h*m*d.y+(l*h-i*k)*m,o=g*m*d.y+-j*m*d.x+(-l*g+i*j)*m;if(c.target=a,a.hitArea&&a.hitArea.contains)return a.hitArea.contains(n,o)?(c.target=a,!0):!1;if(e){var p,q=a.texture.frame.width,r=a.texture.frame.height,s=-q*a.anchor.x;if(n>s&&s+q>n&&(p=-r*a.anchor.y,o>p&&p+r>o))return c.target=a,!0}for(var t=a.children.length,u=0;t>u;u++){var v=a.children[u],w=this.hitTest(v,c);if(w)return c.target=a,!0}return!1},b.InteractionManager.prototype.onTouchMove=function(a){this.dirty&&this.rebuildInteractiveGraph();var b,c=this.interactionDOMElement.getBoundingClientRect(),d=a.changedTouches,e=0;for(e=0;ei;i++){var j=this.interactiveItems[i];if((j.touchstart||j.tap)&&(j.__hit=this.hitTest(j,g),j.__hit&&(j.touchstart&&j.touchstart(g),j.__isDown=!0,j.__touchData=j.__touchData||{},j.__touchData[f.identifier]=g,!j.interactiveChildren)))break}}},b.InteractionManager.prototype.onTouchEnd=function(a){this.dirty&&this.rebuildInteractiveGraph();for(var b=this.interactionDOMElement.getBoundingClientRect(),c=a.changedTouches,d=0;di;i++){var j=this.interactiveItems[i];j.__touchData&&j.__touchData[e.identifier]&&(j.__hit=this.hitTest(j,j.__touchData[e.identifier]),f.originalEvent=a||window.event,(j.touchend||j.tap)&&(j.__hit&&!g?(j.touchend&&j.touchend(f),j.__isDown&&j.tap&&j.tap(f),j.interactiveChildren||(g=!0)):j.__isDown&&j.touchendoutside&&j.touchendoutside(f),j.__isDown=!1),j.__touchData[e.identifier]=null)}this.pool.push(f),this.touchs[e.identifier]=null}},b.Stage=function(a){b.DisplayObjectContainer.call(this),this.worldTransform=new b.Matrix,this.interactive=!0,this.interactionManager=new b.InteractionManager(this),this.dirty=!0,this.stage=this,this.stage.hitArea=new b.Rectangle(0,0,1e5,1e5),this.setBackgroundColor(a)},b.Stage.prototype=Object.create(b.DisplayObjectContainer.prototype),b.Stage.prototype.constructor=b.Stage,b.Stage.prototype.setInteractionDelegate=function(a){this.interactionManager.setTargetDomElement(a)},b.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var a=0,b=this.children.length;b>a;a++)this.children[a].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},b.Stage.prototype.setBackgroundColor=function(a){this.backgroundColor=a||0,this.backgroundColorSplit=b.hex2rgb(this.backgroundColor);var c=this.backgroundColor.toString(16);c="000000".substr(0,6-c.length)+c,this.backgroundColorString="#"+c},b.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global};for(var c=0,d=["ms","moz","webkit","o"],e=0;e>16&255)/255,(a>>8&255)/255,(255&a)/255]},b.rgb2hex=function(a){return(255*a[0]<<16)+(255*a[1]<<8)+255*a[2]},"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var a=Array.prototype.slice;return function(b){function c(){var f=e.concat(a.call(arguments));d.apply(this instanceof c?this:b,f)}var d=this,e=a.call(arguments,1);if("function"!=typeof d)throw new TypeError;return c.prototype=function f(a){return a&&(f.prototype=a),this instanceof f?void 0:new f}(d.prototype),c}}()),b.AjaxRequest=function(){var a=["Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.3.0","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new window.XMLHttpRequest:!1;for(var b=0;b0&&0===(a&a-1))return a;for(var b=1;a>b;)b<<=1;return b},b.EventTarget=function(){var a={};this.addEventListener=this.on=function(b,c){void 0===a[b]&&(a[b]=[]),-1===a[b].indexOf(c)&&a[b].unshift(c)},this.dispatchEvent=this.emit=function(b){if(a[b.type]&&a[b.type].length)for(var c=a[b.type].length-1;c>=0;c--)a[b.type][c](b)},this.removeEventListener=this.off=function(b,c){if(void 0!==a[b]){var d=a[b].indexOf(c);-1!==d&&a[b].splice(d,1)}},this.removeAllEventListeners=function(b){var c=a[b];c&&(c.length=0)}},b.autoDetectRenderer=function(a,c,d,e,f){a||(a=800),c||(c=600);var g=function(){try{var a=document.createElement("canvas");return!!window.WebGLRenderingContext&&(a.getContext("webgl")||a.getContext("experimental-webgl"))}catch(b){return!1}}();return g?new b.WebGLRenderer(a,c,d,e,f):new b.CanvasRenderer(a,c,d,e)},b.autoDetectRecommendedRenderer=function(a,c,d,e,f){a||(a=800),c||(c=600);var g=function(){try{var a=document.createElement("canvas");return!!window.WebGLRenderingContext&&(a.getContext("webgl")||a.getContext("experimental-webgl"))}catch(b){return!1}}(),h=/Android/i.test(navigator.userAgent);return g&&!h?new b.WebGLRenderer(a,c,d,e,f):new b.CanvasRenderer(a,c,d,e)},b.PolyK={},b.PolyK.Triangulate=function(a){var c=!0,d=a.length>>1;if(3>d)return[];for(var e=[],f=[],g=0;d>g;g++)f.push(g);g=0;for(var h=d;h>3;){var i=f[(g+0)%h],j=f[(g+1)%h],k=f[(g+2)%h],l=a[2*i],m=a[2*i+1],n=a[2*j],o=a[2*j+1],p=a[2*k],q=a[2*k+1],r=!1;if(b.PolyK._convex(l,m,n,o,p,q,c)){r=!0;for(var s=0;h>s;s++){var t=f[s];if(t!==i&&t!==j&&t!==k&&b.PolyK._PointInTriangle(a[2*t],a[2*t+1],l,m,n,o,p,q)){r=!1;break}}}if(r)e.push(i,j,k),f.splice((g+1)%h,1),h--,g=0;else if(g++>3*h){if(!c)return window.console.log("PIXI Warning: shape too complex to fill"),[];for(e=[],f=[],g=0;d>g;g++)f.push(g);g=0,h=d,c=!1}}return e.push(f[0],f[1],f[2]),e},b.PolyK._PointInTriangle=function(a,b,c,d,e,f,g,h){var i=g-c,j=h-d,k=e-c,l=f-d,m=a-c,n=b-d,o=i*i+j*j,p=i*k+j*l,q=i*m+j*n,r=k*k+l*l,s=k*m+l*n,t=1/(o*r-p*p),u=(r*q-p*s)*t,v=(o*s-p*q)*t;return u>=0&&v>=0&&1>u+v},b.PolyK._convex=function(a,b,c,d,e,f,g){return(b-d)*(e-c)+(c-a)*(f-d)>=0===g},b.initDefaultShaders=function(){},b.CompileVertexShader=function(a,c){return b._CompileShader(a,c,a.VERTEX_SHADER)},b.CompileFragmentShader=function(a,c){return b._CompileShader(a,c,a.FRAGMENT_SHADER)},b._CompileShader=function(a,b,c){var d=b.join("\n"),e=a.createShader(c);return a.shaderSource(e,d),a.compileShader(e),a.getShaderParameter(e,a.COMPILE_STATUS)?e:(window.console.log(a.getShaderInfoLog(e)),null)},b.compileProgram=function(a,c,d){var e=b.CompileFragmentShader(a,d),f=b.CompileVertexShader(a,c),g=a.createProgram();return a.attachShader(g,f),a.attachShader(g,e),a.linkProgram(g),a.getProgramParameter(g,a.LINK_STATUS)||window.console.log("Could not initialise shaders"),g},b.PixiShader=function(a){this._UID=b._UID++,this.gl=a,this.program=null,this.fragmentSrc=["precision lowp float;","varying vec2 vTextureCoord;","varying vec4 vColor;","uniform sampler2D uSampler;","void main(void) {"," gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;","}"],this.textureCount=0,this.attributes=[],this.init()},b.PixiShader.prototype.init=function(){var a=this.gl,c=b.compileProgram(a,this.vertexSrc||b.PixiShader.defaultVertexSrc,this.fragmentSrc);a.useProgram(c),this.uSampler=a.getUniformLocation(c,"uSampler"),this.projectionVector=a.getUniformLocation(c,"projectionVector"),this.offsetVector=a.getUniformLocation(c,"offsetVector"),this.dimensions=a.getUniformLocation(c,"dimensions"),this.aVertexPosition=a.getAttribLocation(c,"aVertexPosition"),this.aTextureCoord=a.getAttribLocation(c,"aTextureCoord"),this.colorAttribute=a.getAttribLocation(c,"aColor"),-1===this.colorAttribute&&(this.colorAttribute=2),this.attributes=[this.aVertexPosition,this.aTextureCoord,this.colorAttribute];for(var d in this.uniforms)this.uniforms[d].uniformLocation=a.getUniformLocation(c,d);this.initUniforms(),this.program=c},b.PixiShader.prototype.initUniforms=function(){this.textureCount=1;var a,b=this.gl;for(var c in this.uniforms){a=this.uniforms[c];var d=a.type;"sampler2D"===d?(a._init=!1,null!==a.value&&this.initSampler2D(a)):"mat2"===d||"mat3"===d||"mat4"===d?(a.glMatrix=!0,a.glValueLength=1,"mat2"===d?a.glFunc=b.uniformMatrix2fv:"mat3"===d?a.glFunc=b.uniformMatrix3fv:"mat4"===d&&(a.glFunc=b.uniformMatrix4fv)):(a.glFunc=b["uniform"+d],a.glValueLength="2f"===d||"2i"===d?2:"3f"===d||"3i"===d?3:"4f"===d||"4i"===d?4:1)}},b.PixiShader.prototype.initSampler2D=function(a){if(a.value&&a.value.baseTexture&&a.value.baseTexture.hasLoaded){var b=this.gl;if(b.activeTexture(b["TEXTURE"+this.textureCount]),b.bindTexture(b.TEXTURE_2D,a.value.baseTexture._glTextures[b.id]),a.textureData){var c=a.textureData,d=c.magFilter?c.magFilter:b.LINEAR,e=c.minFilter?c.minFilter:b.LINEAR,f=c.wrapS?c.wrapS:b.CLAMP_TO_EDGE,g=c.wrapT?c.wrapT:b.CLAMP_TO_EDGE,h=c.luminance?b.LUMINANCE:b.RGBA;if(c.repeat&&(f=b.REPEAT,g=b.REPEAT),b.pixelStorei(b.UNPACK_FLIP_Y_WEBGL,!!c.flipY),c.width){var i=c.width?c.width:512,j=c.height?c.height:2,k=c.border?c.border:0;b.texImage2D(b.TEXTURE_2D,0,h,i,j,k,h,b.UNSIGNED_BYTE,null)}else b.texImage2D(b.TEXTURE_2D,0,h,b.RGBA,b.UNSIGNED_BYTE,a.value.baseTexture.source);b.texParameteri(b.TEXTURE_2D,b.TEXTURE_MAG_FILTER,d),b.texParameteri(b.TEXTURE_2D,b.TEXTURE_MIN_FILTER,e),b.texParameteri(b.TEXTURE_2D,b.TEXTURE_WRAP_S,f),b.texParameteri(b.TEXTURE_2D,b.TEXTURE_WRAP_T,g)}b.uniform1i(a.uniformLocation,this.textureCount),a._init=!0,this.textureCount++}},b.PixiShader.prototype.syncUniforms=function(){this.textureCount=1;var a,c=this.gl;for(var d in this.uniforms)a=this.uniforms[d],1===a.glValueLength?a.glMatrix===!0?a.glFunc.call(c,a.uniformLocation,a.transpose,a.value):a.glFunc.call(c,a.uniformLocation,a.value):2===a.glValueLength?a.glFunc.call(c,a.uniformLocation,a.value.x,a.value.y):3===a.glValueLength?a.glFunc.call(c,a.uniformLocation,a.value.x,a.value.y,a.value.z):4===a.glValueLength?a.glFunc.call(c,a.uniformLocation,a.value.x,a.value.y,a.value.z,a.value.w):"sampler2D"===a.type&&(a._init?(c.activeTexture(c["TEXTURE"+this.textureCount]),c.bindTexture(c.TEXTURE_2D,a.value.baseTexture._glTextures[c.id]||b.createWebGLTexture(a.value.baseTexture,c)),c.uniform1i(a.uniformLocation,this.textureCount),this.textureCount++):this.initSampler2D(a))},b.PixiShader.prototype.destroy=function(){this.gl.deleteProgram(this.program),this.uniforms=null,this.gl=null,this.attributes=null},b.PixiShader.defaultVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute vec2 aColor;","uniform vec2 projectionVector;","uniform vec2 offsetVector;","varying vec2 vTextureCoord;","varying vec4 vColor;","const vec2 center = vec2(-1.0, 1.0);","void main(void) {"," gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);"," vTextureCoord = aTextureCoord;"," vec3 color = mod(vec3(aColor.y/65536.0, aColor.y/256.0, aColor.y), 256.0) / 256.0;"," vColor = vec4(color * aColor.x, aColor.x);","}"],b.PixiFastShader=function(a){this._UID=b._UID++,this.gl=a,this.program=null,this.fragmentSrc=["precision lowp float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {"," gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;","}"],this.vertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aPositionCoord;","attribute vec2 aScale;","attribute float aRotation;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform vec2 projectionVector;","uniform vec2 offsetVector;","uniform mat3 uMatrix;","varying vec2 vTextureCoord;","varying float vColor;","const vec2 center = vec2(-1.0, 1.0);","void main(void) {"," vec2 v;"," vec2 sv = aVertexPosition * aScale;"," v.x = (sv.x) * cos(aRotation) - (sv.y) * sin(aRotation);"," v.y = (sv.x) * sin(aRotation) + (sv.y) * cos(aRotation);"," v = ( uMatrix * vec3(v + aPositionCoord , 1.0) ).xy ;"," gl_Position = vec4( ( v / projectionVector) + center , 0.0, 1.0);"," vTextureCoord = aTextureCoord;"," vColor = aColor;","}"],this.textureCount=0,this.init()},b.PixiFastShader.prototype.init=function(){var a=this.gl,c=b.compileProgram(a,this.vertexSrc,this.fragmentSrc);a.useProgram(c),this.uSampler=a.getUniformLocation(c,"uSampler"),this.projectionVector=a.getUniformLocation(c,"projectionVector"),this.offsetVector=a.getUniformLocation(c,"offsetVector"),this.dimensions=a.getUniformLocation(c,"dimensions"),this.uMatrix=a.getUniformLocation(c,"uMatrix"),this.aVertexPosition=a.getAttribLocation(c,"aVertexPosition"),this.aPositionCoord=a.getAttribLocation(c,"aPositionCoord"),this.aScale=a.getAttribLocation(c,"aScale"),this.aRotation=a.getAttribLocation(c,"aRotation"),this.aTextureCoord=a.getAttribLocation(c,"aTextureCoord"),this.colorAttribute=a.getAttribLocation(c,"aColor"),-1===this.colorAttribute&&(this.colorAttribute=2),this.attributes=[this.aVertexPosition,this.aPositionCoord,this.aScale,this.aRotation,this.aTextureCoord,this.colorAttribute],this.program=c},b.PixiFastShader.prototype.destroy=function(){this.gl.deleteProgram(this.program),this.uniforms=null,this.gl=null,this.attributes=null},b.StripShader=function(a){this._UID=b._UID++,this.gl=a,this.program=null,this.fragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","uniform float alpha;","uniform sampler2D uSampler;","void main(void) {"," gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","}"],this.vertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","uniform mat3 translationMatrix;","uniform vec2 projectionVector;","uniform vec2 offsetVector;","varying vec2 vTextureCoord;","void main(void) {"," vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);"," v -= offsetVector.xyx;"," gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);"," vTextureCoord = aTextureCoord;","}"],this.init()},b.StripShader.prototype.init=function(){var a=this.gl,c=b.compileProgram(a,this.vertexSrc,this.fragmentSrc);a.useProgram(c),this.uSampler=a.getUniformLocation(c,"uSampler"),this.projectionVector=a.getUniformLocation(c,"projectionVector"),this.offsetVector=a.getUniformLocation(c,"offsetVector"),this.colorAttribute=a.getAttribLocation(c,"aColor"),this.aVertexPosition=a.getAttribLocation(c,"aVertexPosition"),this.aTextureCoord=a.getAttribLocation(c,"aTextureCoord"),this.attributes=[this.aVertexPosition,this.aTextureCoord],this.translationMatrix=a.getUniformLocation(c,"translationMatrix"),this.alpha=a.getUniformLocation(c,"alpha"),this.program=c},b.PrimitiveShader=function(a){this._UID=b._UID++,this.gl=a,this.program=null,this.fragmentSrc=["precision mediump float;","varying vec4 vColor;","void main(void) {"," gl_FragColor = vColor;","}"],this.vertexSrc=["attribute vec2 aVertexPosition;","attribute vec4 aColor;","uniform mat3 translationMatrix;","uniform vec2 projectionVector;","uniform vec2 offsetVector;","uniform float alpha;","uniform vec3 tint;","varying vec4 vColor;","void main(void) {"," vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);"," v -= offsetVector.xyx;"," gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);"," vColor = aColor * vec4(tint * alpha, alpha);","}"],this.init()},b.PrimitiveShader.prototype.init=function(){var a=this.gl,c=b.compileProgram(a,this.vertexSrc,this.fragmentSrc);a.useProgram(c),this.projectionVector=a.getUniformLocation(c,"projectionVector"),this.offsetVector=a.getUniformLocation(c,"offsetVector"),this.tintColor=a.getUniformLocation(c,"tint"),this.aVertexPosition=a.getAttribLocation(c,"aVertexPosition"),this.colorAttribute=a.getAttribLocation(c,"aColor"),this.attributes=[this.aVertexPosition,this.colorAttribute],this.translationMatrix=a.getUniformLocation(c,"translationMatrix"),this.alpha=a.getUniformLocation(c,"alpha"),this.program=c},b.PrimitiveShader.prototype.destroy=function(){this.gl.deleteProgram(this.program),this.uniforms=null,this.gl=null,this.attribute=null},b.ComplexPrimitiveShader=function(a){this._UID=b._UID++,this.gl=a,this.program=null,this.fragmentSrc=["precision mediump float;","varying vec4 vColor;","void main(void) {"," gl_FragColor = vColor;","}"],this.vertexSrc=["attribute vec2 aVertexPosition;","uniform mat3 translationMatrix;","uniform vec2 projectionVector;","uniform vec2 offsetVector;","uniform vec3 tint;","uniform float alpha;","uniform vec3 color;","varying vec4 vColor;","void main(void) {"," vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);"," v -= offsetVector.xyx;"," gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);"," vColor = vec4(color * alpha * tint, alpha);","}"],this.init()},b.ComplexPrimitiveShader.prototype.init=function(){var a=this.gl,c=b.compileProgram(a,this.vertexSrc,this.fragmentSrc);a.useProgram(c),this.projectionVector=a.getUniformLocation(c,"projectionVector"),this.offsetVector=a.getUniformLocation(c,"offsetVector"),this.tintColor=a.getUniformLocation(c,"tint"),this.color=a.getUniformLocation(c,"color"),this.aVertexPosition=a.getAttribLocation(c,"aVertexPosition"),this.attributes=[this.aVertexPosition,this.colorAttribute],this.translationMatrix=a.getUniformLocation(c,"translationMatrix"),this.alpha=a.getUniformLocation(c,"alpha"),this.program=c},b.ComplexPrimitiveShader.prototype.destroy=function(){this.gl.deleteProgram(this.program),this.uniforms=null,this.gl=null,this.attribute=null},b.WebGLGraphics=function(){},b.WebGLGraphics.renderGraphics=function(a,c){var d,e=c.gl,f=c.projection,g=c.offset,h=c.shaderManager.primitiveShader;a.dirty&&b.WebGLGraphics.updateGraphics(a,e);for(var i=a._webGL[e.id],j=0;j6&&(h.points.length>10?(g=b.WebGLGraphics.switchMode(d,1),b.WebGLGraphics.buildComplexPoly(h,g)):(g=b.WebGLGraphics.switchMode(d,0),b.WebGLGraphics.buildPoly(h,g))),h.lineWidth>0&&(g=b.WebGLGraphics.switchMode(d,0),b.WebGLGraphics.buildLine(h,g))):(g=b.WebGLGraphics.switchMode(d,0),h.type===b.Graphics.RECT?b.WebGLGraphics.buildRectangle(h,g):h.type===b.Graphics.CIRC||h.type===b.Graphics.ELIP?b.WebGLGraphics.buildCircle(h,g):h.type===b.Graphics.RREC&&b.WebGLGraphics.buildRoundedRectangle(h,g)),d.lastIndex++}for(e=0;e=q;q++)p=q/n,h=g(a,c,p),i=g(b,d,p),j=g(c,e,p),k=g(d,f,p),l=g(h,j,p),m=g(i,k,p),o.push(l,m);return o},b.WebGLGraphics.buildCircle=function(a,c){var d=a.points,e=d[0],f=d[1],g=d[2],h=d[3],i=40,j=2*Math.PI/i,k=0;if(a.fill){var l=b.hex2rgb(a.fillColor),m=a.fillAlpha,n=l[0]*m,o=l[1]*m,p=l[2]*m,q=c.points,r=c.indices,s=q.length/6;for(r.push(s),k=0;i+1>k;k++)q.push(e,f,n,o,p,m),q.push(e+Math.sin(j*k)*g,f+Math.cos(j*k)*h,n,o,p,m),r.push(s++,s++);r.push(s-1)}if(a.lineWidth){var t=a.points;for(a.points=[],k=0;i+1>k;k++)a.points.push(e+Math.sin(j*k)*g,f+Math.cos(j*k)*h);b.WebGLGraphics.buildLine(a,c),a.points=t}},b.WebGLGraphics.buildLine=function(a,c){var d=0,e=a.points;if(0!==e.length){if(a.lineWidth%2)for(d=0;dd;d++)l=e[2*(d-1)],m=e[2*(d-1)+1],n=e[2*d],o=e[2*d+1],p=e[2*(d+1)],q=e[2*(d+1)+1],r=-(m-o),s=l-n,F=Math.sqrt(r*r+s*s),r/=F,s/=F,r*=L,s*=L,t=-(o-q),u=n-p,F=Math.sqrt(t*t+u*u),t/=F,u/=F,t*=L,u*=L,x=-s+m-(-s+o),y=-r+n-(-r+l),z=(-r+l)*(-s+o)-(-r+n)*(-s+m),A=-u+q-(-u+o),B=-t+n-(-t+p),C=(-t+p)*(-u+o)-(-t+n)*(-u+q),D=x*B-A*y,Math.abs(D)<.1?(D+=10.1,G.push(n-r,o-s,O,P,Q,N),G.push(n+r,o+s,O,P,Q,N)):(j=(y*C-B*z)/D,k=(A*z-x*C)/D,E=(j-n)*(j-n)+(k-o)+(k-o),E>19600?(v=r-t,w=s-u,F=Math.sqrt(v*v+w*w),v/=F,w/=F,v*=L,w*=L,G.push(n-v,o-w),G.push(O,P,Q,N),G.push(n+v,o+w),G.push(O,P,Q,N),G.push(n-v,o-w),G.push(O,P,Q,N),J++):(G.push(j,k),G.push(O,P,Q,N),G.push(n-(j-n),o-(k-o)),G.push(O,P,Q,N)));for(l=e[2*(I-2)],m=e[2*(I-2)+1],n=e[2*(I-1)],o=e[2*(I-1)+1],r=-(m-o),s=l-n,F=Math.sqrt(r*r+s*s),r/=F,s/=F,r*=L,s*=L,G.push(n-r,o-s),G.push(O,P,Q,N),G.push(n+r,o+s),G.push(O,P,Q,N),H.push(K),d=0;J>d;d++)H.push(K++);H.push(K-1)}},b.WebGLGraphics.buildComplexPoly=function(a,c){var d=a.points.slice();if(!(d.length<6)){var e=c.indices;c.points=d,c.alpha=a.fillAlpha,c.color=b.hex2rgb(a.fillColor);for(var f,g,h=1/0,i=-1/0,j=1/0,k=-1/0,l=0;lf?f:h,i=f>i?f:i,j=j>g?g:j,k=g>k?g:k;d.push(h,j,i,j,i,k,h,k);var m=d.length/2;for(l=0;m>l;l++)e.push(l)}},b.WebGLGraphics.buildPoly=function(a,c){var d=a.points;if(!(d.length<6)){var e=c.points,f=c.indices,g=d.length/2,h=b.hex2rgb(a.fillColor),i=a.fillAlpha,j=h[0]*i,k=h[1]*i,l=h[2]*i,m=b.PolyK.Triangulate(d),n=e.length/6,o=0;for(o=0;oo;o++)e.push(d[2*o],d[2*o+1],j,k,l,i)}},b.WebGLGraphics.graphicsDataPool=[],b.WebGLGraphicsData=function(a){this.gl=a,this.color=[0,0,0],this.points=[],this.indices=[],this.lastIndex=0,this.buffer=a.createBuffer(),this.indexBuffer=a.createBuffer(),this.mode=1,this.alpha=1,this.dirty=!0},b.WebGLGraphicsData.prototype.reset=function(){this.points=[],this.indices=[],this.lastIndex=0},b.WebGLGraphicsData.prototype.upload=function(){var a=this.gl;this.glPoints=new Float32Array(this.points),a.bindBuffer(a.ARRAY_BUFFER,this.buffer),a.bufferData(a.ARRAY_BUFFER,this.glPoints,a.STATIC_DRAW),this.glIndicies=new Uint16Array(this.indices),a.bindBuffer(a.ELEMENT_ARRAY_BUFFER,this.indexBuffer),a.bufferData(a.ELEMENT_ARRAY_BUFFER,this.glIndicies,a.STATIC_DRAW),this.dirty=!1},b.glContexts=[],b.WebGLRenderer=function(a,c,d,e,f,g){b.defaultRenderer||(b.sayHello("webGL"),b.defaultRenderer=this),this.type=b.WEBGL_RENDERER,this.transparent=!!e,this.preserveDrawingBuffer=g,this.width=a||800,this.height=c||600,this.view=d||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height,this.contextLost=this.handleContextLost.bind(this),this.contextRestoredLost=this.handleContextRestored.bind(this),this.view.addEventListener("webglcontextlost",this.contextLost,!1),this.view.addEventListener("webglcontextrestored",this.contextRestoredLost,!1),this.options={alpha:this.transparent,antialias:!!f,premultipliedAlpha:!!e,stencil:!0,preserveDrawingBuffer:g};var h=null;if(["experimental-webgl","webgl"].forEach(function(a){try{h=h||this.view.getContext(a,this.options)}catch(b){}},this),!h)throw new Error("This browser does not support webGL. Try using the canvas renderer"+this);this.gl=h,this.glContextId=h.id=b.WebGLRenderer.glContextId++,b.glContexts[this.glContextId]=h,b.blendModesWebGL||(b.blendModesWebGL=[],b.blendModesWebGL[b.blendModes.NORMAL]=[h.ONE,h.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.ADD]=[h.SRC_ALPHA,h.DST_ALPHA],b.blendModesWebGL[b.blendModes.MULTIPLY]=[h.DST_COLOR,h.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.SCREEN]=[h.SRC_ALPHA,h.ONE],b.blendModesWebGL[b.blendModes.OVERLAY]=[h.ONE,h.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.DARKEN]=[h.ONE,h.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.LIGHTEN]=[h.ONE,h.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.COLOR_DODGE]=[h.ONE,h.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.COLOR_BURN]=[h.ONE,h.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.HARD_LIGHT]=[h.ONE,h.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.SOFT_LIGHT]=[h.ONE,h.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.DIFFERENCE]=[h.ONE,h.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.EXCLUSION]=[h.ONE,h.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.HUE]=[h.ONE,h.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.SATURATION]=[h.ONE,h.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.COLOR]=[h.ONE,h.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.LUMINOSITY]=[h.ONE,h.ONE_MINUS_SRC_ALPHA]),this.projection=new b.Point,this.projection.x=this.width/2,this.projection.y=-this.height/2,this.offset=new b.Point(0,0),this.resize(this.width,this.height),this.contextLost=!1,this.shaderManager=new b.WebGLShaderManager(h),this.spriteBatch=new b.WebGLSpriteBatch(h),this.maskManager=new b.WebGLMaskManager(h),this.filterManager=new b.WebGLFilterManager(h,this.transparent),this.stencilManager=new b.WebGLStencilManager(h),this.blendModeManager=new b.WebGLBlendModeManager(h),this.renderSession={},this.renderSession.gl=this.gl,this.renderSession.drawCount=0,this.renderSession.shaderManager=this.shaderManager,this.renderSession.maskManager=this.maskManager,this.renderSession.filterManager=this.filterManager,this.renderSession.blendModeManager=this.blendModeManager,this.renderSession.spriteBatch=this.spriteBatch,this.renderSession.stencilManager=this.stencilManager,this.renderSession.renderer=this,h.useProgram(this.shaderManager.defaultShader.program),h.disable(h.DEPTH_TEST),h.disable(h.CULL_FACE),h.enable(h.BLEND),h.colorMask(!0,!0,!0,!0)},b.WebGLRenderer.prototype.constructor=b.WebGLRenderer,b.WebGLRenderer.prototype.render=function(a){if(!this.contextLost){this.__stage!==a&&(a.interactive&&a.interactionManager.removeEvents(),this.__stage=a),b.WebGLRenderer.updateTextures(),a.updateTransform(),a._interactive&&(a._interactiveEventsAdded||(a._interactiveEventsAdded=!0,a.interactionManager.setTarget(this)));var c=this.gl;c.viewport(0,0,this.width,this.height),c.bindFramebuffer(c.FRAMEBUFFER,null),this.transparent?c.clearColor(0,0,0,0):c.clearColor(a.backgroundColorSplit[0],a.backgroundColorSplit[1],a.backgroundColorSplit[2],1),c.clear(c.COLOR_BUFFER_BIT),this.renderDisplayObject(a,this.projection),a.interactive?a._interactiveEventsAdded||(a._interactiveEventsAdded=!0,a.interactionManager.setTarget(this)):a._interactiveEventsAdded&&(a._interactiveEventsAdded=!1,a.interactionManager.setTarget(this))}},b.WebGLRenderer.prototype.renderDisplayObject=function(a,c,d){this.renderSession.blendModeManager.setBlendMode(b.blendModes.NORMAL),this.renderSession.drawCount=0,this.renderSession.currentBlendMode=9999,this.renderSession.projection=c,this.renderSession.offset=this.offset,this.spriteBatch.begin(this.renderSession),this.filterManager.begin(this.renderSession,d),a._renderWebGL(this.renderSession),this.spriteBatch.end()},b.WebGLRenderer.updateTextures=function(){var a=0;for(a=0;a=0;c--){var d=a._glTextures[c],e=b.glContexts[c]; -e&&d&&e.deleteTexture(d)}a._glTextures.length=0},b.WebGLRenderer.updateTextureFrame=function(a){a._updateWebGLuvs()},b.WebGLRenderer.prototype.resize=function(a,b){this.width=a,this.height=b,this.view.width=a,this.view.height=b,this.gl.viewport(0,0,this.width,this.height),this.projection.x=this.width/2,this.projection.y=-this.height/2},b.createWebGLTexture=function(a,c){return a.hasLoaded&&(a._glTextures[c.id]=c.createTexture(),c.bindTexture(c.TEXTURE_2D,a._glTextures[c.id]),c.pixelStorei(c.UNPACK_PREMULTIPLY_ALPHA_WEBGL,a.premultipliedAlpha),c.texImage2D(c.TEXTURE_2D,0,c.RGBA,c.RGBA,c.UNSIGNED_BYTE,a.source),c.texParameteri(c.TEXTURE_2D,c.TEXTURE_MAG_FILTER,a.scaleMode===b.scaleModes.LINEAR?c.LINEAR:c.NEAREST),c.texParameteri(c.TEXTURE_2D,c.TEXTURE_MIN_FILTER,a.scaleMode===b.scaleModes.LINEAR?c.LINEAR:c.NEAREST),a._powerOf2?(c.texParameteri(c.TEXTURE_2D,c.TEXTURE_WRAP_S,c.REPEAT),c.texParameteri(c.TEXTURE_2D,c.TEXTURE_WRAP_T,c.REPEAT)):(c.texParameteri(c.TEXTURE_2D,c.TEXTURE_WRAP_S,c.CLAMP_TO_EDGE),c.texParameteri(c.TEXTURE_2D,c.TEXTURE_WRAP_T,c.CLAMP_TO_EDGE)),c.bindTexture(c.TEXTURE_2D,null),a._dirty[c.id]=!1),a._glTextures[c.id]},b.updateWebGLTexture=function(a,c){a._glTextures[c.id]&&(c.bindTexture(c.TEXTURE_2D,a._glTextures[c.id]),c.pixelStorei(c.UNPACK_PREMULTIPLY_ALPHA_WEBGL,a.premultipliedAlpha),c.texImage2D(c.TEXTURE_2D,0,c.RGBA,c.RGBA,c.UNSIGNED_BYTE,a.source),c.texParameteri(c.TEXTURE_2D,c.TEXTURE_MAG_FILTER,a.scaleMode===b.scaleModes.LINEAR?c.LINEAR:c.NEAREST),c.texParameteri(c.TEXTURE_2D,c.TEXTURE_MIN_FILTER,a.scaleMode===b.scaleModes.LINEAR?c.LINEAR:c.NEAREST),a._powerOf2?(c.texParameteri(c.TEXTURE_2D,c.TEXTURE_WRAP_S,c.REPEAT),c.texParameteri(c.TEXTURE_2D,c.TEXTURE_WRAP_T,c.REPEAT)):(c.texParameteri(c.TEXTURE_2D,c.TEXTURE_WRAP_S,c.CLAMP_TO_EDGE),c.texParameteri(c.TEXTURE_2D,c.TEXTURE_WRAP_T,c.CLAMP_TO_EDGE)),a._dirty[c.id]=!1)},b.WebGLRenderer.prototype.handleContextLost=function(a){a.preventDefault(),this.contextLost=!0},b.WebGLRenderer.prototype.handleContextRestored=function(){try{this.gl=this.view.getContext("experimental-webgl",this.options)}catch(a){try{this.gl=this.view.getContext("webgl",this.options)}catch(c){throw new Error(" This browser does not support webGL. Try using the canvas renderer"+this)}}var d=this.gl;d.id=b.WebGLRenderer.glContextId++,this.shaderManager.setContext(d),this.spriteBatch.setContext(d),this.primitiveBatch.setContext(d),this.maskManager.setContext(d),this.filterManager.setContext(d),this.renderSession.gl=this.gl,d.disable(d.DEPTH_TEST),d.disable(d.CULL_FACE),d.enable(d.BLEND),d.colorMask(!0,!0,!0,!0),this.gl.viewport(0,0,this.width,this.height);for(var e in b.TextureCache){var f=b.TextureCache[e].baseTexture;f._glTextures=[]}this.contextLost=!1},b.WebGLRenderer.prototype.destroy=function(){this.view.removeEventListener("webglcontextlost",this.contextLost),this.view.removeEventListener("webglcontextrestored",this.contextRestoredLost),b.glContexts[this.glContextId]=null,this.projection=null,this.offset=null,this.shaderManager.destroy(),this.spriteBatch.destroy(),this.primitiveBatch.destroy(),this.maskManager.destroy(),this.filterManager.destroy(),this.shaderManager=null,this.spriteBatch=null,this.maskManager=null,this.filterManager=null,this.gl=null,this.renderSession=null},b.WebGLRenderer.glContextId=0,b.WebGLBlendModeManager=function(a){this.gl=a,this.currentBlendMode=99999},b.WebGLBlendModeManager.prototype.setBlendMode=function(a){if(this.currentBlendMode===a)return!1;this.currentBlendMode=a;var c=b.blendModesWebGL[this.currentBlendMode];return this.gl.blendFunc(c[0],c[1]),!0},b.WebGLBlendModeManager.prototype.destroy=function(){this.gl=null},b.WebGLMaskManager=function(a){this.maskStack=[],this.maskPosition=0,this.setContext(a),this.reverse=!1,this.count=0},b.WebGLMaskManager.prototype.setContext=function(a){this.gl=a},b.WebGLMaskManager.prototype.pushMask=function(a,c){var d=c.gl;a.dirty&&b.WebGLGraphics.updateGraphics(a,d),a._webGL[d.id].data.length&&c.stencilManager.pushStencil(a,a._webGL[d.id].data[0],c)},b.WebGLMaskManager.prototype.popMask=function(a,b){var c=this.gl;b.stencilManager.popStencil(a,a._webGL[c.id].data[0],b)},b.WebGLMaskManager.prototype.destroy=function(){this.maskStack=null,this.gl=null},b.WebGLStencilManager=function(a){this.stencilStack=[],this.setContext(a),this.reverse=!0,this.count=0},b.WebGLStencilManager.prototype.setContext=function(a){this.gl=a},b.WebGLStencilManager.prototype.pushStencil=function(a,b,c){var d=this.gl;this.bindGraphics(a,b,c),0===this.stencilStack.length&&(d.enable(d.STENCIL_TEST),d.clear(d.STENCIL_BUFFER_BIT),this.reverse=!0,this.count=0),this.stencilStack.push(b);var e=this.count;d.colorMask(!1,!1,!1,!1),d.stencilFunc(d.ALWAYS,0,255),d.stencilOp(d.KEEP,d.KEEP,d.INVERT),1===b.mode?(d.drawElements(d.TRIANGLE_FAN,b.indices.length-4,d.UNSIGNED_SHORT,0),this.reverse?(d.stencilFunc(d.EQUAL,255-e,255),d.stencilOp(d.KEEP,d.KEEP,d.DECR)):(d.stencilFunc(d.EQUAL,e,255),d.stencilOp(d.KEEP,d.KEEP,d.INCR)),d.drawElements(d.TRIANGLE_FAN,4,d.UNSIGNED_SHORT,2*(b.indices.length-4)),this.reverse?d.stencilFunc(d.EQUAL,255-(e+1),255):d.stencilFunc(d.EQUAL,e+1,255),this.reverse=!this.reverse):(this.reverse?(d.stencilFunc(d.EQUAL,e,255),d.stencilOp(d.KEEP,d.KEEP,d.INCR)):(d.stencilFunc(d.EQUAL,255-e,255),d.stencilOp(d.KEEP,d.KEEP,d.DECR)),d.drawElements(d.TRIANGLE_STRIP,b.indices.length,d.UNSIGNED_SHORT,0),this.reverse?d.stencilFunc(d.EQUAL,e+1,255):d.stencilFunc(d.EQUAL,255-(e+1),255)),d.colorMask(!0,!0,!0,!0),d.stencilOp(d.KEEP,d.KEEP,d.KEEP),this.count++},b.WebGLStencilManager.prototype.bindGraphics=function(a,c,d){this._currentGraphics=a;var e,f=this.gl,g=d.projection,h=d.offset;1===c.mode?(e=d.shaderManager.complexPrimativeShader,d.shaderManager.setShader(e),f.uniformMatrix3fv(e.translationMatrix,!1,a.worldTransform.toArray(!0)),f.uniform2f(e.projectionVector,g.x,-g.y),f.uniform2f(e.offsetVector,-h.x,-h.y),f.uniform3fv(e.tintColor,b.hex2rgb(a.tint)),f.uniform3fv(e.color,c.color),f.uniform1f(e.alpha,a.worldAlpha*c.alpha),f.bindBuffer(f.ARRAY_BUFFER,c.buffer),f.vertexAttribPointer(e.aVertexPosition,2,f.FLOAT,!1,8,0),f.bindBuffer(f.ELEMENT_ARRAY_BUFFER,c.indexBuffer)):(e=d.shaderManager.primitiveShader,d.shaderManager.setShader(e),f.uniformMatrix3fv(e.translationMatrix,!1,a.worldTransform.toArray(!0)),f.uniform2f(e.projectionVector,g.x,-g.y),f.uniform2f(e.offsetVector,-h.x,-h.y),f.uniform3fv(e.tintColor,b.hex2rgb(a.tint)),f.uniform1f(e.alpha,a.worldAlpha),f.bindBuffer(f.ARRAY_BUFFER,c.buffer),f.vertexAttribPointer(e.aVertexPosition,2,f.FLOAT,!1,24,0),f.vertexAttribPointer(e.colorAttribute,4,f.FLOAT,!1,24,8),f.bindBuffer(f.ELEMENT_ARRAY_BUFFER,c.indexBuffer))},b.WebGLStencilManager.prototype.popStencil=function(a,b,c){var d=this.gl;if(this.stencilStack.pop(),this.count--,0===this.stencilStack.length)d.disable(d.STENCIL_TEST);else{var e=this.count;this.bindGraphics(a,b,c),d.colorMask(!1,!1,!1,!1),1===b.mode?(this.reverse=!this.reverse,this.reverse?(d.stencilFunc(d.EQUAL,255-(e+1),255),d.stencilOp(d.KEEP,d.KEEP,d.INCR)):(d.stencilFunc(d.EQUAL,e+1,255),d.stencilOp(d.KEEP,d.KEEP,d.DECR)),d.drawElements(d.TRIANGLE_FAN,4,d.UNSIGNED_SHORT,2*(b.indices.length-4)),d.stencilFunc(d.ALWAYS,0,255),d.stencilOp(d.KEEP,d.KEEP,d.INVERT),d.drawElements(d.TRIANGLE_FAN,b.indices.length-4,d.UNSIGNED_SHORT,0),this.reverse?d.stencilFunc(d.EQUAL,e,255):d.stencilFunc(d.EQUAL,255-e,255)):(this.reverse?(d.stencilFunc(d.EQUAL,e+1,255),d.stencilOp(d.KEEP,d.KEEP,d.DECR)):(d.stencilFunc(d.EQUAL,255-(e+1),255),d.stencilOp(d.KEEP,d.KEEP,d.INCR)),d.drawElements(d.TRIANGLE_STRIP,b.indices.length,d.UNSIGNED_SHORT,0),this.reverse?d.stencilFunc(d.EQUAL,e,255):d.stencilFunc(d.EQUAL,255-e,255)),d.colorMask(!0,!0,!0,!0),d.stencilOp(d.KEEP,d.KEEP,d.KEEP)}},b.WebGLStencilManager.prototype.destroy=function(){this.maskStack=null,this.gl=null},b.WebGLShaderManager=function(a){this.maxAttibs=10,this.attribState=[],this.tempAttribState=[],this.shaderMap=[];for(var b=0;bd;d+=6,e+=4)this.indices[d+0]=e+0,this.indices[d+1]=e+1,this.indices[d+2]=e+2,this.indices[d+3]=e+0,this.indices[d+4]=e+2,this.indices[d+5]=e+3;this.drawing=!1,this.currentBatchSize=0,this.currentBaseTexture=null,this.setContext(a),this.dirty=!0,this.textures=[],this.blendModes=[]},b.WebGLSpriteBatch.prototype.setContext=function(a){this.gl=a,this.vertexBuffer=a.createBuffer(),this.indexBuffer=a.createBuffer(),a.bindBuffer(a.ELEMENT_ARRAY_BUFFER,this.indexBuffer),a.bufferData(a.ELEMENT_ARRAY_BUFFER,this.indices,a.STATIC_DRAW),a.bindBuffer(a.ARRAY_BUFFER,this.vertexBuffer),a.bufferData(a.ARRAY_BUFFER,this.vertices,a.DYNAMIC_DRAW),this.currentBlendMode=99999},b.WebGLSpriteBatch.prototype.begin=function(a){this.renderSession=a,this.shader=this.renderSession.shaderManager.defaultShader,this.start()},b.WebGLSpriteBatch.prototype.end=function(){this.flush()},b.WebGLSpriteBatch.prototype.render=function(a){var b=a.texture;this.currentBatchSize>=this.size&&(this.flush(),this.currentBaseTexture=b.baseTexture);var c=b._uvs;if(c){var d,e,f,g,h=a.worldAlpha,i=a.tint,j=this.vertices,k=a.anchor.x,l=a.anchor.y;if(b.trim){var m=b.trim;e=m.x-k*m.width,d=e+b.crop.width,g=m.y-l*m.height,f=g+b.crop.height}else d=b.frame.width*(1-k),e=b.frame.width*-k,f=b.frame.height*(1-l),g=b.frame.height*-l;var n=4*this.currentBatchSize*this.vertSize,o=a.worldTransform,p=o.a,q=o.c,r=o.b,s=o.d,t=o.tx,u=o.ty;j[n++]=p*e+r*g+t,j[n++]=s*g+q*e+u,j[n++]=c.x0,j[n++]=c.y0,j[n++]=h,j[n++]=i,j[n++]=p*d+r*g+t,j[n++]=s*g+q*d+u,j[n++]=c.x1,j[n++]=c.y1,j[n++]=h,j[n++]=i,j[n++]=p*d+r*f+t,j[n++]=s*f+q*d+u,j[n++]=c.x2,j[n++]=c.y2,j[n++]=h,j[n++]=i,j[n++]=p*e+r*f+t,j[n++]=s*f+q*e+u,j[n++]=c.x3,j[n++]=c.y3,j[n++]=h,j[n++]=i,this.textures[this.currentBatchSize]=a.texture.baseTexture,this.blendModes[this.currentBatchSize]=a.blendMode,this.currentBatchSize++}},b.WebGLSpriteBatch.prototype.renderTilingSprite=function(a){var c=a.tilingTexture;this.currentBatchSize>=this.size&&(this.flush(),this.currentBaseTexture=c.baseTexture),a._uvs||(a._uvs=new b.TextureUvs);var d=a._uvs;a.tilePosition.x%=c.baseTexture.width*a.tileScaleOffset.x,a.tilePosition.y%=c.baseTexture.height*a.tileScaleOffset.y;var e=a.tilePosition.x/(c.baseTexture.width*a.tileScaleOffset.x),f=a.tilePosition.y/(c.baseTexture.height*a.tileScaleOffset.y),g=a.width/c.baseTexture.width/(a.tileScale.x*a.tileScaleOffset.x),h=a.height/c.baseTexture.height/(a.tileScale.y*a.tileScaleOffset.y);d.x0=0-e,d.y0=0-f,d.x1=1*g-e,d.y1=0-f,d.x2=1*g-e,d.y2=1*h-f,d.x3=0-e,d.y3=1*h-f;var i=a.worldAlpha,j=a.tint,k=this.vertices,l=a.width,m=a.height,n=a.anchor.x,o=a.anchor.y,p=l*(1-n),q=l*-n,r=m*(1-o),s=m*-o,t=4*this.currentBatchSize*this.vertSize,u=a.worldTransform,v=u.a,w=u.c,x=u.b,y=u.d,z=u.tx,A=u.ty;k[t++]=v*q+x*s+z,k[t++]=y*s+w*q+A,k[t++]=d.x0,k[t++]=d.y0,k[t++]=i,k[t++]=j,k[t++]=v*p+x*s+z,k[t++]=y*s+w*p+A,k[t++]=d.x1,k[t++]=d.y1,k[t++]=i,k[t++]=j,k[t++]=v*p+x*r+z,k[t++]=y*r+w*p+A,k[t++]=d.x2,k[t++]=d.y2,k[t++]=i,k[t++]=j,k[t++]=v*q+x*r+z,k[t++]=y*r+w*q+A,k[t++]=d.x3,k[t++]=d.y3,k[t++]=i,k[t++]=j,this.textures[this.currentBatchSize]=c.baseTexture,this.blendModes[this.currentBatchSize]=a.blendMode,this.currentBatchSize++},b.WebGLSpriteBatch.prototype.flush=function(){if(0!==this.currentBatchSize){var a=this.gl;if(this.renderSession.shaderManager.setShader(this.renderSession.shaderManager.defaultShader),this.dirty){this.dirty=!1,a.activeTexture(a.TEXTURE0),a.bindBuffer(a.ARRAY_BUFFER,this.vertexBuffer),a.bindBuffer(a.ELEMENT_ARRAY_BUFFER,this.indexBuffer);var b=this.renderSession.projection;a.uniform2f(this.shader.projectionVector,b.x,b.y);var c=4*this.vertSize;a.vertexAttribPointer(this.shader.aVertexPosition,2,a.FLOAT,!1,c,0),a.vertexAttribPointer(this.shader.aTextureCoord,2,a.FLOAT,!1,c,8),a.vertexAttribPointer(this.shader.colorAttribute,2,a.FLOAT,!1,c,16)}if(this.currentBatchSize>.5*this.size)a.bufferSubData(a.ARRAY_BUFFER,0,this.vertices);else{var d=this.vertices.subarray(0,4*this.currentBatchSize*this.vertSize);a.bufferSubData(a.ARRAY_BUFFER,0,d)}for(var e,f,g=0,h=0,i=null,j=this.renderSession.blendModeManager.currentBlendMode,k=0,l=this.currentBatchSize;l>k;k++)e=this.textures[k],f=this.blendModes[k],(i!==e||j!==f)&&(this.renderBatch(i,g,h),h=k,g=0,i=e,j=f,this.renderSession.blendModeManager.setBlendMode(j)),g++;this.renderBatch(i,g,h),this.currentBatchSize=0}},b.WebGLSpriteBatch.prototype.renderBatch=function(a,c,d){if(0!==c){var e=this.gl;e.bindTexture(e.TEXTURE_2D,a._glTextures[e.id]||b.createWebGLTexture(a,e)),a._dirty[e.id]&&b.updateWebGLTexture(this.currentBaseTexture,e),e.drawElements(e.TRIANGLES,6*c,e.UNSIGNED_SHORT,6*d*2),this.renderSession.drawCount++}},b.WebGLSpriteBatch.prototype.stop=function(){this.flush()},b.WebGLSpriteBatch.prototype.start=function(){this.dirty=!0},b.WebGLSpriteBatch.prototype.destroy=function(){this.vertices=null,this.indices=null,this.gl.deleteBuffer(this.vertexBuffer),this.gl.deleteBuffer(this.indexBuffer),this.currentBaseTexture=null,this.gl=null},b.WebGLFastSpriteBatch=function(a){this.vertSize=10,this.maxSize=6e3,this.size=this.maxSize;var b=4*this.size*this.vertSize,c=6*this.maxSize;this.vertices=new Float32Array(b),this.indices=new Uint16Array(c),this.vertexBuffer=null,this.indexBuffer=null,this.lastIndexCount=0;for(var d=0,e=0;c>d;d+=6,e+=4)this.indices[d+0]=e+0,this.indices[d+1]=e+1,this.indices[d+2]=e+2,this.indices[d+3]=e+0,this.indices[d+4]=e+2,this.indices[d+5]=e+3;this.drawing=!1,this.currentBatchSize=0,this.currentBaseTexture=null,this.currentBlendMode=0,this.renderSession=null,this.shader=null,this.matrix=null,this.setContext(a)},b.WebGLFastSpriteBatch.prototype.setContext=function(a){this.gl=a,this.vertexBuffer=a.createBuffer(),this.indexBuffer=a.createBuffer(),a.bindBuffer(a.ELEMENT_ARRAY_BUFFER,this.indexBuffer),a.bufferData(a.ELEMENT_ARRAY_BUFFER,this.indices,a.STATIC_DRAW),a.bindBuffer(a.ARRAY_BUFFER,this.vertexBuffer),a.bufferData(a.ARRAY_BUFFER,this.vertices,a.DYNAMIC_DRAW)},b.WebGLFastSpriteBatch.prototype.begin=function(a,b){this.renderSession=b,this.shader=this.renderSession.shaderManager.fastShader,this.matrix=a.worldTransform.toArray(!0),this.start()},b.WebGLFastSpriteBatch.prototype.end=function(){this.flush()},b.WebGLFastSpriteBatch.prototype.render=function(a){var b=a.children,c=b[0];if(c.texture._uvs){this.currentBaseTexture=c.texture.baseTexture,c.blendMode!==this.renderSession.blendModeManager.currentBlendMode&&(this.flush(),this.renderSession.blendModeManager.setBlendMode(c.blendMode));for(var d=0,e=b.length;e>d;d++)this.renderSprite(b[d]);this.flush()}},b.WebGLFastSpriteBatch.prototype.renderSprite=function(a){if(a.visible&&(a.texture.baseTexture===this.currentBaseTexture||(this.flush(),this.currentBaseTexture=a.texture.baseTexture,a.texture._uvs))){var b,c,d,e,f,g,h,i,j=this.vertices;if(b=a.texture._uvs,c=a.texture.frame.width,d=a.texture.frame.height,a.texture.trim){var k=a.texture.trim;f=k.x-a.anchor.x*k.width,e=f+a.texture.crop.width,h=k.y-a.anchor.y*k.height,g=h+a.texture.crop.height}else e=a.texture.frame.width*(1-a.anchor.x),f=a.texture.frame.width*-a.anchor.x,g=a.texture.frame.height*(1-a.anchor.y),h=a.texture.frame.height*-a.anchor.y;i=4*this.currentBatchSize*this.vertSize,j[i++]=f,j[i++]=h,j[i++]=a.position.x,j[i++]=a.position.y,j[i++]=a.scale.x,j[i++]=a.scale.y,j[i++]=a.rotation,j[i++]=b.x0,j[i++]=b.y1,j[i++]=a.alpha,j[i++]=e,j[i++]=h,j[i++]=a.position.x,j[i++]=a.position.y,j[i++]=a.scale.x,j[i++]=a.scale.y,j[i++]=a.rotation,j[i++]=b.x1,j[i++]=b.y1,j[i++]=a.alpha,j[i++]=e,j[i++]=g,j[i++]=a.position.x,j[i++]=a.position.y,j[i++]=a.scale.x,j[i++]=a.scale.y,j[i++]=a.rotation,j[i++]=b.x2,j[i++]=b.y2,j[i++]=a.alpha,j[i++]=f,j[i++]=g,j[i++]=a.position.x,j[i++]=a.position.y,j[i++]=a.scale.x,j[i++]=a.scale.y,j[i++]=a.rotation,j[i++]=b.x3,j[i++]=b.y3,j[i++]=a.alpha,this.currentBatchSize++,this.currentBatchSize>=this.size&&this.flush()}},b.WebGLFastSpriteBatch.prototype.flush=function(){if(0!==this.currentBatchSize){var a=this.gl;if(this.currentBaseTexture._glTextures[a.id]||b.createWebGLTexture(this.currentBaseTexture,a),a.bindTexture(a.TEXTURE_2D,this.currentBaseTexture._glTextures[a.id]),this.currentBatchSize>.5*this.size)a.bufferSubData(a.ARRAY_BUFFER,0,this.vertices);else{var c=this.vertices.subarray(0,4*this.currentBatchSize*this.vertSize);a.bufferSubData(a.ARRAY_BUFFER,0,c)}a.drawElements(a.TRIANGLES,6*this.currentBatchSize,a.UNSIGNED_SHORT,0),this.currentBatchSize=0,this.renderSession.drawCount++}},b.WebGLFastSpriteBatch.prototype.stop=function(){this.flush()},b.WebGLFastSpriteBatch.prototype.start=function(){var a=this.gl;a.activeTexture(a.TEXTURE0),a.bindBuffer(a.ARRAY_BUFFER,this.vertexBuffer),a.bindBuffer(a.ELEMENT_ARRAY_BUFFER,this.indexBuffer);var b=this.renderSession.projection;a.uniform2f(this.shader.projectionVector,b.x,b.y),a.uniformMatrix3fv(this.shader.uMatrix,!1,this.matrix);var c=4*this.vertSize;a.vertexAttribPointer(this.shader.aVertexPosition,2,a.FLOAT,!1,c,0),a.vertexAttribPointer(this.shader.aPositionCoord,2,a.FLOAT,!1,c,8),a.vertexAttribPointer(this.shader.aScale,2,a.FLOAT,!1,c,16),a.vertexAttribPointer(this.shader.aRotation,1,a.FLOAT,!1,c,24),a.vertexAttribPointer(this.shader.aTextureCoord,2,a.FLOAT,!1,c,28),a.vertexAttribPointer(this.shader.colorAttribute,1,a.FLOAT,!1,c,36)},b.WebGLFilterManager=function(a,b){this.transparent=b,this.filterStack=[],this.offsetX=0,this.offsetY=0,this.setContext(a)},b.WebGLFilterManager.prototype.setContext=function(a){this.gl=a,this.texturePool=[],this.initShaderBuffers()},b.WebGLFilterManager.prototype.begin=function(a,b){this.renderSession=a,this.defaultShader=a.shaderManager.defaultShader;var c=this.renderSession.projection;this.width=2*c.x,this.height=2*-c.y,this.buffer=b},b.WebGLFilterManager.prototype.pushFilter=function(a){var c=this.gl,d=this.renderSession.projection,e=this.renderSession.offset;a._filterArea=a.target.filterArea||a.target.getBounds(),this.filterStack.push(a);var f=a.filterPasses[0];this.offsetX+=a._filterArea.x,this.offsetY+=a._filterArea.y;var g=this.texturePool.pop();g?g.resize(this.width,this.height):g=new b.FilterTexture(this.gl,this.width,this.height),c.bindTexture(c.TEXTURE_2D,g.texture);var h=a._filterArea,i=f.padding;h.x-=i,h.y-=i,h.width+=2*i,h.height+=2*i,h.x<0&&(h.x=0),h.width>this.width&&(h.width=this.width),h.y<0&&(h.y=0),h.height>this.height&&(h.height=this.height),c.bindFramebuffer(c.FRAMEBUFFER,g.frameBuffer),c.viewport(0,0,h.width,h.height),d.x=h.width/2,d.y=-h.height/2,e.x=-h.x,e.y=-h.y,this.renderSession.shaderManager.setShader(this.defaultShader),c.uniform2f(this.defaultShader.projectionVector,h.width/2,-h.height/2),c.uniform2f(this.defaultShader.offsetVector,-h.x,-h.y),c.colorMask(!0,!0,!0,!0),c.clearColor(0,0,0,0),c.clear(c.COLOR_BUFFER_BIT),a._glFilterTexture=g},b.WebGLFilterManager.prototype.popFilter=function(){var a=this.gl,c=this.filterStack.pop(),d=c._filterArea,e=c._glFilterTexture,f=this.renderSession.projection,g=this.renderSession.offset;if(c.filterPasses.length>1){a.viewport(0,0,d.width,d.height),a.bindBuffer(a.ARRAY_BUFFER,this.vertexBuffer),this.vertexArray[0]=0,this.vertexArray[1]=d.height,this.vertexArray[2]=d.width,this.vertexArray[3]=d.height,this.vertexArray[4]=0,this.vertexArray[5]=0,this.vertexArray[6]=d.width,this.vertexArray[7]=0,a.bufferSubData(a.ARRAY_BUFFER,0,this.vertexArray),a.bindBuffer(a.ARRAY_BUFFER,this.uvBuffer),this.uvArray[2]=d.width/this.width,this.uvArray[5]=d.height/this.height,this.uvArray[6]=d.width/this.width,this.uvArray[7]=d.height/this.height,a.bufferSubData(a.ARRAY_BUFFER,0,this.uvArray);var h=e,i=this.texturePool.pop();i||(i=new b.FilterTexture(this.gl,this.width,this.height)),i.resize(this.width,this.height),a.bindFramebuffer(a.FRAMEBUFFER,i.frameBuffer),a.clear(a.COLOR_BUFFER_BIT),a.disable(a.BLEND);for(var j=0;j0&&(b.Texture.frameUpdates.length=0) -},b.CanvasRenderer.prototype.resize=function(a,b){this.width=a,this.height=b,this.view.width=a,this.view.height=b},b.CanvasRenderer.prototype.renderDisplayObject=function(a,b){this.renderSession.context=b||this.context,a._renderCanvas(this.renderSession)},b.CanvasRenderer.prototype.renderStripFlat=function(a){var b=this.context,c=a.verticies,d=c.length/2;this.count++,b.beginPath();for(var e=1;d-2>e;e++){var f=2*e,g=c[f],h=c[f+2],i=c[f+4],j=c[f+1],k=c[f+3],l=c[f+5];b.moveTo(g,j),b.lineTo(h,k),b.lineTo(i,l)}b.fillStyle="#FF0000",b.fill(),b.closePath()},b.CanvasRenderer.prototype.renderStrip=function(a){var b=this.context,c=a.verticies,d=a.uvs,e=c.length/2;this.count++;for(var f=1;e-2>f;f++){var g=2*f,h=c[g],i=c[g+2],j=c[g+4],k=c[g+1],l=c[g+3],m=c[g+5],n=d[g]*a.texture.width,o=d[g+2]*a.texture.width,p=d[g+4]*a.texture.width,q=d[g+1]*a.texture.height,r=d[g+3]*a.texture.height,s=d[g+5]*a.texture.height;b.save(),b.beginPath(),b.moveTo(h,k),b.lineTo(i,l),b.lineTo(j,m),b.closePath(),b.clip();var t=n*r+q*p+o*s-r*p-q*o-n*s,u=h*r+q*j+i*s-r*j-q*i-h*s,v=n*i+h*p+o*j-i*p-h*o-n*j,w=n*r*j+q*i*p+h*o*s-h*r*p-q*o*j-n*i*s,x=k*r+q*m+l*s-r*m-q*l-k*s,y=n*l+k*p+o*m-l*p-k*o-n*m,z=n*r*m+q*l*p+k*o*s-k*r*p-q*o*m-n*l*s;b.transform(u/t,x/t,v/t,y/t,w/t,z/t),b.drawImage(a.texture.baseTexture.source,0,0),b.restore()}},b.CanvasBuffer=function(a,b){this.width=a,this.height=b,this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.canvas.width=a,this.canvas.height=b},b.CanvasBuffer.prototype.clear=function(){this.context.clearRect(0,0,this.width,this.height)},b.CanvasBuffer.prototype.resize=function(a,b){this.width=this.canvas.width=a,this.height=this.canvas.height=b},b.CanvasGraphics=function(){},b.CanvasGraphics.renderGraphics=function(a,c){for(var d=a.worldAlpha,e="",f=0;fA?A:z,c.beginPath(),c.moveTo(v,w+z),c.lineTo(v,w+y-z),c.quadraticCurveTo(v,w+y,v+z,w+y),c.lineTo(v+x-z,w+y),c.quadraticCurveTo(v+x,w+y,v+x,w+y-z),c.lineTo(v+x,w+z),c.quadraticCurveTo(v+x,w,v+x-z,w),c.lineTo(v+z,w),c.quadraticCurveTo(v,w,v,w+z),c.closePath(),(g.fillColor||0===g.fillColor)&&(c.globalAlpha=g.fillAlpha*d,c.fillStyle=e="#"+("00000"+(0|g.fillColor).toString(16)).substr(-6),c.fill()),g.lineWidth&&(c.globalAlpha=g.lineAlpha*d,c.stroke())}}},b.CanvasGraphics.renderGraphicsMask=function(a,c){var d=a.graphicsData.length;if(0!==d){d>1&&(d=1,window.console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object"));for(var e=0;1>e;e++){var f=a.graphicsData[e],g=f.points;if(f.type===b.Graphics.POLY){c.beginPath(),c.moveTo(g[0],g[1]);for(var h=1;hz?z:y,c.beginPath(),c.moveTo(u,v+y),c.lineTo(u,v+x-y),c.quadraticCurveTo(u,v+x,u+y,v+x),c.lineTo(u+w-y,v+x),c.quadraticCurveTo(u+w,v+x,u+w,v+x-y),c.lineTo(u+w,v+y),c.quadraticCurveTo(u+w,v,u+w-y,v),c.lineTo(u+y,v),c.quadraticCurveTo(u,v,u,v+y),c.closePath()}}}},b.Graphics=function(){b.DisplayObjectContainer.call(this),this.renderable=!0,this.fillAlpha=1,this.lineWidth=0,this.lineColor="black",this.graphicsData=[],this.tint=16777215,this.blendMode=b.blendModes.NORMAL,this.currentPath={points:[]},this._webGL=[],this.isMask=!1,this.bounds=null,this.boundsPadding=10,this.dirty=!0},b.Graphics.prototype=Object.create(b.DisplayObjectContainer.prototype),b.Graphics.prototype.constructor=b.Graphics,Object.defineProperty(b.Graphics.prototype,"cacheAsBitmap",{get:function(){return this._cacheAsBitmap},set:function(a){this._cacheAsBitmap=a,this._cacheAsBitmap?this._generateCachedSprite():(this.destroyCachedSprite(),this.dirty=!0)}}),b.Graphics.prototype.lineStyle=function(a,c,d){return this.currentPath.points.length||this.graphicsData.pop(),this.lineWidth=a||0,this.lineColor=c||0,this.lineAlpha=arguments.length<3?1:d,this.currentPath={lineWidth:this.lineWidth,lineColor:this.lineColor,lineAlpha:this.lineAlpha,fillColor:this.fillColor,fillAlpha:this.fillAlpha,fill:this.filling,points:[],type:b.Graphics.POLY},this.graphicsData.push(this.currentPath),this},b.Graphics.prototype.moveTo=function(a,c){return this.currentPath.points.length||this.graphicsData.pop(),this.currentPath=this.currentPath={lineWidth:this.lineWidth,lineColor:this.lineColor,lineAlpha:this.lineAlpha,fillColor:this.fillColor,fillAlpha:this.fillAlpha,fill:this.filling,points:[],type:b.Graphics.POLY},this.currentPath.points.push(a,c),this.graphicsData.push(this.currentPath),this},b.Graphics.prototype.lineTo=function(a,b){return this.currentPath.points.push(a,b),this.dirty=!0,this},b.Graphics.prototype.quadraticCurveTo=function(a,b,c,d){0===this.currentPath.points.length&&this.moveTo(0,0);var e,f,g=20,h=this.currentPath.points;0===h.length&&this.moveTo(0,0);for(var i=h[h.length-2],j=h[h.length-1],k=0,l=1;g>=l;l++)k=l/g,e=i+(a-i)*k,f=j+(b-j)*k,h.push(e+(a+(c-a)*k-e)*k,f+(b+(d-b)*k-f)*k);return this.dirty=!0,this},b.Graphics.prototype.bezierCurveTo=function(a,b,c,d,e,f){0===this.currentPath.points.length&&this.moveTo(0,0);for(var g,h,i,j,k,l=20,m=this.currentPath.points,n=m[m.length-2],o=m[m.length-1],p=0,q=1;l>q;q++)p=q/l,g=1-p,h=g*g,i=h*g,j=p*p,k=j*p,m.push(i*n+3*h*p*a+3*g*j*c+k*e,i*o+3*h*p*b+3*g*j*d+k*f);return this.dirty=!0,this},b.Graphics.prototype.arcTo=function(a,b,c,d,e){0===this.currentPath.points.length&&this.moveTo(a,b);var f=this.currentPath.points,g=f[f.length-2],h=f[f.length-1],i=h-b,j=g-a,k=d-b,l=c-a,m=Math.abs(i*l-j*k);if(1e-8>m||0===e)f.push(a,b);else{var n=i*i+j*j,o=k*k+l*l,p=i*k+j*l,q=e*Math.sqrt(n)/m,r=e*Math.sqrt(o)/m,s=q*p/n,t=r*p/o,u=q*l+r*j,v=q*k+r*i,w=j*(r+s),x=i*(r+s),y=l*(q+t),z=k*(q+t),A=Math.atan2(x-v,w-u),B=Math.atan2(z-v,y-u);this.arc(u+a,v+b,e,A,B,j*k>l*i)}return this.dirty=!0,this},b.Graphics.prototype.arc=function(a,b,c,d,e,f){var g=a+Math.cos(d)*c,h=b+Math.sin(d)*c,i=this.currentPath.points;if((0!==i.length&&i[i.length-2]!==g||i[i.length-1]!==h)&&(this.moveTo(g,h),i=this.currentPath.points),d===e)return this;!f&&d>=e?e+=2*Math.PI:f&&e>=d&&(d+=2*Math.PI);var j=f?-1*(d-e):e-d,k=Math.abs(j)/(2*Math.PI)*40;if(0===j)return this;for(var l=j/(2*k),m=2*l,n=Math.cos(l),o=Math.sin(l),p=k-1,q=p%1/p,r=0;p>=r;r++){var s=r+q*r,t=l+d+m*s,u=Math.cos(t),v=-Math.sin(t);i.push((n*u+o*v)*c+a,(n*-v+o*u)*c+b)}return this.dirty=!0,this},b.Graphics.prototype.drawPath=function(a){return this.currentPath.points.length||this.graphicsData.pop(),this.currentPath=this.currentPath={lineWidth:this.lineWidth,lineColor:this.lineColor,lineAlpha:this.lineAlpha,fillColor:this.fillColor,fillAlpha:this.fillAlpha,fill:this.filling,points:[],type:b.Graphics.POLY},this.graphicsData.push(this.currentPath),this.currentPath.points=this.currentPath.points.concat(a),this.dirty=!0,this},b.Graphics.prototype.beginFill=function(a,b){return this.filling=!0,this.fillColor=a||0,this.fillAlpha=arguments.length<2?1:b,this},b.Graphics.prototype.endFill=function(){return this.filling=!1,this.fillColor=null,this.fillAlpha=1,this},b.Graphics.prototype.drawRect=function(a,c,d,e){return this.currentPath.points.length||this.graphicsData.pop(),this.currentPath={lineWidth:this.lineWidth,lineColor:this.lineColor,lineAlpha:this.lineAlpha,fillColor:this.fillColor,fillAlpha:this.fillAlpha,fill:this.filling,points:[a,c,d,e],type:b.Graphics.RECT},this.graphicsData.push(this.currentPath),this.dirty=!0,this},b.Graphics.prototype.drawRoundedRect=function(a,c,d,e,f){return this.currentPath.points.length||this.graphicsData.pop(),this.currentPath={lineWidth:this.lineWidth,lineColor:this.lineColor,lineAlpha:this.lineAlpha,fillColor:this.fillColor,fillAlpha:this.fillAlpha,fill:this.filling,points:[a,c,d,e,f],type:b.Graphics.RREC},this.graphicsData.push(this.currentPath),this.dirty=!0,this},b.Graphics.prototype.drawCircle=function(a,c,d){return this.currentPath.points.length||this.graphicsData.pop(),this.currentPath={lineWidth:this.lineWidth,lineColor:this.lineColor,lineAlpha:this.lineAlpha,fillColor:this.fillColor,fillAlpha:this.fillAlpha,fill:this.filling,points:[a,c,d,d],type:b.Graphics.CIRC},this.graphicsData.push(this.currentPath),this.dirty=!0,this},b.Graphics.prototype.drawEllipse=function(a,c,d,e){return this.currentPath.points.length||this.graphicsData.pop(),this.currentPath={lineWidth:this.lineWidth,lineColor:this.lineColor,lineAlpha:this.lineAlpha,fillColor:this.fillColor,fillAlpha:this.fillAlpha,fill:this.filling,points:[a,c,d,e],type:b.Graphics.ELIP},this.graphicsData.push(this.currentPath),this.dirty=!0,this},b.Graphics.prototype.clear=function(){return this.lineWidth=0,this.filling=!1,this.dirty=!0,this.clearDirty=!0,this.graphicsData=[],this.bounds=null,this},b.Graphics.prototype.generateTexture=function(){var a=this.getBounds(),c=new b.CanvasBuffer(a.width,a.height),d=b.Texture.fromCanvas(c.canvas);return c.context.translate(-a.x,-a.y),b.CanvasGraphics.renderGraphics(this,c.context),d},b.Graphics.prototype._renderWebGL=function(a){if(this.visible!==!1&&0!==this.alpha&&this.isMask!==!0){if(this._cacheAsBitmap)return this.dirty&&(this._generateCachedSprite(),b.updateWebGLTexture(this._cachedSprite.texture.baseTexture,a.gl),this.dirty=!1),this._cachedSprite.alpha=this.alpha,b.Sprite.prototype._renderWebGL.call(this._cachedSprite,a),void 0;if(a.spriteBatch.stop(),a.blendModeManager.setBlendMode(this.blendMode),this._mask&&a.maskManager.pushMask(this._mask,a),this._filters&&a.filterManager.pushFilter(this._filterBlock),this.blendMode!==a.spriteBatch.currentBlendMode){a.spriteBatch.currentBlendMode=this.blendMode;var c=b.blendModesWebGL[a.spriteBatch.currentBlendMode];a.spriteBatch.gl.blendFunc(c[0],c[1])}if(b.WebGLGraphics.renderGraphics(this,a),this.children.length){a.spriteBatch.start();for(var d=0,e=this.children.length;e>d;d++)this.children[d]._renderWebGL(a);a.spriteBatch.stop()}this._filters&&a.filterManager.popFilter(),this._mask&&a.maskManager.popMask(this.mask,a),a.drawCount++,a.spriteBatch.start()}},b.Graphics.prototype._renderCanvas=function(a){if(this.visible!==!1&&0!==this.alpha&&this.isMask!==!0){var c=a.context,d=this.worldTransform;this.blendMode!==a.currentBlendMode&&(a.currentBlendMode=this.blendMode,c.globalCompositeOperation=b.blendModesCanvas[a.currentBlendMode]),this._mask&&a.maskManager.pushMask(this._mask,a.context),c.setTransform(d.a,d.c,d.b,d.d,d.tx,d.ty),b.CanvasGraphics.renderGraphics(this,c);for(var e=0,f=this.children.length;f>e;e++)this.children[e]._renderCanvas(a);this._mask&&a.maskManager.popMask(a.context)}},b.Graphics.prototype.getBounds=function(a){this.bounds||this.updateBounds();var b=this.bounds.x,c=this.bounds.width+this.bounds.x,d=this.bounds.y,e=this.bounds.height+this.bounds.y,f=a||this.worldTransform,g=f.a,h=f.c,i=f.b,j=f.d,k=f.tx,l=f.ty,m=g*c+i*e+k,n=j*e+h*c+l,o=g*b+i*e+k,p=j*e+h*b+l,q=g*b+i*d+k,r=j*d+h*b+l,s=g*c+i*d+k,t=j*d+h*c+l,u=m,v=n,w=m,x=n;w=w>o?o:w,w=w>q?q:w,w=w>s?s:w,x=x>p?p:x,x=x>r?r:x,x=x>t?t:x,u=o>u?o:u,u=q>u?q:u,u=s>u?s:u,v=p>v?p:v,v=r>v?r:v,v=t>v?t:v;var y=this._bounds;return y.x=w,y.width=u-w,y.y=x,y.height=v-x,y},b.Graphics.prototype.updateBounds=function(){for(var a,c,d,e,f,g=1/0,h=-1/0,i=1/0,j=-1/0,k=0;kc?c:g,h=c+e>h?c+e:h,i=i>d?c:i,j=d+f>j?d+f:j;else if(m===b.Graphics.CIRC||m===b.Graphics.ELIP)c=a[0],d=a[1],e=a[2]+n/2,f=a[3]+n/2,g=g>c-e?c-e:g,h=c+e>h?c+e:h,i=i>d-f?d-f:i,j=d+f>j?d+f:j;else for(var o=0;oc-n?c-n:g,h=c+n>h?c+n:h,i=i>d-n?d-n:i,j=d+n>j?d+n:j}var p=this.boundsPadding;this.bounds=new b.Rectangle(g-p,i-p,h-g+2*p,j-i+2*p)},b.Graphics.prototype._generateCachedSprite=function(){var a=this.getLocalBounds();if(this._cachedSprite)this._cachedSprite.buffer.resize(a.width,a.height);else{var c=new b.CanvasBuffer(a.width,a.height),d=b.Texture.fromCanvas(c.canvas);this._cachedSprite=new b.Sprite(d),this._cachedSprite.buffer=c,this._cachedSprite.worldTransform=this.worldTransform}this._cachedSprite.anchor.x=-(a.x/a.width),this._cachedSprite.anchor.y=-(a.y/a.height),this._cachedSprite.buffer.context.translate(-a.x,-a.y),b.CanvasGraphics.renderGraphics(this,this._cachedSprite.buffer.context),this._cachedSprite.alpha=this.alpha},b.Graphics.prototype.destroyCachedSprite=function(){this._cachedSprite.texture.destroy(!0),this._cachedSprite=null},b.Graphics.POLY=0,b.Graphics.RECT=1,b.Graphics.CIRC=2,b.Graphics.ELIP=3,b.Graphics.RREC=4,b.Strip=function(a){b.DisplayObjectContainer.call(this),this.texture=a,this.uvs=new b.Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new b.Float32Array([0,0,100,0,100,100,0,100]),this.colors=new b.Float32Array([1,1,1,1]),this.indices=new b.Uint16Array([0,1,2,3]),this.dirty=!0},b.Strip.prototype=Object.create(b.DisplayObjectContainer.prototype),b.Strip.prototype.constructor=b.Strip,b.Strip.prototype._renderWebGL=function(a){!this.visible||this.alpha<=0||(a.spriteBatch.stop(),this._vertexBuffer||this._initWebGL(a),a.shaderManager.setShader(a.shaderManager.stripShader),this._renderStrip(a),a.spriteBatch.start())},b.Strip.prototype._initWebGL=function(a){var b=a.gl;this._vertexBuffer=b.createBuffer(),this._indexBuffer=b.createBuffer(),this._uvBuffer=b.createBuffer(),this._colorBuffer=b.createBuffer(),b.bindBuffer(b.ARRAY_BUFFER,this._vertexBuffer),b.bufferData(b.ARRAY_BUFFER,this.verticies,b.DYNAMIC_DRAW),b.bindBuffer(b.ARRAY_BUFFER,this._uvBuffer),b.bufferData(b.ARRAY_BUFFER,this.uvs,b.STATIC_DRAW),b.bindBuffer(b.ARRAY_BUFFER,this._colorBuffer),b.bufferData(b.ARRAY_BUFFER,this.colors,b.STATIC_DRAW),b.bindBuffer(b.ELEMENT_ARRAY_BUFFER,this._indexBuffer),b.bufferData(b.ELEMENT_ARRAY_BUFFER,this.indices,b.STATIC_DRAW)},b.Strip.prototype._renderStrip=function(a){var c=a.gl,d=a.projection,e=a.offset,f=a.shaderManager.stripShader;c.blendFunc(c.ONE,c.ONE_MINUS_SRC_ALPHA),c.uniformMatrix3fv(f.translationMatrix,!1,this.worldTransform.toArray(!0)),c.uniform2f(f.projectionVector,d.x,-d.y),c.uniform2f(f.offsetVector,-e.x,-e.y),c.uniform1f(f.alpha,1),this.dirty?(this.dirty=!1,c.bindBuffer(c.ARRAY_BUFFER,this._vertexBuffer),c.bufferData(c.ARRAY_BUFFER,this.verticies,c.STATIC_DRAW),c.vertexAttribPointer(f.aVertexPosition,2,c.FLOAT,!1,0,0),c.bindBuffer(c.ARRAY_BUFFER,this._uvBuffer),c.bufferData(c.ARRAY_BUFFER,this.uvs,c.STATIC_DRAW),c.vertexAttribPointer(f.aTextureCoord,2,c.FLOAT,!1,0,0),c.activeTexture(c.TEXTURE0),c.bindTexture(c.TEXTURE_2D,this.texture.baseTexture._glTextures[c.id]||b.createWebGLTexture(this.texture.baseTexture,c)),c.bindBuffer(c.ELEMENT_ARRAY_BUFFER,this._indexBuffer),c.bufferData(c.ELEMENT_ARRAY_BUFFER,this.indices,c.STATIC_DRAW)):(c.bindBuffer(c.ARRAY_BUFFER,this._vertexBuffer),c.bufferSubData(c.ARRAY_BUFFER,0,this.verticies),c.vertexAttribPointer(f.aVertexPosition,2,c.FLOAT,!1,0,0),c.bindBuffer(c.ARRAY_BUFFER,this._uvBuffer),c.vertexAttribPointer(f.aTextureCoord,2,c.FLOAT,!1,0,0),c.activeTexture(c.TEXTURE0),c.bindTexture(c.TEXTURE_2D,this.texture.baseTexture._glTextures[c.id]||b.createWebGLTexture(this.texture.baseTexture,c)),c.bindBuffer(c.ELEMENT_ARRAY_BUFFER,this._indexBuffer)),c.drawElements(c.TRIANGLE_STRIP,this.indices.length,c.UNSIGNED_SHORT,0)},b.Strip.prototype._renderCanvas=function(a){var b=a.context,c=this.worldTransform;a.roundPixels?b.setTransform(c.a,c.c,c.b,c.d,0|c.tx,0|c.ty):b.setTransform(c.a,c.c,c.b,c.d,c.tx,c.ty);var d=this,e=d.verticies,f=d.uvs,g=e.length/2;this.count++;for(var h=0;g-2>h;h++){var i=2*h,j=e[i],k=e[i+2],l=e[i+4],m=e[i+1],n=e[i+3],o=e[i+5],p=(j+k+l)/3,q=(m+n+o)/3,r=j-p,s=m-q,t=Math.sqrt(r*r+s*s);j=p+r/t*(t+3),m=q+s/t*(t+3),r=k-p,s=n-q,t=Math.sqrt(r*r+s*s),k=p+r/t*(t+3),n=q+s/t*(t+3),r=l-p,s=o-q,t=Math.sqrt(r*r+s*s),l=p+r/t*(t+3),o=q+s/t*(t+3);var u=f[i]*d.texture.width,v=f[i+2]*d.texture.width,w=f[i+4]*d.texture.width,x=f[i+1]*d.texture.height,y=f[i+3]*d.texture.height,z=f[i+5]*d.texture.height;b.save(),b.beginPath(),b.moveTo(j,m),b.lineTo(k,n),b.lineTo(l,o),b.closePath(),b.clip();var A=u*y+x*w+v*z-y*w-x*v-u*z,B=j*y+x*l+k*z-y*l-x*k-j*z,C=u*k+j*w+v*l-k*w-j*v-u*l,D=u*y*l+x*k*w+j*v*z-j*y*w-x*v*l-u*k*z,E=m*y+x*o+n*z-y*o-x*n-m*z,F=u*n+m*w+v*o-n*w-m*v-u*o,G=u*y*o+x*n*w+m*v*z-m*y*w-x*v*o-u*n*z;b.transform(B/A,E/A,C/A,F/A,D/A,G/A),b.drawImage(d.texture.baseTexture.source,0,0),b.restore()}},b.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},b.Rope=function(a,c){b.Strip.call(this,a),this.points=c,this.verticies=new b.Float32Array(4*c.length),this.uvs=new b.Float32Array(4*c.length),this.colors=new b.Float32Array(2*c.length),this.indices=new b.Uint16Array(2*c.length),this.refresh()},b.Rope.prototype=Object.create(b.Strip.prototype),b.Rope.prototype.constructor=b.Rope,b.Rope.prototype.refresh=function(){var a=this.points;if(!(a.length<1)){var b=this.uvs,c=a[0],d=this.indices,e=this.colors;this.count-=.2,b[0]=0,b[1]=0,b[2]=0,b[3]=1,e[0]=1,e[1]=1,d[0]=0,d[1]=1;for(var f,g,h,i=a.length,j=1;i>j;j++)f=a[j],g=4*j,h=j/(i-1),j%2?(b[g]=h,b[g+1]=0,b[g+2]=h,b[g+3]=1):(b[g]=h,b[g+1]=0,b[g+2]=h,b[g+3]=1),g=2*j,e[g]=1,e[g+1]=1,g=2*j,d[g]=g,d[g+1]=g+1,c=f}},b.Rope.prototype.updateTransform=function(){var a=this.points;if(!(a.length<1)){var c,d=a[0],e={x:0,y:0};this.count-=.2;for(var f,g,h,i,j,k=this.verticies,l=a.length,m=0;l>m;m++)f=a[m],g=4*m,c=m1&&(h=1),i=Math.sqrt(e.x*e.x+e.y*e.y),j=this.texture.height/2,e.x/=i,e.y/=i,e.x*=j,e.y*=j,k[g]=f.x+e.x,k[g+1]=f.y+e.y,k[g+2]=f.x-e.x,k[g+3]=f.y-e.y,d=f;b.DisplayObjectContainer.prototype.updateTransform.call(this)}},b.Rope.prototype.setTexture=function(a){this.texture=a},b.TilingSprite=function(a,c,d){b.Sprite.call(this,a),this._width=c||100,this._height=d||100,this.tileScale=new b.Point(1,1),this.tileScaleOffset=new b.Point(1,1),this.tilePosition=new b.Point(0,0),this.renderable=!0,this.tint=16777215,this.blendMode=b.blendModes.NORMAL},b.TilingSprite.prototype=Object.create(b.Sprite.prototype),b.TilingSprite.prototype.constructor=b.TilingSprite,Object.defineProperty(b.TilingSprite.prototype,"width",{get:function(){return this._width},set:function(a){this._width=a}}),Object.defineProperty(b.TilingSprite.prototype,"height",{get:function(){return this._height},set:function(a){this._height=a}}),b.TilingSprite.prototype.setTexture=function(a){this.texture!==a&&(this.texture=a,this.refreshTexture=!0,this.cachedTint=16777215)},b.TilingSprite.prototype._renderWebGL=function(a){if(this.visible!==!1&&0!==this.alpha){var c,d;for(this._mask&&(a.spriteBatch.stop(),a.maskManager.pushMask(this.mask,a),a.spriteBatch.start()),this._filters&&(a.spriteBatch.flush(),a.filterManager.pushFilter(this._filterBlock)),!this.tilingTexture||this.refreshTexture?(this.generateTilingTexture(!0),this.tilingTexture&&this.tilingTexture.needsUpdate&&(b.updateWebGLTexture(this.tilingTexture.baseTexture,a.gl),this.tilingTexture.needsUpdate=!1)):a.spriteBatch.renderTilingSprite(this),c=0,d=this.children.length;d>c;c++)this.children[c]._renderWebGL(a);a.spriteBatch.stop(),this._filters&&a.filterManager.popFilter(),this._mask&&a.maskManager.popMask(a),a.spriteBatch.start()}},b.TilingSprite.prototype._renderCanvas=function(a){if(this.visible!==!1&&0!==this.alpha){var c=a.context;this._mask&&a.maskManager.pushMask(this._mask,c),c.globalAlpha=this.worldAlpha;var d,e,f=this.worldTransform;if(c.setTransform(f.a,f.c,f.b,f.d,f.tx,f.ty),!this.__tilePattern||this.refreshTexture){if(this.generateTilingTexture(!1),!this.tilingTexture)return;this.__tilePattern=c.createPattern(this.tilingTexture.baseTexture.source,"repeat")}this.blendMode!==a.currentBlendMode&&(a.currentBlendMode=this.blendMode,c.globalCompositeOperation=b.blendModesCanvas[a.currentBlendMode]);var g=this.tilePosition,h=this.tileScale;for(g.x%=this.tilingTexture.baseTexture.width,g.y%=this.tilingTexture.baseTexture.height,c.scale(h.x,h.y),c.translate(g.x,g.y),c.fillStyle=this.__tilePattern,c.fillRect(-g.x+this.anchor.x*-this._width,-g.y+this.anchor.y*-this._height,this._width/h.x,this._height/h.y),c.scale(1/h.x,1/h.y),c.translate(-g.x,-g.y),this._mask&&a.maskManager.popMask(a.context),d=0,e=this.children.length;e>d;d++)this.children[d]._renderCanvas(a)}},b.TilingSprite.prototype.getBounds=function(){var a=this._width,b=this._height,c=a*(1-this.anchor.x),d=a*-this.anchor.x,e=b*(1-this.anchor.y),f=b*-this.anchor.y,g=this.worldTransform,h=g.a,i=g.c,j=g.b,k=g.d,l=g.tx,m=g.ty,n=h*d+j*f+l,o=k*f+i*d+m,p=h*c+j*f+l,q=k*f+i*c+m,r=h*c+j*e+l,s=k*e+i*c+m,t=h*d+j*e+l,u=k*e+i*d+m,v=-1/0,w=-1/0,x=1/0,y=1/0;x=x>n?n:x,x=x>p?p:x,x=x>r?r:x,x=x>t?t:x,y=y>o?o:y,y=y>q?q:y,y=y>s?s:y,y=y>u?u:y,v=n>v?n:v,v=p>v?p:v,v=r>v?r:v,v=t>v?t:v,w=o>w?o:w,w=q>w?q:w,w=s>w?s:w,w=u>w?u:w;var z=this._bounds;return z.x=x,z.width=v-x,z.y=y,z.height=w-y,this._currentBounds=z,z},b.TilingSprite.prototype.onTextureUpdate=function(){},b.TilingSprite.prototype.generateTilingTexture=function(a){if(this.texture.baseTexture.hasLoaded){var c,d,e=this.texture,f=e.frame,g=f.width!==e.baseTexture.width||f.height!==e.baseTexture.height,h=!1;if(a?(c=b.getNextPowerOfTwo(f.width),d=b.getNextPowerOfTwo(f.height),(f.width!==c||f.height!==d)&&(h=!0)):g&&(c=f.width,d=f.height,h=!0),h){var i;this.tilingTexture&&this.tilingTexture.isTiling?(i=this.tilingTexture.canvasBuffer,i.resize(c,d),this.tilingTexture.baseTexture.width=c,this.tilingTexture.baseTexture.height=d,this.tilingTexture.needsUpdate=!0):(i=new b.CanvasBuffer(c,d),this.tilingTexture=b.Texture.fromCanvas(i.canvas),this.tilingTexture.canvasBuffer=i,this.tilingTexture.isTiling=!0),i.context.drawImage(e.baseTexture.source,e.crop.x,e.crop.y,e.crop.width,e.crop.height,0,0,c,d),this.tileScaleOffset.x=f.width/c,this.tileScaleOffset.y=f.height/d}else this.tilingTexture&&this.tilingTexture.isTiling&&this.tilingTexture.destroy(!0),this.tileScaleOffset.x=1,this.tileScaleOffset.y=1,this.tilingTexture=e;this.refreshTexture=!1,this.tilingTexture.baseTexture._powerOf2=!0}};var f={};f.BoneData=function(a,b){this.name=a,this.parent=b},f.BoneData.prototype={length:0,x:0,y:0,rotation:0,scaleX:1,scaleY:1},f.SlotData=function(a,b){this.name=a,this.boneData=b},f.SlotData.prototype={r:1,g:1,b:1,a:1,attachmentName:null},f.Bone=function(a,b){this.data=a,this.parent=b,this.setToSetupPose()},f.Bone.yDown=!1,f.Bone.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,m00:0,m01:0,worldX:0,m10:0,m11:0,worldY:0,worldRotation:0,worldScaleX:1,worldScaleY:1,updateWorldTransform:function(a,b){var c=this.parent;null!=c?(this.worldX=this.x*c.m00+this.y*c.m01+c.worldX,this.worldY=this.x*c.m10+this.y*c.m11+c.worldY,this.worldScaleX=c.worldScaleX*this.scaleX,this.worldScaleY=c.worldScaleY*this.scaleY,this.worldRotation=c.worldRotation+this.rotation):(this.worldX=this.x,this.worldY=this.y,this.worldScaleX=this.scaleX,this.worldScaleY=this.scaleY,this.worldRotation=this.rotation);var d=this.worldRotation*Math.PI/180,e=Math.cos(d),g=Math.sin(d);this.m00=e*this.worldScaleX,this.m10=g*this.worldScaleX,this.m01=-g*this.worldScaleY,this.m11=e*this.worldScaleY,a&&(this.m00=-this.m00,this.m01=-this.m01),b&&(this.m10=-this.m10,this.m11=-this.m11),f.Bone.yDown&&(this.m10=-this.m10,this.m11=-this.m11)},setToSetupPose:function(){var a=this.data;this.x=a.x,this.y=a.y,this.rotation=a.rotation,this.scaleX=a.scaleX,this.scaleY=a.scaleY}},f.Slot=function(a,b,c){this.data=a,this.skeleton=b,this.bone=c,this.setToSetupPose()},f.Slot.prototype={r:1,g:1,b:1,a:1,_attachmentTime:0,attachment:null,setAttachment:function(a){this.attachment=a,this._attachmentTime=this.skeleton.time},setAttachmentTime:function(a){this._attachmentTime=this.skeleton.time-a},getAttachmentTime:function(){return this.skeleton.time-this._attachmentTime},setToSetupPose:function(){var a=this.data;this.r=a.r,this.g=a.g,this.b=a.b,this.a=a.a;for(var b=this.skeleton.data.slots,c=0,d=b.length;d>c;c++)if(b[c]==a){this.setAttachment(a.attachmentName?this.skeleton.getAttachmentBySlotIndex(c,a.attachmentName):null);break}}},f.Skin=function(a){this.name=a,this.attachments={}},f.Skin.prototype={addAttachment:function(a,b,c){this.attachments[a+":"+b]=c},getAttachment:function(a,b){return this.attachments[a+":"+b]},_attachAll:function(a,b){for(var c in b.attachments){var d=c.indexOf(":"),e=parseInt(c.substring(0,d),10),f=c.substring(d+1),g=a.slots[e];if(g.attachment&&g.attachment.name==f){var h=this.getAttachment(e,f);h&&g.setAttachment(h)}}}},f.Animation=function(a,b,c){this.name=a,this.timelines=b,this.duration=c},f.Animation.prototype={apply:function(a,b,c){c&&this.duration&&(b%=this.duration);for(var d=this.timelines,e=0,f=d.length;f>e;e++)d[e].apply(a,b,1)},mix:function(a,b,c,d){c&&this.duration&&(b%=this.duration);for(var e=this.timelines,f=0,g=e.length;g>f;f++)e[f].apply(a,b,d)}},f.binarySearch=function(a,b,c){var d=0,e=Math.floor(a.length/c)-2;if(!e)return c;for(var f=e>>>1;;){if(a[(f+1)*c]<=b?d=f+1:e=f,d==e)return(d+1)*c;f=d+e>>>1}},f.linearSearch=function(a,b,c){for(var d=0,e=a.length-c;e>=d;d+=c)if(a[d]>b)return d;return-1},f.Curves=function(a){this.curves=[],this.curves.length=6*(a-1)},f.Curves.prototype={setLinear:function(a){this.curves[6*a]=0},setStepped:function(a){this.curves[6*a]=-1},setCurve:function(a,b,c,d,e){var f=.1,g=f*f,h=g*f,i=3*f,j=3*g,k=6*g,l=6*h,m=2*-b+d,n=2*-c+e,o=3*(b-d)+1,p=3*(c-e)+1,q=6*a,r=this.curves;r[q]=b*i+m*j+o*h,r[q+1]=c*i+n*j+p*h,r[q+2]=m*k+o*l,r[q+3]=n*k+p*l,r[q+4]=o*l,r[q+5]=p*l},getCurvePercent:function(a,b){b=0>b?0:b>1?1:b;var c=6*a,d=this.curves,e=d[c];if(!e)return b;if(-1==e)return 0;for(var f=d[c+1],g=d[c+2],h=d[c+3],i=d[c+4],j=d[c+5],k=e,l=f,m=8;;){if(k>=b){var n=k-e,o=l-f;return o+(l-o)*(b-n)/(k-n)}if(!m)break;m--,e+=g,f+=h,g+=i,h+=j,k+=e,l+=f}return l+(1-l)*(b-k)/(1-k)}},f.RotateTimeline=function(a){this.curves=new f.Curves(a),this.frames=[],this.frames.length=2*a},f.RotateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(a,b,c){a*=2,this.frames[a]=b,this.frames[a+1]=c},apply:function(a,b,c){var d,e=this.frames;if(!(b=e[e.length-2]){for(d=g.data.rotation+e[e.length-1]-g.rotation;d>180;)d-=360;for(;-180>d;)d+=360;return g.rotation+=d*c,void 0}var h=f.binarySearch(e,b,2),i=e[h-1],j=e[h],k=1-(b-j)/(e[h-2]-j);for(k=this.curves.getCurvePercent(h/2-1,k),d=e[h+1]-i;d>180;)d-=360;for(;-180>d;)d+=360;for(d=g.data.rotation+(i+d*k)-g.rotation;d>180;)d-=360;for(;-180>d;)d+=360;g.rotation+=d*c}}},f.TranslateTimeline=function(a){this.curves=new f.Curves(a),this.frames=[],this.frames.length=3*a},f.TranslateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(a,b,c,d){a*=3,this.frames[a]=b,this.frames[a+1]=c,this.frames[a+2]=d},apply:function(a,b,c){var d=this.frames;if(!(b=d[d.length-3])return e.x+=(e.data.x+d[d.length-2]-e.x)*c,e.y+=(e.data.y+d[d.length-1]-e.y)*c,void 0;var g=f.binarySearch(d,b,3),h=d[g-2],i=d[g-1],j=d[g],k=1-(b-j)/(d[g+-3]-j);k=this.curves.getCurvePercent(g/3-1,k),e.x+=(e.data.x+h+(d[g+1]-h)*k-e.x)*c,e.y+=(e.data.y+i+(d[g+2]-i)*k-e.y)*c}}},f.ScaleTimeline=function(a){this.curves=new f.Curves(a),this.frames=[],this.frames.length=3*a},f.ScaleTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(a,b,c,d){a*=3,this.frames[a]=b,this.frames[a+1]=c,this.frames[a+2]=d},apply:function(a,b,c){var d=this.frames;if(!(b=d[d.length-3])return e.scaleX+=(e.data.scaleX-1+d[d.length-2]-e.scaleX)*c,e.scaleY+=(e.data.scaleY-1+d[d.length-1]-e.scaleY)*c,void 0;var g=f.binarySearch(d,b,3),h=d[g-2],i=d[g-1],j=d[g],k=1-(b-j)/(d[g+-3]-j);k=this.curves.getCurvePercent(g/3-1,k),e.scaleX+=(e.data.scaleX-1+h+(d[g+1]-h)*k-e.scaleX)*c,e.scaleY+=(e.data.scaleY-1+i+(d[g+2]-i)*k-e.scaleY)*c}}},f.ColorTimeline=function(a){this.curves=new f.Curves(a),this.frames=[],this.frames.length=5*a},f.ColorTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/5},setFrame:function(a,b,c,d,e,f){a*=5,this.frames[a]=b,this.frames[a+1]=c,this.frames[a+2]=d,this.frames[a+3]=e,this.frames[a+4]=f},apply:function(a,b,c){var d=this.frames;if(!(b=d[d.length-5]){var g=d.length-1;return e.r=d[g-3],e.g=d[g-2],e.b=d[g-1],e.a=d[g],void 0}var h=f.binarySearch(d,b,5),i=d[h-4],j=d[h-3],k=d[h-2],l=d[h-1],m=d[h],n=1-(b-m)/(d[h-5]-m);n=this.curves.getCurvePercent(h/5-1,n);var o=i+(d[h+1]-i)*n,p=j+(d[h+2]-j)*n,q=k+(d[h+3]-k)*n,r=l+(d[h+4]-l)*n;1>c?(e.r+=(o-e.r)*c,e.g+=(p-e.g)*c,e.b+=(q-e.b)*c,e.a+=(r-e.a)*c):(e.r=o,e.g=p,e.b=q,e.a=r)}}},f.AttachmentTimeline=function(a){this.curves=new f.Curves(a),this.frames=[],this.frames.length=a,this.attachmentNames=[],this.attachmentNames.length=a},f.AttachmentTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length},setFrame:function(a,b,c){this.frames[a]=b,this.attachmentNames[a]=c},apply:function(a,b){var c=this.frames;if(!(b=c[c.length-1]?c.length-1:f.binarySearch(c,b,1)-1;var e=this.attachmentNames[d];a.slots[this.slotIndex].setAttachment(e?a.getAttachmentBySlotIndex(this.slotIndex,e):null)}}},f.SkeletonData=function(){this.bones=[],this.slots=[],this.skins=[],this.animations=[]},f.SkeletonData.prototype={defaultSkin:null,findBone:function(a){for(var b=this.bones,c=0,d=b.length;d>c;c++)if(b[c].name==a)return b[c];return null},findBoneIndex:function(a){for(var b=this.bones,c=0,d=b.length;d>c;c++)if(b[c].name==a)return c;return-1},findSlot:function(a){for(var b=this.slots,c=0,d=b.length;d>c;c++)if(b[c].name==a)return slot[c];return null},findSlotIndex:function(a){for(var b=this.slots,c=0,d=b.length;d>c;c++)if(b[c].name==a)return c;return-1},findSkin:function(a){for(var b=this.skins,c=0,d=b.length;d>c;c++)if(b[c].name==a)return b[c];return null},findAnimation:function(a){for(var b=this.animations,c=0,d=b.length;d>c;c++)if(b[c].name==a)return b[c];return null}},f.Skeleton=function(a){this.data=a,this.bones=[]; -for(var b=0,c=a.bones.length;c>b;b++){var d=a.bones[b],e=d.parent?this.bones[a.bones.indexOf(d.parent)]:null;this.bones.push(new f.Bone(d,e))}for(this.slots=[],this.drawOrder=[],b=0,c=a.slots.length;c>b;b++){var g=a.slots[b],h=this.bones[a.bones.indexOf(g.boneData)],i=new f.Slot(g,this,h);this.slots.push(i),this.drawOrder.push(i)}},f.Skeleton.prototype={x:0,y:0,skin:null,r:1,g:1,b:1,a:1,time:0,flipX:!1,flipY:!1,updateWorldTransform:function(){for(var a=this.flipX,b=this.flipY,c=this.bones,d=0,e=c.length;e>d;d++)c[d].updateWorldTransform(a,b)},setToSetupPose:function(){this.setBonesToSetupPose(),this.setSlotsToSetupPose()},setBonesToSetupPose:function(){for(var a=this.bones,b=0,c=a.length;c>b;b++)a[b].setToSetupPose()},setSlotsToSetupPose:function(){for(var a=this.slots,b=0,c=a.length;c>b;b++)a[b].setToSetupPose(b)},getRootBone:function(){return this.bones.length?this.bones[0]:null},findBone:function(a){for(var b=this.bones,c=0,d=b.length;d>c;c++)if(b[c].data.name==a)return b[c];return null},findBoneIndex:function(a){for(var b=this.bones,c=0,d=b.length;d>c;c++)if(b[c].data.name==a)return c;return-1},findSlot:function(a){for(var b=this.slots,c=0,d=b.length;d>c;c++)if(b[c].data.name==a)return b[c];return null},findSlotIndex:function(a){for(var b=this.slots,c=0,d=b.length;d>c;c++)if(b[c].data.name==a)return c;return-1},setSkinByName:function(a){var b=this.data.findSkin(a);if(!b)throw"Skin not found: "+a;this.setSkin(b)},setSkin:function(a){this.skin&&a&&a._attachAll(this,this.skin),this.skin=a},getAttachmentBySlotName:function(a,b){return this.getAttachmentBySlotIndex(this.data.findSlotIndex(a),b)},getAttachmentBySlotIndex:function(a,b){if(this.skin){var c=this.skin.getAttachment(a,b);if(c)return c}return this.data.defaultSkin?this.data.defaultSkin.getAttachment(a,b):null},setAttachment:function(a,b){for(var c=this.slots,d=0,e=c.size;e>d;d++){var f=c[d];if(f.data.name==a){var g=null;if(b&&(g=this.getAttachment(d,b),null==g))throw"Attachment not found: "+b+", for slot: "+a;return f.setAttachment(g),void 0}}throw"Slot not found: "+a},update:function(a){time+=a}},f.AttachmentType={region:0},f.RegionAttachment=function(){this.offset=[],this.offset.length=8,this.uvs=[],this.uvs.length=8},f.RegionAttachment.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,width:0,height:0,rendererObject:null,regionOffsetX:0,regionOffsetY:0,regionWidth:0,regionHeight:0,regionOriginalWidth:0,regionOriginalHeight:0,setUVs:function(a,b,c,d,e){var f=this.uvs;e?(f[2]=a,f[3]=d,f[4]=a,f[5]=b,f[6]=c,f[7]=b,f[0]=c,f[1]=d):(f[0]=a,f[1]=d,f[2]=a,f[3]=b,f[4]=c,f[5]=b,f[6]=c,f[7]=d)},updateOffset:function(){var a=this.width/this.regionOriginalWidth*this.scaleX,b=this.height/this.regionOriginalHeight*this.scaleY,c=-this.width/2*this.scaleX+this.regionOffsetX*a,d=-this.height/2*this.scaleY+this.regionOffsetY*b,e=c+this.regionWidth*a,f=d+this.regionHeight*b,g=this.rotation*Math.PI/180,h=Math.cos(g),i=Math.sin(g),j=c*h+this.x,k=c*i,l=d*h+this.y,m=d*i,n=e*h+this.x,o=e*i,p=f*h+this.y,q=f*i,r=this.offset;r[0]=j-m,r[1]=l+k,r[2]=j-q,r[3]=p+k,r[4]=n-q,r[5]=p+o,r[6]=n-m,r[7]=l+o},computeVertices:function(a,b,c,d){a+=c.worldX,b+=c.worldY;var e=c.m00,f=c.m01,g=c.m10,h=c.m11,i=this.offset;d[0]=i[0]*e+i[1]*f+a,d[1]=i[0]*g+i[1]*h+b,d[2]=i[2]*e+i[3]*f+a,d[3]=i[2]*g+i[3]*h+b,d[4]=i[4]*e+i[5]*f+a,d[5]=i[4]*g+i[5]*h+b,d[6]=i[6]*e+i[7]*f+a,d[7]=i[6]*g+i[7]*h+b}},f.AnimationStateData=function(a){this.skeletonData=a,this.animationToMixTime={}},f.AnimationStateData.prototype={defaultMix:0,setMixByName:function(a,b,c){var d=this.skeletonData.findAnimation(a);if(!d)throw"Animation not found: "+a;var e=this.skeletonData.findAnimation(b);if(!e)throw"Animation not found: "+b;this.setMix(d,e,c)},setMix:function(a,b,c){this.animationToMixTime[a.name+":"+b.name]=c},getMix:function(a,b){var c=this.animationToMixTime[a.name+":"+b.name];return c?c:this.defaultMix}},f.AnimationState=function(a){this.data=a,this.queue=[]},f.AnimationState.prototype={animationSpeed:1,current:null,previous:null,currentTime:0,previousTime:0,currentLoop:!1,previousLoop:!1,mixTime:0,mixDuration:0,update:function(a){if(this.currentTime+=a*this.animationSpeed,this.previousTime+=a,this.mixTime+=a,this.queue.length>0){var b=this.queue[0];this.currentTime>=b.delay&&(this._setAnimation(b.animation,b.loop),this.queue.shift())}},apply:function(a){if(this.current)if(this.previous){this.previous.apply(a,this.previousTime,this.previousLoop);var b=this.mixTime/this.mixDuration;b>=1&&(b=1,this.previous=null),this.current.mix(a,this.currentTime,this.currentLoop,b)}else this.current.apply(a,this.currentTime,this.currentLoop)},clearAnimation:function(){this.previous=null,this.current=null,this.queue.length=0},_setAnimation:function(a,b){this.previous=null,a&&this.current&&(this.mixDuration=this.data.getMix(this.current,a),this.mixDuration>0&&(this.mixTime=0,this.previous=this.current,this.previousTime=this.currentTime,this.previousLoop=this.currentLoop)),this.current=a,this.currentLoop=b,this.currentTime=0},setAnimationByName:function(a,b){var c=this.data.skeletonData.findAnimation(a);if(!c)throw"Animation not found: "+a;this.setAnimation(c,b)},setAnimation:function(a,b){this.queue.length=0,this._setAnimation(a,b)},addAnimationByName:function(a,b,c){var d=this.data.skeletonData.findAnimation(a);if(!d)throw"Animation not found: "+a;this.addAnimation(d,b,c)},addAnimation:function(a,b,c){var d={};if(d.animation=a,d.loop=b,!c||0>=c){var e=this.queue.length?this.queue[this.queue.length-1].animation:this.current;c=null!=e?e.duration-this.data.getMix(e,a)+(c||0):0}d.delay=c,this.queue.push(d)},isComplete:function(){return!this.current||this.currentTime>=this.current.duration}},f.SkeletonJson=function(a){this.attachmentLoader=a},f.SkeletonJson.prototype={scale:1,readSkeletonData:function(a){for(var b,c=new f.SkeletonData,d=a.bones,e=0,g=d.length;g>e;e++){var h=d[e],i=null;if(h.parent&&(i=c.findBone(h.parent),!i))throw"Parent bone not found: "+h.parent;b=new f.BoneData(h.name,i),b.length=(h.length||0)*this.scale,b.x=(h.x||0)*this.scale,b.y=(h.y||0)*this.scale,b.rotation=h.rotation||0,b.scaleX=h.scaleX||1,b.scaleY=h.scaleY||1,c.bones.push(b)}var j=a.slots;for(e=0,g=j.length;g>e;e++){var k=j[e];if(b=c.findBone(k.bone),!b)throw"Slot bone not found: "+k.bone;var l=new f.SlotData(k.name,b),m=k.color;m&&(l.r=f.SkeletonJson.toColor(m,0),l.g=f.SkeletonJson.toColor(m,1),l.b=f.SkeletonJson.toColor(m,2),l.a=f.SkeletonJson.toColor(m,3)),l.attachmentName=k.attachment,c.slots.push(l)}var n=a.skins;for(var o in n)if(n.hasOwnProperty(o)){var p=n[o],q=new f.Skin(o);for(var r in p)if(p.hasOwnProperty(r)){var s=c.findSlotIndex(r),t=p[r];for(var u in t)if(t.hasOwnProperty(u)){var v=this.readAttachment(q,u,t[u]);null!=v&&q.addAttachment(s,u,v)}}c.skins.push(q),"default"==q.name&&(c.defaultSkin=q)}var w=a.animations;for(var x in w)w.hasOwnProperty(x)&&this.readAnimation(x,w[x],c);return c},readAttachment:function(a,b,c){b=c.name||b;var d=f.AttachmentType[c.type||"region"];if(d==f.AttachmentType.region){var e=new f.RegionAttachment;return e.x=(c.x||0)*this.scale,e.y=(c.y||0)*this.scale,e.scaleX=c.scaleX||1,e.scaleY=c.scaleY||1,e.rotation=c.rotation||0,e.width=(c.width||32)*this.scale,e.height=(c.height||32)*this.scale,e.updateOffset(),e.rendererObject={},e.rendererObject.name=b,e.rendererObject.scale={},e.rendererObject.scale.x=e.scaleX,e.rendererObject.scale.y=e.scaleY,e.rendererObject.rotation=-e.rotation*Math.PI/180,e}throw"Unknown attachment type: "+d},readAnimation:function(a,b,c){var d,e,g,h,i,j,k,l=[],m=0,n=b.bones;for(var o in n)if(n.hasOwnProperty(o)){var p=c.findBoneIndex(o);if(-1==p)throw"Bone not found: "+o;var q=n[o];for(g in q)if(q.hasOwnProperty(g))if(i=q[g],"rotate"==g){for(e=new f.RotateTimeline(i.length),e.boneIndex=p,d=0,j=0,k=i.length;k>j;j++)h=i[j],e.setFrame(d,h.time,h.angle),f.SkeletonJson.readCurve(e,d,h),d++;l.push(e),m=Math.max(m,e.frames[2*e.getFrameCount()-2])}else{if("translate"!=g&&"scale"!=g)throw"Invalid timeline type for a bone: "+g+" ("+o+")";var r=1;for("scale"==g?e=new f.ScaleTimeline(i.length):(e=new f.TranslateTimeline(i.length),r=this.scale),e.boneIndex=p,d=0,j=0,k=i.length;k>j;j++){h=i[j];var s=(h.x||0)*r,t=(h.y||0)*r;e.setFrame(d,h.time,s,t),f.SkeletonJson.readCurve(e,d,h),d++}l.push(e),m=Math.max(m,e.frames[3*e.getFrameCount()-3])}}var u=b.slots;for(var v in u)if(u.hasOwnProperty(v)){var w=u[v],x=c.findSlotIndex(v);for(g in w)if(w.hasOwnProperty(g))if(i=w[g],"color"==g){for(e=new f.ColorTimeline(i.length),e.slotIndex=x,d=0,j=0,k=i.length;k>j;j++){h=i[j];var y=h.color,z=f.SkeletonJson.toColor(y,0),A=f.SkeletonJson.toColor(y,1),B=f.SkeletonJson.toColor(y,2),C=f.SkeletonJson.toColor(y,3);e.setFrame(d,h.time,z,A,B,C),f.SkeletonJson.readCurve(e,d,h),d++}l.push(e),m=Math.max(m,e.frames[5*e.getFrameCount()-5])}else{if("attachment"!=g)throw"Invalid timeline type for a slot: "+g+" ("+v+")";for(e=new f.AttachmentTimeline(i.length),e.slotIndex=x,d=0,j=0,k=i.length;k>j;j++)h=i[j],e.setFrame(d++,h.time,h.name);l.push(e),m=Math.max(m,e.frames[e.getFrameCount()-1])}}c.animations.push(new f.Animation(a,l,m))}},f.SkeletonJson.readCurve=function(a,b,c){var d=c.curve;d&&("stepped"==d?a.curves.setStepped(b):d instanceof Array&&a.curves.setCurve(b,d[0],d[1],d[2],d[3]))},f.SkeletonJson.toColor=function(a,b){if(8!=a.length)throw"Color hexidecimal length must be 8, recieved: "+a;return parseInt(a.substr(2*b,2),16)/255},f.Atlas=function(a,b){this.textureLoader=b,this.pages=[],this.regions=[];var c=new f.AtlasReader(a),d=[];d.length=4;for(var e=null;;){var g=c.readLine();if(null==g)break;if(g=c.trim(g),g.length)if(e){var h=new f.AtlasRegion;h.name=g,h.page=e,h.rotate="true"==c.readValue(),c.readTuple(d);var i=parseInt(d[0],10),j=parseInt(d[1],10);c.readTuple(d);var k=parseInt(d[0],10),l=parseInt(d[1],10);h.u=i/e.width,h.v=j/e.height,h.rotate?(h.u2=(i+l)/e.width,h.v2=(j+k)/e.height):(h.u2=(i+k)/e.width,h.v2=(j+l)/e.height),h.x=i,h.y=j,h.width=Math.abs(k),h.height=Math.abs(l),4==c.readTuple(d)&&(h.splits=[parseInt(d[0],10),parseInt(d[1],10),parseInt(d[2],10),parseInt(d[3],10)],4==c.readTuple(d)&&(h.pads=[parseInt(d[0],10),parseInt(d[1],10),parseInt(d[2],10),parseInt(d[3],10)],c.readTuple(d))),h.originalWidth=parseInt(d[0],10),h.originalHeight=parseInt(d[1],10),c.readTuple(d),h.offsetX=parseInt(d[0],10),h.offsetY=parseInt(d[1],10),h.index=parseInt(c.readValue(),10),this.regions.push(h)}else{e=new f.AtlasPage,e.name=g,e.format=f.Atlas.Format[c.readValue()],c.readTuple(d),e.minFilter=f.Atlas.TextureFilter[d[0]],e.magFilter=f.Atlas.TextureFilter[d[1]];var m=c.readValue();e.uWrap=f.Atlas.TextureWrap.clampToEdge,e.vWrap=f.Atlas.TextureWrap.clampToEdge,"x"==m?e.uWrap=f.Atlas.TextureWrap.repeat:"y"==m?e.vWrap=f.Atlas.TextureWrap.repeat:"xy"==m&&(e.uWrap=e.vWrap=f.Atlas.TextureWrap.repeat),b.load(e,g),this.pages.push(e)}else e=null}},f.Atlas.prototype={findRegion:function(a){for(var b=this.regions,c=0,d=b.length;d>c;c++)if(b[c].name==a)return b[c];return null},dispose:function(){for(var a=this.pages,b=0,c=a.length;c>b;b++)this.textureLoader.unload(a[b].rendererObject)},updateUVs:function(a){for(var b=this.regions,c=0,d=b.length;d>c;c++){var e=b[c];e.page==a&&(e.u=e.x/a.width,e.v=e.y/a.height,e.rotate?(e.u2=(e.x+e.height)/a.width,e.v2=(e.y+e.width)/a.height):(e.u2=(e.x+e.width)/a.width,e.v2=(e.y+e.height)/a.height))}}},f.Atlas.Format={alpha:0,intensity:1,luminanceAlpha:2,rgb565:3,rgba4444:4,rgb888:5,rgba8888:6},f.Atlas.TextureFilter={nearest:0,linear:1,mipMap:2,mipMapNearestNearest:3,mipMapLinearNearest:4,mipMapNearestLinear:5,mipMapLinearLinear:6},f.Atlas.TextureWrap={mirroredRepeat:0,clampToEdge:1,repeat:2},f.AtlasPage=function(){},f.AtlasPage.prototype={name:null,format:null,minFilter:null,magFilter:null,uWrap:null,vWrap:null,rendererObject:null,width:0,height:0},f.AtlasRegion=function(){},f.AtlasRegion.prototype={page:null,name:null,x:0,y:0,width:0,height:0,u:0,v:0,u2:0,v2:0,offsetX:0,offsetY:0,originalWidth:0,originalHeight:0,index:0,rotate:!1,splits:null,pads:null},f.AtlasReader=function(a){this.lines=a.split(/\r\n|\r|\n/)},f.AtlasReader.prototype={index:0,trim:function(a){return a.replace(/^\s+|\s+$/g,"")},readLine:function(){return this.index>=this.lines.length?null:this.lines[this.index++]},readValue:function(){var a=this.readLine(),b=a.indexOf(":");if(-1==b)throw"Invalid line: "+a;return this.trim(a.substring(b+1))},readTuple:function(a){var b=this.readLine(),c=b.indexOf(":");if(-1==c)throw"Invalid line: "+b;for(var d=0,e=c+1;3>d;d++){var f=b.indexOf(",",e);if(-1==f){if(!d)throw"Invalid line: "+b;break}a[d]=this.trim(b.substr(e,f-e)),e=f+1}return a[d]=this.trim(b.substring(e)),d+1}},f.AtlasAttachmentLoader=function(a){this.atlas=a},f.AtlasAttachmentLoader.prototype={newAttachment:function(a,b,c){switch(b){case f.AttachmentType.region:var d=this.atlas.findRegion(c);if(!d)throw"Region not found in atlas: "+c+" ("+b+")";var e=new f.RegionAttachment(c);return e.rendererObject=d,e.setUVs(d.u,d.v,d.u2,d.v2,d.rotate),e.regionOffsetX=d.offsetX,e.regionOffsetY=d.offsetY,e.regionWidth=d.width,e.regionHeight=d.height,e.regionOriginalWidth=d.originalWidth,e.regionOriginalHeight=d.originalHeight,e}throw"Unknown attachment type: "+b}},f.Bone.yDown=!0,b.AnimCache={},b.Spine=function(a){if(b.DisplayObjectContainer.call(this),this.spineData=b.AnimCache[a],!this.spineData)throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: "+a);this.skeleton=new f.Skeleton(this.spineData),this.skeleton.updateWorldTransform(),this.stateData=new f.AnimationStateData(this.spineData),this.state=new f.AnimationState(this.stateData),this.slotContainers=[];for(var c=0,d=this.skeleton.drawOrder.length;d>c;c++){var e=this.skeleton.drawOrder[c],g=e.attachment,h=new b.DisplayObjectContainer;if(this.slotContainers.push(h),this.addChild(h),g instanceof f.RegionAttachment){var i=g.rendererObject.name,j=this.createSprite(e,g.rendererObject);e.currentSprite=j,e.currentSpriteName=i,h.addChild(j)}}},b.Spine.prototype=Object.create(b.DisplayObjectContainer.prototype),b.Spine.prototype.constructor=b.Spine,b.Spine.prototype.updateTransform=function(){this.lastTime=this.lastTime||Date.now();var a=.001*(Date.now()-this.lastTime);this.lastTime=Date.now(),this.state.update(a),this.state.apply(this.skeleton),this.skeleton.updateWorldTransform();for(var c=this.skeleton.drawOrder,d=0,e=c.length;e>d;d++){var g=c[d],h=g.attachment,i=this.slotContainers[d];if(h instanceof f.RegionAttachment){if(h.rendererObject&&(!g.currentSpriteName||g.currentSpriteName!=h.name)){var j=h.rendererObject.name;if(void 0!==g.currentSprite&&(g.currentSprite.visible=!1),g.sprites=g.sprites||{},void 0!==g.sprites[j])g.sprites[j].visible=!0;else{var k=this.createSprite(g,h.rendererObject);i.addChild(k)}g.currentSprite=g.sprites[j],g.currentSpriteName=j}i.visible=!0;var l=g.bone;i.position.x=l.worldX+h.x*l.m00+h.y*l.m01,i.position.y=l.worldY+h.x*l.m10+h.y*l.m11,i.scale.x=l.worldScaleX,i.scale.y=l.worldScaleY,i.rotation=-(g.bone.worldRotation*Math.PI/180),i.alpha=g.a,g.currentSprite.tint=b.rgb2hex([g.r,g.g,g.b])}else i.visible=!1}b.DisplayObjectContainer.prototype.updateTransform.call(this)},b.Spine.prototype.createSprite=function(a,c){var d=b.TextureCache[c.name]?c.name:c.name+".png",e=new b.Sprite(b.Texture.fromFrame(d));return e.scale=c.scale,e.rotation=c.rotation,e.anchor.x=e.anchor.y=.5,a.sprites=a.sprites||{},a.sprites[c.name]=e,e},b.BaseTextureCache={},b.texturesToUpdate=[],b.texturesToDestroy=[],b.BaseTextureCacheIdGenerator=0,b.BaseTexture=function(a,c){if(b.EventTarget.call(this),this.width=100,this.height=100,this.scaleMode=c||b.scaleModes.DEFAULT,this.hasLoaded=!1,this.source=a,this.id=b.BaseTextureCacheIdGenerator++,this.premultipliedAlpha=!0,this._glTextures=[],this._dirty=[],a){if((this.source.complete||this.source.getContext)&&this.source.width&&this.source.height)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,b.texturesToUpdate.push(this);else{var d=this;this.source.onload=function(){d.hasLoaded=!0,d.width=d.source.width,d.height=d.source.height;for(var a=0;athis.baseTexture.width||a.y+a.height>this.baseTexture.height))throw new Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.valid=a&&a.width&&a.height&&this.baseTexture.source&&this.baseTexture.hasLoaded,this.trim&&(this.width=this.trim.width,this.height=this.trim.height,this.frame.width=this.trim.width,this.frame.height=this.trim.height),this.valid&&b.Texture.frameUpdates.push(this)},b.Texture.prototype._updateWebGLuvs=function(){this._uvs||(this._uvs=new b.TextureUvs);var a=this.crop,c=this.baseTexture.width,d=this.baseTexture.height;this._uvs.x0=a.x/c,this._uvs.y0=a.y/d,this._uvs.x1=(a.x+a.width)/c,this._uvs.y1=a.y/d,this._uvs.x2=(a.x+a.width)/c,this._uvs.y2=(a.y+a.height)/d,this._uvs.x3=a.x/c,this._uvs.y3=(a.y+a.height)/d},b.Texture.fromImage=function(a,c,d){var e=b.TextureCache[a];return e||(e=new b.Texture(b.BaseTexture.fromImage(a,c,d)),b.TextureCache[a]=e),e},b.Texture.fromFrame=function(a){var c=b.TextureCache[a];if(!c)throw new Error('The frameId "'+a+'" does not exist in the texture cache ');return c},b.Texture.fromCanvas=function(a,c){var d=b.BaseTexture.fromCanvas(a,c);return new b.Texture(d)},b.Texture.addTextureToCache=function(a,c){b.TextureCache[c]=a},b.Texture.removeTextureFromCache=function(a){var c=b.TextureCache[a];return delete b.TextureCache[a],delete b.BaseTextureCache[a],c},b.Texture.frameUpdates=[],b.TextureUvs=function(){this.x0=0,this.y0=0,this.x1=0,this.y1=0,this.x2=0,this.y2=0,this.x3=0,this.y3=0},b.RenderTexture=function(a,c,d,e){if(b.EventTarget.call(this),this.width=a||100,this.height=c||100,this.frame=new b.Rectangle(0,0,this.width,this.height),this.crop=new b.Rectangle(0,0,this.width,this.height),this.baseTexture=new b.BaseTexture,this.baseTexture.width=this.width,this.baseTexture.height=this.height,this.baseTexture._glTextures=[],this.baseTexture.scaleMode=e||b.scaleModes.DEFAULT,this.baseTexture.hasLoaded=!0,this.renderer=d||b.defaultRenderer,this.renderer.type===b.WEBGL_RENDERER){var f=this.renderer.gl;this.textureBuffer=new b.FilterTexture(f,this.width,this.height,this.baseTexture.scaleMode),this.baseTexture._glTextures[f.id]=this.textureBuffer.texture,this.render=this.renderWebGL,this.projection=new b.Point(this.width/2,-this.height/2)}else this.render=this.renderCanvas,this.textureBuffer=new b.CanvasBuffer(this.width,this.height),this.baseTexture.source=this.textureBuffer.canvas;this.valid=!0,b.Texture.frameUpdates.push(this)},b.RenderTexture.prototype=Object.create(b.Texture.prototype),b.RenderTexture.prototype.constructor=b.RenderTexture,b.RenderTexture.prototype.resize=function(a,c,d){(a!==this.width||c!==this.height)&&(this.width=this.frame.width=this.crop.width=a,this.height=this.frame.height=this.crop.height=c,d&&(this.baseTexture.width=this.width,this.baseTexture.height=this.height),this.renderer.type===b.WEBGL_RENDERER&&(this.projection.x=this.width/2,this.projection.y=-this.height/2),this.textureBuffer.resize(this.width,this.height))},b.RenderTexture.prototype.clear=function(){this.renderer.type===b.WEBGL_RENDERER&&this.renderer.gl.bindFramebuffer(this.renderer.gl.FRAMEBUFFER,this.textureBuffer.frameBuffer),this.textureBuffer.clear()},b.RenderTexture.prototype.renderWebGL=function(a,c,d){var e=this.renderer.gl;e.colorMask(!0,!0,!0,!0),e.viewport(0,0,this.width,this.height),e.bindFramebuffer(e.FRAMEBUFFER,this.textureBuffer.frameBuffer),d&&this.textureBuffer.clear();var f=a.children,g=a.worldTransform;a.worldTransform=b.RenderTexture.tempMatrix,a.worldTransform.d=-1,a.worldTransform.ty=-2*this.projection.y,c&&(a.worldTransform.tx=c.x,a.worldTransform.ty-=c.y);for(var h=0,i=f.length;i>h;h++)f[h].updateTransform();b.WebGLRenderer.updateTextures(),this.renderer.spriteBatch.dirty=!0,this.renderer.renderDisplayObject(a,this.projection,this.textureBuffer.frameBuffer),a.worldTransform=g,this.renderer.spriteBatch.dirty=!0},b.RenderTexture.prototype.renderCanvas=function(a,c,d){var e=a.children,f=a.worldTransform;a.worldTransform=b.RenderTexture.tempMatrix,c?(a.worldTransform.tx=c.x,a.worldTransform.ty=c.y):(a.worldTransform.tx=0,a.worldTransform.ty=0);for(var g=0,h=e.length;h>g;g++)e[g].updateTransform();d&&this.textureBuffer.clear();var i=this.textureBuffer.context;this.renderer.renderDisplayObject(a,i),i.setTransform(1,0,0,1,0,0),a.worldTransform=f},b.RenderTexture.tempMatrix=new b.Matrix,b.AssetLoader=function(a,c){b.EventTarget.call(this),this.assetURLs=a,this.crossorigin=c,this.loadersByType={jpg:b.ImageLoader,jpeg:b.ImageLoader,png:b.ImageLoader,gif:b.ImageLoader,webp:b.ImageLoader,json:b.JsonLoader,atlas:b.AtlasLoader,anim:b.SpineLoader,xml:b.BitmapFontLoader,fnt:b.BitmapFontLoader}},b.AssetLoader.prototype.constructor=b.AssetLoader,b.AssetLoader.prototype._getDataType=function(a){var b="data:",c=a.slice(0,b.length).toLowerCase();if(c===b){var d=a.slice(b.length),e=d.indexOf(",");if(-1===e)return null;var f=d.slice(0,e).split(";")[0];return f&&"text/plain"!==f.toLowerCase()?f.split("/").pop().toLowerCase():"txt"}return null},b.AssetLoader.prototype.load=function(){function a(a){b.onAssetLoaded(a.content)}var b=this;this.loadCount=this.assetURLs.length;for(var c=0;c0){if(f===g)this.atlas.meta.image.push(a[g]),d=this.atlas.meta.image.length-1,this.atlas.frames.push({}),c=-3;else if(c>0)if(c%7===1)null!=e&&(this.atlas.frames[d][e.name]=e),e={name:a[g],frame:{}};else{var j=a[g].split(" ");if(c%7===3)e.frame.x=Number(j[1].replace(",","")),e.frame.y=Number(j[2]);else if(c%7===4)e.frame.w=Number(j[1].replace(",","")),e.frame.h=Number(j[2]);else if(c%7===5){var k={x:0,y:0,w:Number(j[1].replace(",","")),h:Number(j[2])};k.w>e.frame.w||k.h>e.frame.h?(e.trimmed=!0,e.realSize=k):e.trimmed=!1}}c++}if(null!=e&&(this.atlas.frames[d][e.name]=e),this.atlas.meta.image.length>0){for(this.images=[],h=0;hthis.currentImageId?(this.currentImageId++,this.images[this.currentImageId].load()):(this.loaded=!0,this.dispatchEvent({type:"loaded",content:this}))},b.AtlasLoader.prototype.onError=function(){this.dispatchEvent({type:"error",content:this})},b.SpriteSheetLoader=function(a,c){b.EventTarget.call(this),this.url=a,this.crossorigin=c,this.baseUrl=a.replace(/[^\/]*$/,""),this.texture=null,this.frames={}},b.SpriteSheetLoader.prototype.constructor=b.SpriteSheetLoader,b.SpriteSheetLoader.prototype.load=function(){var a=this,c=new b.JsonLoader(this.url,this.crossorigin);c.addEventListener("loaded",function(b){a.json=b.content.json,a.onLoaded()}),c.load()},b.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},b.ImageLoader=function(a,c){b.EventTarget.call(this),this.texture=b.Texture.fromImage(a,c),this.frames=[]},b.ImageLoader.prototype.constructor=b.ImageLoader,b.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var a=this;this.texture.baseTexture.addEventListener("loaded",function(){a.onLoaded()})}},b.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},b.ImageLoader.prototype.loadFramedSpriteSheet=function(a,c,d){this.frames=[];for(var e=Math.floor(this.texture.width/a),f=Math.floor(this.texture.height/c),g=0,h=0;f>h;h++)for(var i=0;e>i;i++,g++){var j=new b.Texture(this.texture,{x:i*a,y:h*c,width:a,height:c});this.frames.push(j),d&&(b.TextureCache[d+"-"+g]=j)}if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var k=this;this.texture.baseTexture.addEventListener("loaded",function(){k.onLoaded()})}},b.BitmapFontLoader=function(a,c){b.EventTarget.call(this),this.url=a,this.crossorigin=c,this.baseUrl=a.replace(/[^\/]*$/,""),this.texture=null},b.BitmapFontLoader.prototype.constructor=b.BitmapFontLoader,b.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new b.AjaxRequest;var a=this;this.ajaxRequest.onreadystatechange=function(){a.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},b.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4===this.ajaxRequest.readyState&&(200===this.ajaxRequest.status||-1===window.location.protocol.indexOf("http"))){var a=this.ajaxRequest.responseXML;if(!a||/MSIE 9/i.test(navigator.userAgent)||navigator.isCocoonJS)if("function"==typeof window.DOMParser){var c=new DOMParser;a=c.parseFromString(this.ajaxRequest.responseText,"text/xml")}else{var d=document.createElement("div");d.innerHTML=this.ajaxRequest.responseText,a=d}var e=this.baseUrl+a.getElementsByTagName("page")[0].getAttribute("file"),f=new b.ImageLoader(e,this.crossorigin);this.texture=f.texture.baseTexture;var g={},h=a.getElementsByTagName("info")[0],i=a.getElementsByTagName("common")[0];g.font=h.getAttribute("face"),g.size=parseInt(h.getAttribute("size"),10),g.lineHeight=parseInt(i.getAttribute("lineHeight"),10),g.chars={};for(var j=a.getElementsByTagName("char"),k=0;k-1){var c=["%c %c %c Pixi.js "+b.VERSION+" - "+a+" %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ ","background: #ff66a5","background: #ff66a5","color: #ff66a5; background: #030307;","background: #ff66a5","background: #ffc3dc","background: #ff66a5","color: #ff2424; background: #fff","color: #ff2424; background: #fff","color: #ff2424; background: #fff"];console.log.apply(console,c)}else window.console&&console.log("Pixi.js "+b.VERSION+" - http://www.pixijs.com/");b.dontSayHello=!0}},b.Point=function(a,b){this.x=a||0,this.y=b||0},b.Point.prototype.clone=function(){return new b.Point(this.x,this.y)},b.Point.prototype.set=function(a,b){this.x=a||0,this.y=b||(0!==b?this.x:0)},b.Point.prototype.constructor=b.Point,b.Rectangle=function(a,b,c,d){this.x=a||0,this.y=b||0,this.width=c||0,this.height=d||0},b.Rectangle.prototype.clone=function(){return new b.Rectangle(this.x,this.y,this.width,this.height)},b.Rectangle.prototype.contains=function(a,b){if(this.width<=0||this.height<=0)return!1;var c=this.x;if(a>=c&&a<=c+this.width){var d=this.y;if(b>=d&&b<=d+this.height)return!0}return!1},b.Rectangle.prototype.constructor=b.Rectangle,b.EmptyRectangle=new b.Rectangle(0,0,0,0),b.Polygon=function(a){if(a instanceof Array||(a=Array.prototype.slice.call(arguments)),a[0]instanceof b.Point){for(var c=[],d=0,e=a.length;e>d;d++)c.push(a[d].x,a[d].y);a=c}this.closed=!0,this.points=a},b.Polygon.prototype.clone=function(){var a=this.points.slice();return new b.Polygon(a)},b.Polygon.prototype.contains=function(a,b){for(var c=!1,d=this.points.length/2,e=0,f=d-1;d>e;f=e++){var g=this.points[2*e],h=this.points[2*e+1],i=this.points[2*f],j=this.points[2*f+1],k=h>b!=j>b&&(i-g)*(b-h)/(j-h)+g>a;k&&(c=!c)}return c},b.Polygon.prototype.constructor=b.Polygon,b.Circle=function(a,b,c){this.x=a||0,this.y=b||0,this.radius=c||0},b.Circle.prototype.clone=function(){return new b.Circle(this.x,this.y,this.radius)},b.Circle.prototype.contains=function(a,b){if(this.radius<=0)return!1;var c=this.x-a,d=this.y-b,e=this.radius*this.radius;return c*=c,d*=d,e>=c+d},b.Circle.prototype.getBounds=function(){return new b.Rectangle(this.x-this.radius,this.y-this.radius,2*this.radius,2*this.radius)},b.Circle.prototype.constructor=b.Circle,b.Ellipse=function(a,b,c,d){this.x=a||0,this.y=b||0,this.width=c||0,this.height=d||0},b.Ellipse.prototype.clone=function(){return new b.Ellipse(this.x,this.y,this.width,this.height)},b.Ellipse.prototype.contains=function(a,b){if(this.width<=0||this.height<=0)return!1;var c=(a-this.x)/this.width,d=(b-this.y)/this.height;return c*=c,d*=d,1>=c+d},b.Ellipse.prototype.getBounds=function(){return new b.Rectangle(this.x-this.width,this.y-this.height,this.width,this.height)},b.Ellipse.prototype.constructor=b.Ellipse,b.Matrix=function(){this.a=1,this.b=0,this.c=0,this.d=1,this.tx=0,this.ty=0},b.Matrix.prototype.fromArray=function(a){this.a=a[0],this.b=a[1],this.c=a[3],this.d=a[4],this.tx=a[2],this.ty=a[5]},b.Matrix.prototype.toArray=function(a){this.array||(this.array=new b.Float32Array(9));var c=this.array;return a?(c[0]=this.a,c[1]=this.b,c[2]=0,c[3]=this.c,c[4]=this.d,c[5]=0,c[6]=this.tx,c[7]=this.ty,c[8]=1):(c[0]=this.a,c[1]=this.c,c[2]=this.tx,c[3]=this.b,c[4]=this.d,c[5]=this.ty,c[6]=0,c[7]=0,c[8]=1),c},b.Matrix.prototype.apply=function(a,c){return c=c||new b.Point,c.x=this.a*a.x+this.c*a.y+this.tx,c.y=this.b*a.x+this.d*a.y+this.ty,c},b.Matrix.prototype.applyInverse=function(a,c){c=c||new b.Point;var d=1/(this.a*this.d+this.c*-this.b);return c.x=this.d*d*a.x+-this.c*d*a.y+(this.ty*this.c-this.tx*this.d)*d,c.y=this.a*d*a.y+-this.b*d*a.x+(-this.ty*this.a+this.tx*this.b)*d,c},b.Matrix.prototype.translate=function(a,b){return this.tx+=a,this.ty+=b,this},b.Matrix.prototype.scale=function(a,b){return this.a*=a,this.d*=b,this.c*=a,this.b*=b,this.tx*=a,this.ty*=b,this},b.Matrix.prototype.rotate=function(a){var b=Math.cos(a),c=Math.sin(a),d=this.a,e=this.c,f=this.tx;return this.a=d*b-this.b*c,this.b=d*c+this.b*b,this.c=e*b-this.d*c,this.d=e*c+this.d*b,this.tx=f*b-this.ty*c,this.ty=f*c+this.ty*b,this},b.Matrix.prototype.append=function(a){var b=this.a,c=this.b,d=this.c,e=this.d;return this.a=a.a*b+a.b*d,this.b=a.a*c+a.b*e,this.c=a.c*b+a.d*d,this.d=a.c*c+a.d*e,this.tx=a.tx*b+a.ty*d+this.tx,this.ty=a.tx*c+a.ty*e+this.ty,this},b.Matrix.prototype.identity=function(){return this.a=1,this.b=0,this.c=0,this.d=1,this.tx=0,this.ty=0,this},b.identityMatrix=new b.Matrix,b.DisplayObject=function(){this.position=new b.Point,this.scale=new b.Point(1,1),this.pivot=new b.Point(0,0),this.rotation=0,this.alpha=1,this.visible=!0,this.hitArea=null,this.buttonMode=!1,this.renderable=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this._interactive=!1,this.defaultCursor="pointer",this.worldTransform=new b.Matrix,this._sr=0,this._cr=1,this.filterArea=null,this._bounds=new b.Rectangle(0,0,1,1),this._currentBounds=null,this._mask=null,this._cacheAsBitmap=!1,this._cacheIsDirty=!1},b.DisplayObject.prototype.constructor=b.DisplayObject,Object.defineProperty(b.DisplayObject.prototype,"interactive",{get:function(){return this._interactive},set:function(a){this._interactive=a,this.stage&&(this.stage.dirty=!0)}}),Object.defineProperty(b.DisplayObject.prototype,"worldVisible",{get:function(){var a=this;do{if(!a.visible)return!1;a=a.parent}while(a);return!0}}),Object.defineProperty(b.DisplayObject.prototype,"mask",{get:function(){return this._mask},set:function(a){this._mask&&(this._mask.isMask=!1),this._mask=a,this._mask&&(this._mask.isMask=!0)}}),Object.defineProperty(b.DisplayObject.prototype,"filters",{get:function(){return this._filters},set:function(a){if(a){for(var b=[],c=0;c=0&&b<=this.children.length)return a.parent&&a.parent.removeChild(a),a.parent=this,this.children.splice(b,0,a),this.stage&&a.setStageReference(this.stage),a;throw new Error(a+"addChildAt: The index "+b+" supplied is out of bounds "+this.children.length)},b.DisplayObjectContainer.prototype.swapChildren=function(a,b){if(a!==b){var c=this.getChildIndex(a),d=this.getChildIndex(b);if(0>c||0>d)throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller.");this.children[c]=b,this.children[d]=a}},b.DisplayObjectContainer.prototype.getChildIndex=function(a){var b=this.children.indexOf(a);if(-1===b)throw new Error("The supplied DisplayObject must be a child of the caller");return b},b.DisplayObjectContainer.prototype.setChildIndex=function(a,b){if(0>b||b>=this.children.length)throw new Error("The supplied index is out of bounds");var c=this.getChildIndex(a);this.children.splice(c,1),this.children.splice(b,0,a)},b.DisplayObjectContainer.prototype.getChildAt=function(a){if(0>a||a>=this.children.length)throw new Error("getChildAt: Supplied index "+a+" does not exist in the child list, or the supplied DisplayObject must be a child of the caller");return this.children[a]},b.DisplayObjectContainer.prototype.removeChild=function(a){var b=this.children.indexOf(a);if(-1!==b)return this.removeChildAt(b)},b.DisplayObjectContainer.prototype.removeChildAt=function(a){var b=this.getChildAt(a);return this.stage&&b.removeStageReference(),b.parent=void 0,this.children.splice(a,1),b},b.DisplayObjectContainer.prototype.removeChildren=function(a,b){var c=a||0,d="number"==typeof b?b:this.children.length,e=d-c;if(e>0&&d>=e){for(var f=this.children.splice(c,e),g=0;ga;a++)this.children[a].updateTransform()},b.DisplayObjectContainer.prototype.getBounds=function(){if(0===this.children.length)return b.EmptyRectangle;for(var a,c,d,e=1/0,f=1/0,g=-1/0,h=-1/0,i=!1,j=0,k=this.children.length;k>j;j++){var l=this.children[j];l.visible&&(i=!0,a=this.children[j].getBounds(),e=ec?g:c,h=h>d?h:d)}if(!i)return b.EmptyRectangle;var m=this._bounds;return m.x=e,m.y=f,m.width=g-e,m.height=h-f,m},b.DisplayObjectContainer.prototype.getLocalBounds=function(){var a=this.worldTransform;this.worldTransform=b.identityMatrix;for(var c=0,d=this.children.length;d>c;c++)this.children[c].updateTransform();var e=this.getBounds();return this.worldTransform=a,e},b.DisplayObjectContainer.prototype.setStageReference=function(a){this.stage=a,this._interactive&&(this.stage.dirty=!0);for(var b=0,c=this.children.length;c>b;b++){var d=this.children[b];d.setStageReference(a)}},b.DisplayObjectContainer.prototype.removeStageReference=function(){for(var a=0,b=this.children.length;b>a;a++){var c=this.children[a];c.removeStageReference()}this._interactive&&(this.stage.dirty=!0),this.stage=null},b.DisplayObjectContainer.prototype._renderWebGL=function(a){if(this.visible&&!(this.alpha<=0)){if(this._cacheAsBitmap)return this._renderCachedSprite(a),void 0;var b,c;if(this._mask||this._filters){for(this._filters&&(a.spriteBatch.flush(),a.filterManager.pushFilter(this._filterBlock)),this._mask&&(a.spriteBatch.stop(),a.maskManager.pushMask(this.mask,a),a.spriteBatch.start()),b=0,c=this.children.length;c>b;b++)this.children[b]._renderWebGL(a);a.spriteBatch.stop(),this._mask&&a.maskManager.popMask(this._mask,a),this._filters&&a.filterManager.popFilter(),a.spriteBatch.start()}else for(b=0,c=this.children.length;c>b;b++)this.children[b]._renderWebGL(a)}},b.DisplayObjectContainer.prototype._renderCanvas=function(a){if(this.visible!==!1&&0!==this.alpha){if(this._cacheAsBitmap)return this._renderCachedSprite(a),void 0;this._mask&&a.maskManager.pushMask(this._mask,a);for(var b=0,c=this.children.length;c>b;b++){var d=this.children[b];d._renderCanvas(a)}this._mask&&a.maskManager.popMask(a)}},b.Sprite=function(a){b.DisplayObjectContainer.call(this),this.anchor=new b.Point,this.texture=a,this._width=0,this._height=0,this.tint=16777215,this.blendMode=b.blendModes.NORMAL,this.shader=null,a.baseTexture.hasLoaded?this.onTextureUpdate():(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.on("update",this.onTextureUpdateBind)),this.renderable=!0},b.Sprite.prototype=Object.create(b.DisplayObjectContainer.prototype),b.Sprite.prototype.constructor=b.Sprite,Object.defineProperty(b.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(a){this.scale.x=a/this.texture.frame.width,this._width=a}}),Object.defineProperty(b.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(a){this.scale.y=a/this.texture.frame.height,this._height=a}}),b.Sprite.prototype.setTexture=function(a){this.texture=a,this.cachedTint=16777215},b.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=this._height/this.texture.frame.height)},b.Sprite.prototype.getBounds=function(a){var b=this.texture.frame.width,c=this.texture.frame.height,d=b*(1-this.anchor.x),e=b*-this.anchor.x,f=c*(1-this.anchor.y),g=c*-this.anchor.y,h=a||this.worldTransform,i=h.a,j=h.c,k=h.b,l=h.d,m=h.tx,n=h.ty,o=i*e+k*g+m,p=l*g+j*e+n,q=i*d+k*g+m,r=l*g+j*d+n,s=i*d+k*f+m,t=l*f+j*d+n,u=i*e+k*f+m,v=l*f+j*e+n,w=-1/0,x=-1/0,y=1/0,z=1/0;y=y>o?o:y,y=y>q?q:y,y=y>s?s:y,y=y>u?u:y,z=z>p?p:z,z=z>r?r:z,z=z>t?t:z,z=z>v?v:z,w=o>w?o:w,w=q>w?q:w,w=s>w?s:w,w=u>w?u:w,x=p>x?p:x,x=r>x?r:x,x=t>x?t:x,x=v>x?v:x;var A=this._bounds;return A.x=y,A.width=w-y,A.y=z,A.height=x-z,this._currentBounds=A,A},b.Sprite.prototype._renderWebGL=function(a){if(this.visible&&!(this.alpha<=0)){var b,c;if(this._mask||this._filters){var d=a.spriteBatch;for(this._filters&&(d.flush(),a.filterManager.pushFilter(this._filterBlock)),this._mask&&(d.stop(),a.maskManager.pushMask(this.mask,a),d.start()),d.render(this),b=0,c=this.children.length;c>b;b++)this.children[b]._renderWebGL(a);d.stop(),this._mask&&a.maskManager.popMask(this._mask,a),this._filters&&a.filterManager.popFilter(),d.start()}else for(a.spriteBatch.render(this),b=0,c=this.children.length;c>b;b++)this.children[b]._renderWebGL(a)}},b.Sprite.prototype._renderCanvas=function(a){if(!(this.visible===!1||0===this.alpha||this.texture.crop.width<=0||this.texture.crop.height<=0)){if(this.blendMode!==a.currentBlendMode&&(a.currentBlendMode=this.blendMode,a.context.globalCompositeOperation=b.blendModesCanvas[a.currentBlendMode]),this._mask&&a.maskManager.pushMask(this._mask,a),this.texture.valid){var c=this.texture.baseTexture.resolution/a.resolution;a.context.globalAlpha=this.worldAlpha,a.roundPixels?a.context.setTransform(this.worldTransform.a,this.worldTransform.b,this.worldTransform.c,this.worldTransform.d,this.worldTransform.tx*a.resolution|0,this.worldTransform.ty*a.resolution|0):a.context.setTransform(this.worldTransform.a,this.worldTransform.b,this.worldTransform.c,this.worldTransform.d,this.worldTransform.tx*a.resolution,this.worldTransform.ty*a.resolution),a.smoothProperty&&a.scaleMode!==this.texture.baseTexture.scaleMode&&(a.scaleMode=this.texture.baseTexture.scaleMode,a.context[a.smoothProperty]=a.scaleMode===b.scaleModes.LINEAR);var d=this.texture.trim?this.texture.trim.x-this.anchor.x*this.texture.trim.width:this.anchor.x*-this.texture.frame.width,e=this.texture.trim?this.texture.trim.y-this.anchor.y*this.texture.trim.height:this.anchor.y*-this.texture.frame.height;16777215!==this.tint?(this.cachedTint!==this.tint&&(this.cachedTint=this.tint,this.tintedTexture=b.CanvasTinter.getTintedTexture(this,this.tint)),a.context.drawImage(this.tintedTexture,0,0,this.texture.crop.width,this.texture.crop.height,d/c,e/c,this.texture.crop.width/c,this.texture.crop.height/c)):a.context.drawImage(this.texture.baseTexture.source,this.texture.crop.x,this.texture.crop.y,this.texture.crop.width,this.texture.crop.height,d/c,e/c,this.texture.crop.width/c,this.texture.crop.height/c)}for(var f=0,g=this.children.length;g>f;f++)this.children[f]._renderCanvas(a);this._mask&&a.maskManager.popMask(a)}},b.Sprite.fromFrame=function(a){var c=b.TextureCache[a];if(!c)throw new Error('The frameId "'+a+'" does not exist in the texture cache'+this);return new b.Sprite(c)},b.Sprite.fromImage=function(a,c,d){var e=b.Texture.fromImage(a,c,d);return new b.Sprite(e)},b.SpriteBatch=function(a){b.DisplayObjectContainer.call(this),this.textureThing=a,this.ready=!1},b.SpriteBatch.prototype=Object.create(b.DisplayObjectContainer.prototype),b.SpriteBatch.prototype.constructor=b.SpriteBatch,b.SpriteBatch.prototype.initWebGL=function(a){this.fastSpriteBatch=new b.WebGLFastSpriteBatch(a),this.ready=!0},b.SpriteBatch.prototype.updateTransform=function(){b.DisplayObject.prototype.updateTransform.call(this)},b.SpriteBatch.prototype._renderWebGL=function(a){!this.visible||this.alpha<=0||!this.children.length||(this.ready||this.initWebGL(a.gl),a.spriteBatch.stop(),a.shaderManager.setShader(a.shaderManager.fastShader),this.fastSpriteBatch.begin(this,a),this.fastSpriteBatch.render(this),a.spriteBatch.start())},b.SpriteBatch.prototype._renderCanvas=function(a){if(this.visible&&!(this.alpha<=0)&&this.children.length){var c=a.context;c.globalAlpha=this.worldAlpha,b.DisplayObject.prototype.updateTransform.call(this);for(var d=this.worldTransform,e=!0,f=0;f=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},b.MovieClip.fromFrames=function(a){for(var c=[],d=0;di;i++){for(j=0;m>j;j+=4)if(255!==k[n+j]){o=!0;break}if(o)break;n+=m}for(c.ascent=g-i,n=l-m,o=!1,i=h;i>g;i--){for(j=0;m>j;j+=4)if(255!==k[n+j]){o=!0;break}if(o)break;n-=m}c.descent=i-g,c.fontSize=c.ascent+c.descent,b.Text.fontPropertiesCache[a]=c}return c},b.Text.prototype.wordWrap=function(a){for(var b="",c=a.split("\n"),d=0;de?(g>0&&(b+="\n"),b+=f[g],e=this.style.wordWrapWidth-h):(e-=i,b+=" "+f[g])}d=2?parseInt(c[c.length-2],10):b.BitmapText.fonts[this.fontName].size,this.dirty=!0,this.tint=a.tint},b.BitmapText.prototype.updateText=function(){for(var a=b.BitmapText.fonts[this.fontName],c=new b.Point,d=null,e=[],f=0,g=[],h=0,i=this.fontSize/a.size,j=0;j=j;j++){var n=0;"right"===this.style.align?n=f-g[j]:"center"===this.style.align&&(n=(f-g[j])/2),m.push(n)}var o=this.children.length,p=e.length,q=this.tint||16777215;for(j=0;p>j;j++){var r=o>j?this.children[j]:this._pool.pop();r?r.setTexture(e[j].texture):r=new b.Sprite(e[j].texture),r.position.x=(e[j].position.x+m[e[j].line])*i,r.position.y=e[j].position.y*i,r.scale.x=r.scale.y=i,r.tint=q,r.parent||this.addChild(r)}for(;this.children.length>p;){var s=this.getChildAt(this.children.length-1);this._pool.push(s),this.removeChild(s)}this.textWidth=f*i,this.textHeight=(c.y+a.lineHeight)*i},b.BitmapText.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),b.DisplayObjectContainer.prototype.updateTransform.call(this)},b.BitmapText.fonts={},b.InteractionData=function(){this.global=new b.Point,this.target=null,this.originalEvent=null},b.InteractionData.prototype.getLocalPosition=function(a,c){var d=a.worldTransform,e=this.global,f=d.a,g=d.b,h=d.tx,i=d.c,j=d.d,k=d.ty,l=1/(f*j+g*-i);return c=c||new b.Point,c.x=j*l*e.x+-g*l*e.y+(k*g-h*j)*l,c.y=f*l*e.y+-i*l*e.x+(-k*f+h*i)*l,c},b.InteractionData.prototype.constructor=b.InteractionData,b.InteractionManager=function(a){this.stage=a,this.mouse=new b.InteractionData,this.touches={},this.tempPoint=new b.Point,this.mouseoverEnabled=!0,this.pool=[],this.interactiveItems=[],this.interactionDOMElement=null,this.onMouseMove=this.onMouseMove.bind(this),this.onMouseDown=this.onMouseDown.bind(this),this.onMouseOut=this.onMouseOut.bind(this),this.onMouseUp=this.onMouseUp.bind(this),this.onTouchStart=this.onTouchStart.bind(this),this.onTouchEnd=this.onTouchEnd.bind(this),this.onTouchMove=this.onTouchMove.bind(this),this.last=0,this.currentCursorStyle="inherit",this.mouseOut=!1,this.resolution=1},b.InteractionManager.prototype.constructor=b.InteractionManager,b.InteractionManager.prototype.collectInteractiveSprite=function(a,b){for(var c=a.children,d=c.length,e=d-1;e>=0;e--){var f=c[e];f._interactive?(b.interactiveChildren=!0,this.interactiveItems.push(f),f.children.length>0&&this.collectInteractiveSprite(f,f)):(f.__iParent=null,f.children.length>0&&this.collectInteractiveSprite(f,b))}},b.InteractionManager.prototype.setTarget=function(a){this.target=a,this.resolution=a.resolution,null===this.interactionDOMElement&&this.setTargetDomElement(a.view)},b.InteractionManager.prototype.setTargetDomElement=function(a){this.removeEvents(),window.navigator.msPointerEnabled&&(a.style["-ms-content-zooming"]="none",a.style["-ms-touch-action"]="none"),this.interactionDOMElement=a,a.addEventListener("mousemove",this.onMouseMove,!0),a.addEventListener("mousedown",this.onMouseDown,!0),a.addEventListener("mouseout",this.onMouseOut,!0),a.addEventListener("touchstart",this.onTouchStart,!0),a.addEventListener("touchend",this.onTouchEnd,!0),a.addEventListener("touchmove",this.onTouchMove,!0),window.addEventListener("mouseup",this.onMouseUp,!0) +},b.InteractionManager.prototype.removeEvents=function(){this.interactionDOMElement&&(this.interactionDOMElement.style["-ms-content-zooming"]="",this.interactionDOMElement.style["-ms-touch-action"]="",this.interactionDOMElement.removeEventListener("mousemove",this.onMouseMove,!0),this.interactionDOMElement.removeEventListener("mousedown",this.onMouseDown,!0),this.interactionDOMElement.removeEventListener("mouseout",this.onMouseOut,!0),this.interactionDOMElement.removeEventListener("touchstart",this.onTouchStart,!0),this.interactionDOMElement.removeEventListener("touchend",this.onTouchEnd,!0),this.interactionDOMElement.removeEventListener("touchmove",this.onTouchMove,!0),this.interactionDOMElement=null,window.removeEventListener("mouseup",this.onMouseUp,!0))},b.InteractionManager.prototype.update=function(){if(this.target){var a=Date.now(),c=a-this.last;if(c=c*b.INTERACTION_FREQUENCY/1e3,!(1>c)){this.last=a;var d=0;this.dirty&&this.rebuildInteractiveGraph();var e=this.interactiveItems.length,f="inherit",g=!1;for(d=0;e>d;d++){var h=this.interactiveItems[d];h.__hit=this.hitTest(h,this.mouse),this.mouse.target=h,h.__hit&&!g?(h.buttonMode&&(f=h.defaultCursor),h.interactiveChildren||(g=!0),h.__isOver||(h.mouseover&&h.mouseover(this.mouse),h.__isOver=!0)):h.__isOver&&(h.mouseout&&h.mouseout(this.mouse),h.__isOver=!1)}this.currentCursorStyle!==f&&(this.currentCursorStyle=f,this.interactionDOMElement.style.cursor=f)}}},b.InteractionManager.prototype.rebuildInteractiveGraph=function(){this.dirty=!1;for(var a=this.interactiveItems.length,b=0;a>b;b++)this.interactiveItems[b].interactiveChildren=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)},b.InteractionManager.prototype.onMouseMove=function(a){this.dirty&&this.rebuildInteractiveGraph(),this.mouse.originalEvent=a;var b=this.interactionDOMElement.getBoundingClientRect();this.mouse.global.x=(a.clientX-b.left)*(this.target.width/b.width)/this.resolution,this.mouse.global.y=(a.clientY-b.top)*(this.target.height/b.height)/this.resolution;for(var c=this.interactiveItems.length,d=0;c>d;d++){var e=this.interactiveItems[d];e.mousemove&&e.mousemove(this.mouse)}},b.InteractionManager.prototype.onMouseDown=function(a){this.dirty&&this.rebuildInteractiveGraph(),this.mouse.originalEvent=a,b.AUTO_PREVENT_DEFAULT&&this.mouse.originalEvent.preventDefault();for(var c=this.interactiveItems.length,d=this.mouse.originalEvent,e=2===d.button||3===d.which,f=e?"rightdown":"mousedown",g=e?"rightclick":"click",h=e?"__rightIsDown":"__mouseIsDown",i=e?"__isRightDown":"__isDown",j=0;c>j;j++){var k=this.interactiveItems[j];if((k[f]||k[g])&&(k[h]=!0,k.__hit=this.hitTest(k,this.mouse),k.__hit&&(k[f]&&k[f](this.mouse),k[i]=!0,!k.interactiveChildren)))break}},b.InteractionManager.prototype.onMouseOut=function(a){this.dirty&&this.rebuildInteractiveGraph(),this.mouse.originalEvent=a;var b=this.interactiveItems.length;this.interactionDOMElement.style.cursor="inherit";for(var c=0;b>c;c++){var d=this.interactiveItems[c];d.__isOver&&(this.mouse.target=d,d.mouseout&&d.mouseout(this.mouse),d.__isOver=!1)}this.mouseOut=!0,this.mouse.global.x=-1e4,this.mouse.global.y=-1e4},b.InteractionManager.prototype.onMouseUp=function(a){this.dirty&&this.rebuildInteractiveGraph(),this.mouse.originalEvent=a;for(var b=this.interactiveItems.length,c=!1,d=this.mouse.originalEvent,e=2===d.button||3===d.which,f=e?"rightup":"mouseup",g=e?"rightclick":"click",h=e?"rightupoutside":"mouseupoutside",i=e?"__isRightDown":"__isDown",j=0;b>j;j++){var k=this.interactiveItems[j];(k[g]||k[f]||k[h])&&(k.__hit=this.hitTest(k,this.mouse),k.__hit&&!c?(k[f]&&k[f](this.mouse),k[i]&&k[g]&&k[g](this.mouse),k.interactiveChildren||(c=!0)):k[i]&&k[h]&&k[h](this.mouse),k[i]=!1)}},b.InteractionManager.prototype.hitTest=function(a,c){var d=c.global;if(!a.worldVisible)return!1;var e,f=a.worldTransform,g=f.a,h=f.b,i=f.c,j=f.tx,k=f.d,l=f.ty,m=1/(g*k+i*-h),n=k*m*d.x+-i*m*d.y+(l*i-j*k)*m,o=g*m*d.y+-h*m*d.x+(-l*g+j*h)*m;if(c.target=a,a.hitArea&&a.hitArea.contains)return a.hitArea.contains(n,o)?(c.target=a,!0):!1;if(a instanceof b.Sprite){var p,q=a.texture.frame.width,r=a.texture.frame.height,s=-q*a.anchor.x;if(n>s&&s+q>n&&(p=-r*a.anchor.y,o>p&&p+r>o))return c.target=a,!0}else if(a instanceof b.Graphics){var t=a.graphicsData;for(e=0;ee;e++){var w=a.children[e],x=this.hitTest(w,c);if(x)return c.target=a,!0}return!1},b.InteractionManager.prototype.onTouchMove=function(a){this.dirty&&this.rebuildInteractiveGraph();var b,c=this.interactionDOMElement.getBoundingClientRect(),d=a.changedTouches,e=0;for(e=0;ei;i++){var j=this.interactiveItems[i];if((j.touchstart||j.tap)&&(j.__hit=this.hitTest(j,g),j.__hit&&(j.touchstart&&j.touchstart(g),j.__isDown=!0,j.__touchData=j.__touchData||{},j.__touchData[f.identifier]=g,!j.interactiveChildren)))break}}},b.InteractionManager.prototype.onTouchEnd=function(a){this.dirty&&this.rebuildInteractiveGraph();for(var b=this.interactionDOMElement.getBoundingClientRect(),c=a.changedTouches,d=0;di;i++){var j=this.interactiveItems[i];j.__touchData&&j.__touchData[e.identifier]&&(j.__hit=this.hitTest(j,j.__touchData[e.identifier]),f.originalEvent=a,(j.touchend||j.tap)&&(j.__hit&&!g?(j.touchend&&j.touchend(f),j.__isDown&&j.tap&&j.tap(f),j.interactiveChildren||(g=!0)):j.__isDown&&j.touchendoutside&&j.touchendoutside(f),j.__isDown=!1),j.__touchData[e.identifier]=null)}this.pool.push(f),this.touches[e.identifier]=null}},b.Stage=function(a){b.DisplayObjectContainer.call(this),this.worldTransform=new b.Matrix,this.interactive=!0,this.interactionManager=new b.InteractionManager(this),this.dirty=!0,this.stage=this,this.stage.hitArea=new b.Rectangle(0,0,1e5,1e5),this.setBackgroundColor(a)},b.Stage.prototype=Object.create(b.DisplayObjectContainer.prototype),b.Stage.prototype.constructor=b.Stage,b.Stage.prototype.setInteractionDelegate=function(a){this.interactionManager.setTargetDomElement(a)},b.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var a=0,b=this.children.length;b>a;a++)this.children[a].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},b.Stage.prototype.setBackgroundColor=function(a){this.backgroundColor=a||0,this.backgroundColorSplit=b.hex2rgb(this.backgroundColor);var c=this.backgroundColor.toString(16);c="000000".substr(0,6-c.length)+c,this.backgroundColorString="#"+c},b.Stage.prototype.getMousePosition=function(){return this.interactionManager.mouse.global},function(a){for(var b=0,c=["ms","moz","webkit","o"],d=0;d>16&255)/255,(a>>8&255)/255,(255&a)/255]},b.rgb2hex=function(a){return(255*a[0]<<16)+(255*a[1]<<8)+255*a[2]},"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){return function(a){function b(){for(var d=arguments.length,f=new Array(d);d--;)f[d]=arguments[d];return f=e.concat(f),c.apply(this instanceof b?this:a,f)}var c=this,d=arguments.length-1,e=[];if(d>0)for(e.length=d;d--;)e[d]=arguments[d+1];if("function"!=typeof c)throw new TypeError;return b.prototype=function f(a){return a&&(f.prototype=a),this instanceof f?void 0:new f}(c.prototype),b}}()),b.AjaxRequest=function(){var a=["Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.3.0","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new window.XMLHttpRequest:!1;for(var b=0;b0&&0===(a&a-1))return a;for(var b=1;a>b;)b<<=1;return b},b.EventTarget={call:function(a){a&&(a=a.prototype||a,b.EventTarget.mixin(a))},mixin:function(a){a.listeners=function(a){return this._listeners=this._listeners||{},this._listeners[a]?this._listeners[a].slice():[]},a.emit=a.dispatchEvent=function(a,c){if(this._listeners=this._listeners||{},"object"==typeof a&&(c=a,a=a.type),c&&c.__isEventObject===!0||(c=new b.Event(this,a,c)),this._listeners&&this._listeners[a]){var d,e=this._listeners[a],f=e.length,g=e[0];for(d=0;f>d;g=e[++d])if(g.call(this,c),c.stoppedImmediate)return this;if(c.stopped)return this}return this.parent&&this.parent.emit&&this.parent.emit.call(this.parent,a,c),this},a.on=a.addEventListener=function(a,b){return this._listeners=this._listeners||{},(this._listeners[a]=this._listeners[a]||[]).push(b),this},a.once=function(a,b){function c(){b.apply(d.off(a,c),arguments)}this._listeners=this._listeners||{};var d=this;return c._originalHandler=b,this.on(a,c)},a.off=a.removeEventListener=function(a,b){if(this._listeners=this._listeners||{},!this._listeners[a])return this;for(var c=this._listeners[a],d=b?c.length:0;d-->0;)(c[d]===b||c[d]._originalHandler===b)&&c.splice(d,1);return 0===c.length&&delete this._listeners[a],this},a.removeAllListeners=function(a){return this._listeners=this._listeners||{},this._listeners[a]?(delete this._listeners[a],this):this}}},b.Event=function(a,b,c){this.__isEventObject=!0,this.stopped=!1,this.stoppedImmediate=!1,this.target=a,this.type=b,this.data=c,this.content=c,this.timeStamp=Date.now()},b.Event.prototype.stopPropagation=function(){this.stopped=!0},b.Event.prototype.stopImmediatePropagation=function(){this.stoppedImmediate=!0},b.autoDetectRenderer=function(a,c,d){a||(a=800),c||(c=600);var e=function(){try{var a=document.createElement("canvas");return!!window.WebGLRenderingContext&&(a.getContext("webgl")||a.getContext("experimental-webgl"))}catch(b){return!1}}();return e?new b.WebGLRenderer(a,c,d):new b.CanvasRenderer(a,c,d)},b.autoDetectRecommendedRenderer=function(a,c,d){a||(a=800),c||(c=600);var e=function(){try{var a=document.createElement("canvas");return!!window.WebGLRenderingContext&&(a.getContext("webgl")||a.getContext("experimental-webgl"))}catch(b){return!1}}(),f=/Android/i.test(navigator.userAgent);return e&&!f?new b.WebGLRenderer(a,c,d):new b.CanvasRenderer(a,c,d)},b.PolyK={},b.PolyK.Triangulate=function(a){var c=!0,d=a.length>>1;if(3>d)return[];for(var e=[],f=[],g=0;d>g;g++)f.push(g);g=0;for(var h=d;h>3;){var i=f[(g+0)%h],j=f[(g+1)%h],k=f[(g+2)%h],l=a[2*i],m=a[2*i+1],n=a[2*j],o=a[2*j+1],p=a[2*k],q=a[2*k+1],r=!1;if(b.PolyK._convex(l,m,n,o,p,q,c)){r=!0;for(var s=0;h>s;s++){var t=f[s];if(t!==i&&t!==j&&t!==k&&b.PolyK._PointInTriangle(a[2*t],a[2*t+1],l,m,n,o,p,q)){r=!1;break}}}if(r)e.push(i,j,k),f.splice((g+1)%h,1),h--,g=0;else if(g++>3*h){if(!c)return window.console.log("PIXI Warning: shape too complex to fill"),[];for(e=[],f=[],g=0;d>g;g++)f.push(g);g=0,h=d,c=!1}}return e.push(f[0],f[1],f[2]),e},b.PolyK._PointInTriangle=function(a,b,c,d,e,f,g,h){var i=g-c,j=h-d,k=e-c,l=f-d,m=a-c,n=b-d,o=i*i+j*j,p=i*k+j*l,q=i*m+j*n,r=k*k+l*l,s=k*m+l*n,t=1/(o*r-p*p),u=(r*q-p*s)*t,v=(o*s-p*q)*t;return u>=0&&v>=0&&1>u+v},b.PolyK._convex=function(a,b,c,d,e,f,g){return(b-d)*(e-c)+(c-a)*(f-d)>=0===g},b.initDefaultShaders=function(){},b.CompileVertexShader=function(a,c){return b._CompileShader(a,c,a.VERTEX_SHADER)},b.CompileFragmentShader=function(a,c){return b._CompileShader(a,c,a.FRAGMENT_SHADER)},b._CompileShader=function(a,b,c){var d=b.join("\n"),e=a.createShader(c);return a.shaderSource(e,d),a.compileShader(e),a.getShaderParameter(e,a.COMPILE_STATUS)?e:(window.console.log(a.getShaderInfoLog(e)),null)},b.compileProgram=function(a,c,d){var e=b.CompileFragmentShader(a,d),f=b.CompileVertexShader(a,c),g=a.createProgram();return a.attachShader(g,f),a.attachShader(g,e),a.linkProgram(g),a.getProgramParameter(g,a.LINK_STATUS)||window.console.log("Could not initialise shaders"),g},b.PixiShader=function(a){this._UID=b._UID++,this.gl=a,this.program=null,this.fragmentSrc=["precision lowp float;","varying vec2 vTextureCoord;","varying vec4 vColor;","uniform sampler2D uSampler;","void main(void) {"," gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;","}"],this.textureCount=0,this.firstRun=!0,this.dirty=!0,this.attributes=[],this.init()},b.PixiShader.prototype.constructor=b.PixiShader,b.PixiShader.prototype.init=function(){var a=this.gl,c=b.compileProgram(a,this.vertexSrc||b.PixiShader.defaultVertexSrc,this.fragmentSrc);a.useProgram(c),this.uSampler=a.getUniformLocation(c,"uSampler"),this.projectionVector=a.getUniformLocation(c,"projectionVector"),this.offsetVector=a.getUniformLocation(c,"offsetVector"),this.dimensions=a.getUniformLocation(c,"dimensions"),this.aVertexPosition=a.getAttribLocation(c,"aVertexPosition"),this.aTextureCoord=a.getAttribLocation(c,"aTextureCoord"),this.colorAttribute=a.getAttribLocation(c,"aColor"),-1===this.colorAttribute&&(this.colorAttribute=2),this.attributes=[this.aVertexPosition,this.aTextureCoord,this.colorAttribute];for(var d in this.uniforms)this.uniforms[d].uniformLocation=a.getUniformLocation(c,d);this.initUniforms(),this.program=c},b.PixiShader.prototype.initUniforms=function(){this.textureCount=1;var a,b=this.gl;for(var c in this.uniforms){a=this.uniforms[c];var d=a.type;"sampler2D"===d?(a._init=!1,null!==a.value&&this.initSampler2D(a)):"mat2"===d||"mat3"===d||"mat4"===d?(a.glMatrix=!0,a.glValueLength=1,"mat2"===d?a.glFunc=b.uniformMatrix2fv:"mat3"===d?a.glFunc=b.uniformMatrix3fv:"mat4"===d&&(a.glFunc=b.uniformMatrix4fv)):(a.glFunc=b["uniform"+d],a.glValueLength="2f"===d||"2i"===d?2:"3f"===d||"3i"===d?3:"4f"===d||"4i"===d?4:1)}},b.PixiShader.prototype.initSampler2D=function(a){if(a.value&&a.value.baseTexture&&a.value.baseTexture.hasLoaded){var b=this.gl;if(b.activeTexture(b["TEXTURE"+this.textureCount]),b.bindTexture(b.TEXTURE_2D,a.value.baseTexture._glTextures[b.id]),a.textureData){var c=a.textureData,d=c.magFilter?c.magFilter:b.LINEAR,e=c.minFilter?c.minFilter:b.LINEAR,f=c.wrapS?c.wrapS:b.CLAMP_TO_EDGE,g=c.wrapT?c.wrapT:b.CLAMP_TO_EDGE,h=c.luminance?b.LUMINANCE:b.RGBA;if(c.repeat&&(f=b.REPEAT,g=b.REPEAT),b.pixelStorei(b.UNPACK_FLIP_Y_WEBGL,!!c.flipY),c.width){var i=c.width?c.width:512,j=c.height?c.height:2,k=c.border?c.border:0;b.texImage2D(b.TEXTURE_2D,0,h,i,j,k,h,b.UNSIGNED_BYTE,null)}else b.texImage2D(b.TEXTURE_2D,0,h,b.RGBA,b.UNSIGNED_BYTE,a.value.baseTexture.source);b.texParameteri(b.TEXTURE_2D,b.TEXTURE_MAG_FILTER,d),b.texParameteri(b.TEXTURE_2D,b.TEXTURE_MIN_FILTER,e),b.texParameteri(b.TEXTURE_2D,b.TEXTURE_WRAP_S,f),b.texParameteri(b.TEXTURE_2D,b.TEXTURE_WRAP_T,g)}b.uniform1i(a.uniformLocation,this.textureCount),a._init=!0,this.textureCount++}},b.PixiShader.prototype.syncUniforms=function(){this.textureCount=1;var a,c=this.gl;for(var d in this.uniforms)a=this.uniforms[d],1===a.glValueLength?a.glMatrix===!0?a.glFunc.call(c,a.uniformLocation,a.transpose,a.value):a.glFunc.call(c,a.uniformLocation,a.value):2===a.glValueLength?a.glFunc.call(c,a.uniformLocation,a.value.x,a.value.y):3===a.glValueLength?a.glFunc.call(c,a.uniformLocation,a.value.x,a.value.y,a.value.z):4===a.glValueLength?a.glFunc.call(c,a.uniformLocation,a.value.x,a.value.y,a.value.z,a.value.w):"sampler2D"===a.type&&(a._init?(c.activeTexture(c["TEXTURE"+this.textureCount]),a.value.baseTexture._dirty[c.id]?b.defaultRenderer.updateTexture(a.value.baseTexture):c.bindTexture(c.TEXTURE_2D,a.value.baseTexture._glTextures[c.id]),c.uniform1i(a.uniformLocation,this.textureCount),this.textureCount++):this.initSampler2D(a))},b.PixiShader.prototype.destroy=function(){this.gl.deleteProgram(this.program),this.uniforms=null,this.gl=null,this.attributes=null},b.PixiShader.defaultVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute vec4 aColor;","uniform vec2 projectionVector;","uniform vec2 offsetVector;","varying vec2 vTextureCoord;","varying vec4 vColor;","const vec2 center = vec2(-1.0, 1.0);","void main(void) {"," gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);"," vTextureCoord = aTextureCoord;"," vec3 color = mod(vec3(aColor.y/65536.0, aColor.y/256.0, aColor.y), 256.0) / 256.0;"," vColor = vec4(color * aColor.x, aColor.x);","}"],b.PixiFastShader=function(a){this._UID=b._UID++,this.gl=a,this.program=null,this.fragmentSrc=["precision lowp float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {"," gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;","}"],this.vertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aPositionCoord;","attribute vec2 aScale;","attribute float aRotation;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform vec2 projectionVector;","uniform vec2 offsetVector;","uniform mat3 uMatrix;","varying vec2 vTextureCoord;","varying float vColor;","const vec2 center = vec2(-1.0, 1.0);","void main(void) {"," vec2 v;"," vec2 sv = aVertexPosition * aScale;"," v.x = (sv.x) * cos(aRotation) - (sv.y) * sin(aRotation);"," v.y = (sv.x) * sin(aRotation) + (sv.y) * cos(aRotation);"," v = ( uMatrix * vec3(v + aPositionCoord , 1.0) ).xy ;"," gl_Position = vec4( ( v / projectionVector) + center , 0.0, 1.0);"," vTextureCoord = aTextureCoord;"," vColor = aColor;","}"],this.textureCount=0,this.init()},b.PixiFastShader.prototype.constructor=b.PixiFastShader,b.PixiFastShader.prototype.init=function(){var a=this.gl,c=b.compileProgram(a,this.vertexSrc,this.fragmentSrc);a.useProgram(c),this.uSampler=a.getUniformLocation(c,"uSampler"),this.projectionVector=a.getUniformLocation(c,"projectionVector"),this.offsetVector=a.getUniformLocation(c,"offsetVector"),this.dimensions=a.getUniformLocation(c,"dimensions"),this.uMatrix=a.getUniformLocation(c,"uMatrix"),this.aVertexPosition=a.getAttribLocation(c,"aVertexPosition"),this.aPositionCoord=a.getAttribLocation(c,"aPositionCoord"),this.aScale=a.getAttribLocation(c,"aScale"),this.aRotation=a.getAttribLocation(c,"aRotation"),this.aTextureCoord=a.getAttribLocation(c,"aTextureCoord"),this.colorAttribute=a.getAttribLocation(c,"aColor"),-1===this.colorAttribute&&(this.colorAttribute=2),this.attributes=[this.aVertexPosition,this.aPositionCoord,this.aScale,this.aRotation,this.aTextureCoord,this.colorAttribute],this.program=c},b.PixiFastShader.prototype.destroy=function(){this.gl.deleteProgram(this.program),this.uniforms=null,this.gl=null,this.attributes=null},b.StripShader=function(a){this._UID=b._UID++,this.gl=a,this.program=null,this.fragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","uniform float alpha;","uniform sampler2D uSampler;","void main(void) {"," gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","}"],this.vertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","uniform mat3 translationMatrix;","uniform vec2 projectionVector;","uniform vec2 offsetVector;","varying vec2 vTextureCoord;","void main(void) {"," vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);"," v -= offsetVector.xyx;"," gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);"," vTextureCoord = aTextureCoord;","}"],this.init()},b.StripShader.prototype.constructor=b.StripShader,b.StripShader.prototype.init=function(){var a=this.gl,c=b.compileProgram(a,this.vertexSrc,this.fragmentSrc);a.useProgram(c),this.uSampler=a.getUniformLocation(c,"uSampler"),this.projectionVector=a.getUniformLocation(c,"projectionVector"),this.offsetVector=a.getUniformLocation(c,"offsetVector"),this.colorAttribute=a.getAttribLocation(c,"aColor"),this.aVertexPosition=a.getAttribLocation(c,"aVertexPosition"),this.aTextureCoord=a.getAttribLocation(c,"aTextureCoord"),this.attributes=[this.aVertexPosition,this.aTextureCoord],this.translationMatrix=a.getUniformLocation(c,"translationMatrix"),this.alpha=a.getUniformLocation(c,"alpha"),this.program=c},b.StripShader.prototype.destroy=function(){this.gl.deleteProgram(this.program),this.uniforms=null,this.gl=null,this.attribute=null},b.PrimitiveShader=function(a){this._UID=b._UID++,this.gl=a,this.program=null,this.fragmentSrc=["precision mediump float;","varying vec4 vColor;","void main(void) {"," gl_FragColor = vColor;","}"],this.vertexSrc=["attribute vec2 aVertexPosition;","attribute vec4 aColor;","uniform mat3 translationMatrix;","uniform vec2 projectionVector;","uniform vec2 offsetVector;","uniform float alpha;","uniform vec3 tint;","varying vec4 vColor;","void main(void) {"," vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);"," v -= offsetVector.xyx;"," gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);"," vColor = aColor * vec4(tint * alpha, alpha);","}"],this.init()},b.PrimitiveShader.prototype.constructor=b.PrimitiveShader,b.PrimitiveShader.prototype.init=function(){var a=this.gl,c=b.compileProgram(a,this.vertexSrc,this.fragmentSrc);a.useProgram(c),this.projectionVector=a.getUniformLocation(c,"projectionVector"),this.offsetVector=a.getUniformLocation(c,"offsetVector"),this.tintColor=a.getUniformLocation(c,"tint"),this.aVertexPosition=a.getAttribLocation(c,"aVertexPosition"),this.colorAttribute=a.getAttribLocation(c,"aColor"),this.attributes=[this.aVertexPosition,this.colorAttribute],this.translationMatrix=a.getUniformLocation(c,"translationMatrix"),this.alpha=a.getUniformLocation(c,"alpha"),this.program=c},b.PrimitiveShader.prototype.destroy=function(){this.gl.deleteProgram(this.program),this.uniforms=null,this.gl=null,this.attributes=null},b.ComplexPrimitiveShader=function(a){this._UID=b._UID++,this.gl=a,this.program=null,this.fragmentSrc=["precision mediump float;","varying vec4 vColor;","void main(void) {"," gl_FragColor = vColor;","}"],this.vertexSrc=["attribute vec2 aVertexPosition;","uniform mat3 translationMatrix;","uniform vec2 projectionVector;","uniform vec2 offsetVector;","uniform vec3 tint;","uniform float alpha;","uniform vec3 color;","varying vec4 vColor;","void main(void) {"," vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);"," v -= offsetVector.xyx;"," gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);"," vColor = vec4(color * alpha * tint, alpha);","}"],this.init()},b.ComplexPrimitiveShader.prototype.constructor=b.ComplexPrimitiveShader,b.ComplexPrimitiveShader.prototype.init=function(){var a=this.gl,c=b.compileProgram(a,this.vertexSrc,this.fragmentSrc);a.useProgram(c),this.projectionVector=a.getUniformLocation(c,"projectionVector"),this.offsetVector=a.getUniformLocation(c,"offsetVector"),this.tintColor=a.getUniformLocation(c,"tint"),this.color=a.getUniformLocation(c,"color"),this.aVertexPosition=a.getAttribLocation(c,"aVertexPosition"),this.attributes=[this.aVertexPosition,this.colorAttribute],this.translationMatrix=a.getUniformLocation(c,"translationMatrix"),this.alpha=a.getUniformLocation(c,"alpha"),this.program=c},b.ComplexPrimitiveShader.prototype.destroy=function(){this.gl.deleteProgram(this.program),this.uniforms=null,this.gl=null,this.attribute=null},b.WebGLGraphics=function(){},b.WebGLGraphics.renderGraphics=function(a,c){var d,e=c.gl,f=c.projection,g=c.offset,h=c.shaderManager.primitiveShader;a.dirty&&b.WebGLGraphics.updateGraphics(a,e);for(var i=a._webGL[e.id],j=0;j=6&&(h.points.length>10?(g=b.WebGLGraphics.switchMode(d,1),b.WebGLGraphics.buildComplexPoly(h,g)):(g=b.WebGLGraphics.switchMode(d,0),b.WebGLGraphics.buildPoly(h,g))),h.lineWidth>0&&(g=b.WebGLGraphics.switchMode(d,0),b.WebGLGraphics.buildLine(h,g))):(g=b.WebGLGraphics.switchMode(d,0),h.type===b.Graphics.RECT?b.WebGLGraphics.buildRectangle(h,g):h.type===b.Graphics.CIRC||h.type===b.Graphics.ELIP?b.WebGLGraphics.buildCircle(h,g):h.type===b.Graphics.RREC&&b.WebGLGraphics.buildRoundedRectangle(h,g)),d.lastIndex++}for(e=0;e=q;q++)p=q/n,h=g(a,c,p),i=g(b,d,p),j=g(c,e,p),k=g(d,f,p),l=g(h,j,p),m=g(i,k,p),o.push(l,m);return o},b.WebGLGraphics.buildCircle=function(a,c){var d,e,f=a.shape,g=f.x,h=f.y;a.type===b.Graphics.CIRC?(d=f.radius,e=f.radius):(d=f.width,e=f.height);var i=40,j=2*Math.PI/i,k=0;if(a.fill){var l=b.hex2rgb(a.fillColor),m=a.fillAlpha,n=l[0]*m,o=l[1]*m,p=l[2]*m,q=c.points,r=c.indices,s=q.length/6;for(r.push(s),k=0;i+1>k;k++)q.push(g,h,n,o,p,m),q.push(g+Math.sin(j*k)*d,h+Math.cos(j*k)*e,n,o,p,m),r.push(s++,s++);r.push(s-1)}if(a.lineWidth){var t=a.points;for(a.points=[],k=0;i+1>k;k++)a.points.push(g+Math.sin(j*k)*d,h+Math.cos(j*k)*e);b.WebGLGraphics.buildLine(a,c),a.points=t}},b.WebGLGraphics.buildLine=function(a,c){var d=0,e=a.points;if(0!==e.length){if(a.lineWidth%2)for(d=0;dd;d++)l=e[2*(d-1)],m=e[2*(d-1)+1],n=e[2*d],o=e[2*d+1],p=e[2*(d+1)],q=e[2*(d+1)+1],r=-(m-o),s=l-n,F=Math.sqrt(r*r+s*s),r/=F,s/=F,r*=L,s*=L,t=-(o-q),u=n-p,F=Math.sqrt(t*t+u*u),t/=F,u/=F,t*=L,u*=L,x=-s+m-(-s+o),y=-r+n-(-r+l),z=(-r+l)*(-s+o)-(-r+n)*(-s+m),A=-u+q-(-u+o),B=-t+n-(-t+p),C=(-t+p)*(-u+o)-(-t+n)*(-u+q),D=x*B-A*y,Math.abs(D)<.1?(D+=10.1,G.push(n-r,o-s,O,P,Q,N),G.push(n+r,o+s,O,P,Q,N)):(j=(y*C-B*z)/D,k=(A*z-x*C)/D,E=(j-n)*(j-n)+(k-o)+(k-o),E>19600?(v=r-t,w=s-u,F=Math.sqrt(v*v+w*w),v/=F,w/=F,v*=L,w*=L,G.push(n-v,o-w),G.push(O,P,Q,N),G.push(n+v,o+w),G.push(O,P,Q,N),G.push(n-v,o-w),G.push(O,P,Q,N),J++):(G.push(j,k),G.push(O,P,Q,N),G.push(n-(j-n),o-(k-o)),G.push(O,P,Q,N)));for(l=e[2*(I-2)],m=e[2*(I-2)+1],n=e[2*(I-1)],o=e[2*(I-1)+1],r=-(m-o),s=l-n,F=Math.sqrt(r*r+s*s),r/=F,s/=F,r*=L,s*=L,G.push(n-r,o-s),G.push(O,P,Q,N),G.push(n+r,o+s),G.push(O,P,Q,N),H.push(K),d=0;J>d;d++)H.push(K++);H.push(K-1)}},b.WebGLGraphics.buildComplexPoly=function(a,c){var d=a.points.slice();if(!(d.length<6)){var e=c.indices;c.points=d,c.alpha=a.fillAlpha,c.color=b.hex2rgb(a.fillColor);for(var f,g,h=1/0,i=-1/0,j=1/0,k=-1/0,l=0;lf?f:h,i=f>i?f:i,j=j>g?g:j,k=g>k?g:k;d.push(h,j,i,j,i,k,h,k);var m=d.length/2;for(l=0;m>l;l++)e.push(l)}},b.WebGLGraphics.buildPoly=function(a,c){var d=a.points;if(!(d.length<6)){var e=c.points,f=c.indices,g=d.length/2,h=b.hex2rgb(a.fillColor),i=a.fillAlpha,j=h[0]*i,k=h[1]*i,l=h[2]*i,m=b.PolyK.Triangulate(d),n=e.length/6,o=0;for(o=0;oo;o++)e.push(d[2*o],d[2*o+1],j,k,l,i) +}},b.WebGLGraphics.graphicsDataPool=[],b.WebGLGraphicsData=function(a){this.gl=a,this.color=[0,0,0],this.points=[],this.indices=[],this.lastIndex=0,this.buffer=a.createBuffer(),this.indexBuffer=a.createBuffer(),this.mode=1,this.alpha=1,this.dirty=!0},b.WebGLGraphicsData.prototype.reset=function(){this.points=[],this.indices=[],this.lastIndex=0},b.WebGLGraphicsData.prototype.upload=function(){var a=this.gl;this.glPoints=new Float32Array(this.points),a.bindBuffer(a.ARRAY_BUFFER,this.buffer),a.bufferData(a.ARRAY_BUFFER,this.glPoints,a.STATIC_DRAW),this.glIndicies=new Uint16Array(this.indices),a.bindBuffer(a.ELEMENT_ARRAY_BUFFER,this.indexBuffer),a.bufferData(a.ELEMENT_ARRAY_BUFFER,this.glIndicies,a.STATIC_DRAW),this.dirty=!1},b.glContexts=[],b.WebGLRenderer=function(a,c,d){if(d)for(var e in b.defaultRenderOptions)"undefined"==typeof d[e]&&(d[e]=b.defaultRenderOptions[e]);else d=b.defaultRenderOptions;b.defaultRenderer||(b.sayHello("webGL"),b.defaultRenderer=this),this.type=b.WEBGL_RENDERER,this.resolution=d.resolution,this.transparent=d.transparent,this.preserveDrawingBuffer=d.preserveDrawingBuffer,this.clearBeforeRender=d.clearBeforeRender,this.width=a||800,this.height=c||600,this.view=d.view||document.createElement("canvas"),this.contextLostBound=this.handleContextLost.bind(this),this.contextRestoredBound=this.handleContextRestored.bind(this),this.view.addEventListener("webglcontextlost",this.contextLostBound,!1),this.view.addEventListener("webglcontextrestored",this.contextRestoredBound,!1),this._contextOptions={alpha:this.transparent,antialias:d.antialias,premultipliedAlpha:this.transparent&&"notMultiplied"!==this.transparent,stencil:!0,preserveDrawingBuffer:d.preserveDrawingBuffer},this.projection=new b.Point,this.offset=new b.Point(0,0),this.shaderManager=new b.WebGLShaderManager,this.spriteBatch=new b.WebGLSpriteBatch,this.maskManager=new b.WebGLMaskManager,this.filterManager=new b.WebGLFilterManager,this.stencilManager=new b.WebGLStencilManager,this.blendModeManager=new b.WebGLBlendModeManager,this.renderSession={},this.renderSession.gl=this.gl,this.renderSession.drawCount=0,this.renderSession.shaderManager=this.shaderManager,this.renderSession.maskManager=this.maskManager,this.renderSession.filterManager=this.filterManager,this.renderSession.blendModeManager=this.blendModeManager,this.renderSession.spriteBatch=this.spriteBatch,this.renderSession.stencilManager=this.stencilManager,this.renderSession.renderer=this,this.renderSession.resolution=this.resolution,this.initContext(),this.mapBlendModes()},b.WebGLRenderer.prototype.constructor=b.WebGLRenderer,b.WebGLRenderer.prototype.initContext=function(){var a=this.view.getContext("webgl",this._contextOptions)||this.view.getContext("experimental-webgl",this._contextOptions);if(this.gl=a,!a)throw new Error("This browser does not support webGL. Try using the canvas renderer");this.glContextId=a.id=b.WebGLRenderer.glContextId++,b.glContexts[this.glContextId]=a,a.disable(a.DEPTH_TEST),a.disable(a.CULL_FACE),a.enable(a.BLEND),this.shaderManager.setContext(a),this.spriteBatch.setContext(a),this.maskManager.setContext(a),this.filterManager.setContext(a),this.blendModeManager.setContext(a),this.stencilManager.setContext(a),this.renderSession.gl=this.gl,this.resize(this.width,this.height)},b.WebGLRenderer.prototype.render=function(a){if(!this.contextLost){this.__stage!==a&&(a.interactive&&a.interactionManager.removeEvents(),this.__stage=a),a.updateTransform();var b=this.gl;a._interactive?a._interactiveEventsAdded||(a._interactiveEventsAdded=!0,a.interactionManager.setTarget(this)):a._interactiveEventsAdded&&(a._interactiveEventsAdded=!1,a.interactionManager.setTarget(this)),b.viewport(0,0,this.width,this.height),b.bindFramebuffer(b.FRAMEBUFFER,null),this.clearBeforeRender&&(this.transparent?b.clearColor(0,0,0,0):b.clearColor(a.backgroundColorSplit[0],a.backgroundColorSplit[1],a.backgroundColorSplit[2],1),b.clear(b.COLOR_BUFFER_BIT)),this.renderDisplayObject(a,this.projection)}},b.WebGLRenderer.prototype.renderDisplayObject=function(a,c,d){this.renderSession.blendModeManager.setBlendMode(b.blendModes.NORMAL),this.renderSession.drawCount=0,this.renderSession.projection=c,this.renderSession.offset=this.offset,this.spriteBatch.begin(this.renderSession),this.filterManager.begin(this.renderSession,d),a._renderWebGL(this.renderSession),this.spriteBatch.end()},b.WebGLRenderer.prototype.resize=function(a,b){this.width=a*this.resolution,this.height=b*this.resolution,this.view.width=this.width,this.view.height=this.height,this.gl.viewport(0,0,this.width,this.height),this.projection.x=this.width/2/this.resolution,this.projection.y=-this.height/2/this.resolution},b.WebGLRenderer.prototype.updateTexture=function(a){if(a.hasLoaded){var c=this.gl;return a._glTextures[c.id]||(a._glTextures[c.id]=c.createTexture()),c.bindTexture(c.TEXTURE_2D,a._glTextures[c.id]),c.pixelStorei(c.UNPACK_PREMULTIPLY_ALPHA_WEBGL,a.premultipliedAlpha),c.texImage2D(c.TEXTURE_2D,0,c.RGBA,c.RGBA,c.UNSIGNED_BYTE,a.source),c.texParameteri(c.TEXTURE_2D,c.TEXTURE_MAG_FILTER,a.scaleMode===b.scaleModes.LINEAR?c.LINEAR:c.NEAREST),c.texParameteri(c.TEXTURE_2D,c.TEXTURE_MIN_FILTER,a.scaleMode===b.scaleModes.LINEAR?c.LINEAR:c.NEAREST),a._powerOf2?(c.texParameteri(c.TEXTURE_2D,c.TEXTURE_WRAP_S,c.REPEAT),c.texParameteri(c.TEXTURE_2D,c.TEXTURE_WRAP_T,c.REPEAT)):(c.texParameteri(c.TEXTURE_2D,c.TEXTURE_WRAP_S,c.CLAMP_TO_EDGE),c.texParameteri(c.TEXTURE_2D,c.TEXTURE_WRAP_T,c.CLAMP_TO_EDGE)),a._dirty[c.id]=!1,a._glTextures[c.id]}},b.WebGLRenderer.prototype.handleContextLost=function(a){a.preventDefault(),this.contextLost=!0},b.WebGLRenderer.prototype.handleContextRestored=function(){this.initContext();for(var a in b.TextureCache){var c=b.TextureCache[a].baseTexture;c._glTextures=[]}this.contextLost=!1},b.WebGLRenderer.prototype.destroy=function(){this.view.off("webglcontextlost",this.contextLostBound),this.view.off("webglcontextrestored",this.contextRestoredBound),b.glContexts[this.glContextId]=null,this.projection=null,this.offset=null,this.shaderManager.destroy(),this.spriteBatch.destroy(),this.maskManager.destroy(),this.filterManager.destroy(),this.shaderManager=null,this.spriteBatch=null,this.maskManager=null,this.filterManager=null,this.gl=null,this.renderSession=null},b.WebGLRenderer.prototype.mapBlendModes=function(){var a=this.gl;b.blendModesWebGL||(b.blendModesWebGL=[],b.blendModesWebGL[b.blendModes.NORMAL]=[a.ONE,a.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.ADD]=[a.SRC_ALPHA,a.DST_ALPHA],b.blendModesWebGL[b.blendModes.MULTIPLY]=[a.DST_COLOR,a.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.SCREEN]=[a.SRC_ALPHA,a.ONE],b.blendModesWebGL[b.blendModes.OVERLAY]=[a.ONE,a.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.DARKEN]=[a.ONE,a.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.LIGHTEN]=[a.ONE,a.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.COLOR_DODGE]=[a.ONE,a.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.COLOR_BURN]=[a.ONE,a.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.HARD_LIGHT]=[a.ONE,a.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.SOFT_LIGHT]=[a.ONE,a.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.DIFFERENCE]=[a.ONE,a.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.EXCLUSION]=[a.ONE,a.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.HUE]=[a.ONE,a.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.SATURATION]=[a.ONE,a.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.COLOR]=[a.ONE,a.ONE_MINUS_SRC_ALPHA],b.blendModesWebGL[b.blendModes.LUMINOSITY]=[a.ONE,a.ONE_MINUS_SRC_ALPHA])},b.WebGLRenderer.glContextId=0,b.WebGLBlendModeManager=function(){this.currentBlendMode=99999},b.WebGLBlendModeManager.prototype.constructor=b.WebGLBlendModeManager,b.WebGLBlendModeManager.prototype.setContext=function(a){this.gl=a},b.WebGLBlendModeManager.prototype.setBlendMode=function(a){if(this.currentBlendMode===a)return!1;this.currentBlendMode=a;var c=b.blendModesWebGL[this.currentBlendMode];return this.gl.blendFunc(c[0],c[1]),!0},b.WebGLBlendModeManager.prototype.destroy=function(){this.gl=null},b.WebGLMaskManager=function(){},b.WebGLMaskManager.prototype.constructor=b.WebGLMaskManager,b.WebGLMaskManager.prototype.setContext=function(a){this.gl=a},b.WebGLMaskManager.prototype.pushMask=function(a,c){var d=c.gl;a.dirty&&b.WebGLGraphics.updateGraphics(a,d),a._webGL[d.id].data.length&&c.stencilManager.pushStencil(a,a._webGL[d.id].data[0],c)},b.WebGLMaskManager.prototype.popMask=function(a,b){var c=this.gl;b.stencilManager.popStencil(a,a._webGL[c.id].data[0],b)},b.WebGLMaskManager.prototype.destroy=function(){this.gl=null},b.WebGLStencilManager=function(){this.stencilStack=[],this.reverse=!0,this.count=0},b.WebGLStencilManager.prototype.setContext=function(a){this.gl=a},b.WebGLStencilManager.prototype.pushStencil=function(a,b,c){var d=this.gl;this.bindGraphics(a,b,c),0===this.stencilStack.length&&(d.enable(d.STENCIL_TEST),d.clear(d.STENCIL_BUFFER_BIT),this.reverse=!0,this.count=0),this.stencilStack.push(b);var e=this.count;d.colorMask(!1,!1,!1,!1),d.stencilFunc(d.ALWAYS,0,255),d.stencilOp(d.KEEP,d.KEEP,d.INVERT),1===b.mode?(d.drawElements(d.TRIANGLE_FAN,b.indices.length-4,d.UNSIGNED_SHORT,0),this.reverse?(d.stencilFunc(d.EQUAL,255-e,255),d.stencilOp(d.KEEP,d.KEEP,d.DECR)):(d.stencilFunc(d.EQUAL,e,255),d.stencilOp(d.KEEP,d.KEEP,d.INCR)),d.drawElements(d.TRIANGLE_FAN,4,d.UNSIGNED_SHORT,2*(b.indices.length-4)),this.reverse?d.stencilFunc(d.EQUAL,255-(e+1),255):d.stencilFunc(d.EQUAL,e+1,255),this.reverse=!this.reverse):(this.reverse?(d.stencilFunc(d.EQUAL,e,255),d.stencilOp(d.KEEP,d.KEEP,d.INCR)):(d.stencilFunc(d.EQUAL,255-e,255),d.stencilOp(d.KEEP,d.KEEP,d.DECR)),d.drawElements(d.TRIANGLE_STRIP,b.indices.length,d.UNSIGNED_SHORT,0),this.reverse?d.stencilFunc(d.EQUAL,e+1,255):d.stencilFunc(d.EQUAL,255-(e+1),255)),d.colorMask(!0,!0,!0,!0),d.stencilOp(d.KEEP,d.KEEP,d.KEEP),this.count++},b.WebGLStencilManager.prototype.bindGraphics=function(a,c,d){this._currentGraphics=a;var e,f=this.gl,g=d.projection,h=d.offset;1===c.mode?(e=d.shaderManager.complexPrimitiveShader,d.shaderManager.setShader(e),f.uniformMatrix3fv(e.translationMatrix,!1,a.worldTransform.toArray(!0)),f.uniform2f(e.projectionVector,g.x,-g.y),f.uniform2f(e.offsetVector,-h.x,-h.y),f.uniform3fv(e.tintColor,b.hex2rgb(a.tint)),f.uniform3fv(e.color,c.color),f.uniform1f(e.alpha,a.worldAlpha*c.alpha),f.bindBuffer(f.ARRAY_BUFFER,c.buffer),f.vertexAttribPointer(e.aVertexPosition,2,f.FLOAT,!1,8,0),f.bindBuffer(f.ELEMENT_ARRAY_BUFFER,c.indexBuffer)):(e=d.shaderManager.primitiveShader,d.shaderManager.setShader(e),f.uniformMatrix3fv(e.translationMatrix,!1,a.worldTransform.toArray(!0)),f.uniform2f(e.projectionVector,g.x,-g.y),f.uniform2f(e.offsetVector,-h.x,-h.y),f.uniform3fv(e.tintColor,b.hex2rgb(a.tint)),f.uniform1f(e.alpha,a.worldAlpha),f.bindBuffer(f.ARRAY_BUFFER,c.buffer),f.vertexAttribPointer(e.aVertexPosition,2,f.FLOAT,!1,24,0),f.vertexAttribPointer(e.colorAttribute,4,f.FLOAT,!1,24,8),f.bindBuffer(f.ELEMENT_ARRAY_BUFFER,c.indexBuffer))},b.WebGLStencilManager.prototype.popStencil=function(a,b,c){var d=this.gl;if(this.stencilStack.pop(),this.count--,0===this.stencilStack.length)d.disable(d.STENCIL_TEST);else{var e=this.count;this.bindGraphics(a,b,c),d.colorMask(!1,!1,!1,!1),1===b.mode?(this.reverse=!this.reverse,this.reverse?(d.stencilFunc(d.EQUAL,255-(e+1),255),d.stencilOp(d.KEEP,d.KEEP,d.INCR)):(d.stencilFunc(d.EQUAL,e+1,255),d.stencilOp(d.KEEP,d.KEEP,d.DECR)),d.drawElements(d.TRIANGLE_FAN,4,d.UNSIGNED_SHORT,2*(b.indices.length-4)),d.stencilFunc(d.ALWAYS,0,255),d.stencilOp(d.KEEP,d.KEEP,d.INVERT),d.drawElements(d.TRIANGLE_FAN,b.indices.length-4,d.UNSIGNED_SHORT,0),this.reverse?d.stencilFunc(d.EQUAL,e,255):d.stencilFunc(d.EQUAL,255-e,255)):(this.reverse?(d.stencilFunc(d.EQUAL,e+1,255),d.stencilOp(d.KEEP,d.KEEP,d.DECR)):(d.stencilFunc(d.EQUAL,255-(e+1),255),d.stencilOp(d.KEEP,d.KEEP,d.INCR)),d.drawElements(d.TRIANGLE_STRIP,b.indices.length,d.UNSIGNED_SHORT,0),this.reverse?d.stencilFunc(d.EQUAL,e,255):d.stencilFunc(d.EQUAL,255-e,255)),d.colorMask(!0,!0,!0,!0),d.stencilOp(d.KEEP,d.KEEP,d.KEEP)}},b.WebGLStencilManager.prototype.destroy=function(){this.stencilStack=null,this.gl=null},b.WebGLShaderManager=function(){this.maxAttibs=10,this.attribState=[],this.tempAttribState=[];for(var a=0;ad;d+=6,e+=4)this.indices[d+0]=e+0,this.indices[d+1]=e+1,this.indices[d+2]=e+2,this.indices[d+3]=e+0,this.indices[d+4]=e+2,this.indices[d+5]=e+3;this.drawing=!1,this.currentBatchSize=0,this.currentBaseTexture=null,this.dirty=!0,this.textures=[],this.blendModes=[],this.shaders=[],this.sprites=[],this.defaultShader=new b.AbstractFilter(["precision lowp float;","varying vec2 vTextureCoord;","varying vec4 vColor;","uniform sampler2D uSampler;","void main(void) {"," gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;","}"])},b.WebGLSpriteBatch.prototype.setContext=function(a){this.gl=a,this.vertexBuffer=a.createBuffer(),this.indexBuffer=a.createBuffer(),a.bindBuffer(a.ELEMENT_ARRAY_BUFFER,this.indexBuffer),a.bufferData(a.ELEMENT_ARRAY_BUFFER,this.indices,a.STATIC_DRAW),a.bindBuffer(a.ARRAY_BUFFER,this.vertexBuffer),a.bufferData(a.ARRAY_BUFFER,this.vertices,a.DYNAMIC_DRAW),this.currentBlendMode=99999;var c=new b.PixiShader(a);c.fragmentSrc=this.defaultShader.fragmentSrc,c.uniforms={},c.init(),this.defaultShader.shaders[a.id]=c},b.WebGLSpriteBatch.prototype.begin=function(a){this.renderSession=a,this.shader=this.renderSession.shaderManager.defaultShader,this.start()},b.WebGLSpriteBatch.prototype.end=function(){this.flush()},b.WebGLSpriteBatch.prototype.render=function(a){var b=a.texture;this.currentBatchSize>=this.size&&(this.flush(),this.currentBaseTexture=b.baseTexture);var c=b._uvs;if(c){var d,e,f,g,h=a.worldAlpha,i=a.tint,j=this.vertices,k=a.anchor.x,l=a.anchor.y;if(b.trim){var m=b.trim;e=m.x-k*m.width,d=e+b.crop.width,g=m.y-l*m.height,f=g+b.crop.height}else d=b.frame.width*(1-k),e=b.frame.width*-k,f=b.frame.height*(1-l),g=b.frame.height*-l;var n=4*this.currentBatchSize*this.vertSize,o=b.baseTexture.resolution,p=a.worldTransform,q=p.a/o,r=p.b/o,s=p.c/o,t=p.d/o,u=p.tx,v=p.ty;j[n++]=q*e+s*g+u,j[n++]=t*g+r*e+v,j[n++]=c.x0,j[n++]=c.y0,j[n++]=h,j[n++]=i,j[n++]=q*d+s*g+u,j[n++]=t*g+r*d+v,j[n++]=c.x1,j[n++]=c.y1,j[n++]=h,j[n++]=i,j[n++]=q*d+s*f+u,j[n++]=t*f+r*d+v,j[n++]=c.x2,j[n++]=c.y2,j[n++]=h,j[n++]=i,j[n++]=q*e+s*f+u,j[n++]=t*f+r*e+v,j[n++]=c.x3,j[n++]=c.y3,j[n++]=h,j[n++]=i,this.sprites[this.currentBatchSize++]=a}},b.WebGLSpriteBatch.prototype.renderTilingSprite=function(a){var c=a.tilingTexture;this.currentBatchSize>=this.size&&(this.flush(),this.currentBaseTexture=c.baseTexture),a._uvs||(a._uvs=new b.TextureUvs);var d=a._uvs;a.tilePosition.x%=c.baseTexture.width*a.tileScaleOffset.x,a.tilePosition.y%=c.baseTexture.height*a.tileScaleOffset.y;var e=a.tilePosition.x/(c.baseTexture.width*a.tileScaleOffset.x),f=a.tilePosition.y/(c.baseTexture.height*a.tileScaleOffset.y),g=a.width/c.baseTexture.width/(a.tileScale.x*a.tileScaleOffset.x),h=a.height/c.baseTexture.height/(a.tileScale.y*a.tileScaleOffset.y);d.x0=0-e,d.y0=0-f,d.x1=1*g-e,d.y1=0-f,d.x2=1*g-e,d.y2=1*h-f,d.x3=0-e,d.y3=1*h-f;var i=a.worldAlpha,j=a.tint,k=this.vertices,l=a.width,m=a.height,n=a.anchor.x,o=a.anchor.y,p=l*(1-n),q=l*-n,r=m*(1-o),s=m*-o,t=4*this.currentBatchSize*this.vertSize,u=c.baseTexture.resolution,v=a.worldTransform,w=v.a/u,x=v.b/u,y=v.c/u,z=v.d/u,A=v.tx,B=v.ty;k[t++]=w*q+y*s+A,k[t++]=z*s+x*q+B,k[t++]=d.x0,k[t++]=d.y0,k[t++]=i,k[t++]=j,k[t++]=w*p+y*s+A,k[t++]=z*s+x*p+B,k[t++]=d.x1,k[t++]=d.y1,k[t++]=i,k[t++]=j,k[t++]=w*p+y*r+A,k[t++]=z*r+x*p+B,k[t++]=d.x2,k[t++]=d.y2,k[t++]=i,k[t++]=j,k[t++]=w*q+y*r+A,k[t++]=z*r+x*q+B,k[t++]=d.x3,k[t++]=d.y3,k[t++]=i,k[t++]=j,this.sprites[this.currentBatchSize++]=a},b.WebGLSpriteBatch.prototype.flush=function(){if(0!==this.currentBatchSize){var a,c=this.gl;if(this.dirty){this.dirty=!1,c.activeTexture(c.TEXTURE0),c.bindBuffer(c.ARRAY_BUFFER,this.vertexBuffer),c.bindBuffer(c.ELEMENT_ARRAY_BUFFER,this.indexBuffer),a=this.defaultShader.shaders[c.id];var d=4*this.vertSize;c.vertexAttribPointer(a.aVertexPosition,2,c.FLOAT,!1,d,0),c.vertexAttribPointer(a.aTextureCoord,2,c.FLOAT,!1,d,8),c.vertexAttribPointer(a.colorAttribute,2,c.FLOAT,!1,d,16)}if(this.currentBatchSize>.5*this.size)c.bufferSubData(c.ARRAY_BUFFER,0,this.vertices);else{var e=this.vertices.subarray(0,4*this.currentBatchSize*this.vertSize);c.bufferSubData(c.ARRAY_BUFFER,0,e)}for(var f,g,h,i,j=0,k=0,l=null,m=this.renderSession.blendModeManager.currentBlendMode,n=null,o=!1,p=!1,q=0,r=this.currentBatchSize;r>q;q++){if(i=this.sprites[q],f=i.texture.baseTexture,g=i.blendMode,h=i.shader||this.defaultShader,o=m!==g,p=n!==h,(l!==f||o||p)&&(this.renderBatch(l,j,k),k=q,j=0,l=f,o&&(m=g,this.renderSession.blendModeManager.setBlendMode(m)),p)){n=h,a=n.shaders[c.id],a||(a=new b.PixiShader(c),a.fragmentSrc=n.fragmentSrc,a.uniforms=n.uniforms,a.init(),n.shaders[c.id]=a),this.renderSession.shaderManager.setShader(a),a.dirty&&a.syncUniforms();var s=this.renderSession.projection;c.uniform2f(a.projectionVector,s.x,s.y);var t=this.renderSession.offset;c.uniform2f(a.offsetVector,t.x,t.y)}j++}this.renderBatch(l,j,k),this.currentBatchSize=0}},b.WebGLSpriteBatch.prototype.renderBatch=function(a,b,c){if(0!==b){var d=this.gl;a._dirty[d.id]?this.renderSession.renderer.updateTexture(a):d.bindTexture(d.TEXTURE_2D,a._glTextures[d.id]),d.drawElements(d.TRIANGLES,6*b,d.UNSIGNED_SHORT,6*c*2),this.renderSession.drawCount++}},b.WebGLSpriteBatch.prototype.stop=function(){this.flush(),this.dirty=!0},b.WebGLSpriteBatch.prototype.start=function(){this.dirty=!0},b.WebGLSpriteBatch.prototype.destroy=function(){this.vertices=null,this.indices=null,this.gl.deleteBuffer(this.vertexBuffer),this.gl.deleteBuffer(this.indexBuffer),this.currentBaseTexture=null,this.gl=null},b.WebGLFastSpriteBatch=function(a){this.vertSize=10,this.maxSize=6e3,this.size=this.maxSize;var b=4*this.size*this.vertSize,c=6*this.maxSize;this.vertices=new Float32Array(b),this.indices=new Uint16Array(c),this.vertexBuffer=null,this.indexBuffer=null,this.lastIndexCount=0;for(var d=0,e=0;c>d;d+=6,e+=4)this.indices[d+0]=e+0,this.indices[d+1]=e+1,this.indices[d+2]=e+2,this.indices[d+3]=e+0,this.indices[d+4]=e+2,this.indices[d+5]=e+3;this.drawing=!1,this.currentBatchSize=0,this.currentBaseTexture=null,this.currentBlendMode=0,this.renderSession=null,this.shader=null,this.matrix=null,this.setContext(a)},b.WebGLFastSpriteBatch.prototype.constructor=b.WebGLFastSpriteBatch,b.WebGLFastSpriteBatch.prototype.setContext=function(a){this.gl=a,this.vertexBuffer=a.createBuffer(),this.indexBuffer=a.createBuffer(),a.bindBuffer(a.ELEMENT_ARRAY_BUFFER,this.indexBuffer),a.bufferData(a.ELEMENT_ARRAY_BUFFER,this.indices,a.STATIC_DRAW),a.bindBuffer(a.ARRAY_BUFFER,this.vertexBuffer),a.bufferData(a.ARRAY_BUFFER,this.vertices,a.DYNAMIC_DRAW)},b.WebGLFastSpriteBatch.prototype.begin=function(a,b){this.renderSession=b,this.shader=this.renderSession.shaderManager.fastShader,this.matrix=a.worldTransform.toArray(!0),this.start()},b.WebGLFastSpriteBatch.prototype.end=function(){this.flush()},b.WebGLFastSpriteBatch.prototype.render=function(a){var b=a.children,c=b[0];if(c.texture._uvs){this.currentBaseTexture=c.texture.baseTexture,c.blendMode!==this.renderSession.blendModeManager.currentBlendMode&&(this.flush(),this.renderSession.blendModeManager.setBlendMode(c.blendMode));for(var d=0,e=b.length;e>d;d++)this.renderSprite(b[d]);this.flush()}},b.WebGLFastSpriteBatch.prototype.renderSprite=function(a){if(a.visible&&(a.texture.baseTexture===this.currentBaseTexture||(this.flush(),this.currentBaseTexture=a.texture.baseTexture,a.texture._uvs))){var b,c,d,e,f,g,h,i,j=this.vertices;if(b=a.texture._uvs,c=a.texture.frame.width,d=a.texture.frame.height,a.texture.trim){var k=a.texture.trim;f=k.x-a.anchor.x*k.width,e=f+a.texture.crop.width,h=k.y-a.anchor.y*k.height,g=h+a.texture.crop.height}else e=a.texture.frame.width*(1-a.anchor.x),f=a.texture.frame.width*-a.anchor.x,g=a.texture.frame.height*(1-a.anchor.y),h=a.texture.frame.height*-a.anchor.y;i=4*this.currentBatchSize*this.vertSize,j[i++]=f,j[i++]=h,j[i++]=a.position.x,j[i++]=a.position.y,j[i++]=a.scale.x,j[i++]=a.scale.y,j[i++]=a.rotation,j[i++]=b.x0,j[i++]=b.y1,j[i++]=a.alpha,j[i++]=e,j[i++]=h,j[i++]=a.position.x,j[i++]=a.position.y,j[i++]=a.scale.x,j[i++]=a.scale.y,j[i++]=a.rotation,j[i++]=b.x1,j[i++]=b.y1,j[i++]=a.alpha,j[i++]=e,j[i++]=g,j[i++]=a.position.x,j[i++]=a.position.y,j[i++]=a.scale.x,j[i++]=a.scale.y,j[i++]=a.rotation,j[i++]=b.x2,j[i++]=b.y2,j[i++]=a.alpha,j[i++]=f,j[i++]=g,j[i++]=a.position.x,j[i++]=a.position.y,j[i++]=a.scale.x,j[i++]=a.scale.y,j[i++]=a.rotation,j[i++]=b.x3,j[i++]=b.y3,j[i++]=a.alpha,this.currentBatchSize++,this.currentBatchSize>=this.size&&this.flush()}},b.WebGLFastSpriteBatch.prototype.flush=function(){if(0!==this.currentBatchSize){var a=this.gl;if(this.currentBaseTexture._glTextures[a.id]||this.renderSession.renderer.updateTexture(this.currentBaseTexture,a),a.bindTexture(a.TEXTURE_2D,this.currentBaseTexture._glTextures[a.id]),this.currentBatchSize>.5*this.size)a.bufferSubData(a.ARRAY_BUFFER,0,this.vertices);else{var b=this.vertices.subarray(0,4*this.currentBatchSize*this.vertSize);a.bufferSubData(a.ARRAY_BUFFER,0,b)}a.drawElements(a.TRIANGLES,6*this.currentBatchSize,a.UNSIGNED_SHORT,0),this.currentBatchSize=0,this.renderSession.drawCount++}},b.WebGLFastSpriteBatch.prototype.stop=function(){this.flush()},b.WebGLFastSpriteBatch.prototype.start=function(){var a=this.gl;a.activeTexture(a.TEXTURE0),a.bindBuffer(a.ARRAY_BUFFER,this.vertexBuffer),a.bindBuffer(a.ELEMENT_ARRAY_BUFFER,this.indexBuffer);var b=this.renderSession.projection;a.uniform2f(this.shader.projectionVector,b.x,b.y),a.uniformMatrix3fv(this.shader.uMatrix,!1,this.matrix);var c=4*this.vertSize;a.vertexAttribPointer(this.shader.aVertexPosition,2,a.FLOAT,!1,c,0),a.vertexAttribPointer(this.shader.aPositionCoord,2,a.FLOAT,!1,c,8),a.vertexAttribPointer(this.shader.aScale,2,a.FLOAT,!1,c,16),a.vertexAttribPointer(this.shader.aRotation,1,a.FLOAT,!1,c,24),a.vertexAttribPointer(this.shader.aTextureCoord,2,a.FLOAT,!1,c,28),a.vertexAttribPointer(this.shader.colorAttribute,1,a.FLOAT,!1,c,36)},b.WebGLFilterManager=function(){this.filterStack=[],this.offsetX=0,this.offsetY=0},b.WebGLFilterManager.prototype.constructor=b.WebGLFilterManager,b.WebGLFilterManager.prototype.setContext=function(a){this.gl=a,this.texturePool=[],this.initShaderBuffers()},b.WebGLFilterManager.prototype.begin=function(a,b){this.renderSession=a,this.defaultShader=a.shaderManager.defaultShader;var c=this.renderSession.projection;this.width=2*c.x,this.height=2*-c.y,this.buffer=b},b.WebGLFilterManager.prototype.pushFilter=function(a){var c=this.gl,d=this.renderSession.projection,e=this.renderSession.offset;a._filterArea=a.target.filterArea||a.target.getBounds(),this.filterStack.push(a);var f=a.filterPasses[0];this.offsetX+=a._filterArea.x,this.offsetY+=a._filterArea.y;var g=this.texturePool.pop();g?g.resize(this.width,this.height):g=new b.FilterTexture(this.gl,this.width,this.height),c.bindTexture(c.TEXTURE_2D,g.texture);var h=a._filterArea,i=f.padding;h.x-=i,h.y-=i,h.width+=2*i,h.height+=2*i,h.x<0&&(h.x=0),h.width>this.width&&(h.width=this.width),h.y<0&&(h.y=0),h.height>this.height&&(h.height=this.height),c.bindFramebuffer(c.FRAMEBUFFER,g.frameBuffer),c.viewport(0,0,h.width,h.height),d.x=h.width/2,d.y=-h.height/2,e.x=-h.x,e.y=-h.y,c.colorMask(!0,!0,!0,!0),c.clearColor(0,0,0,0),c.clear(c.COLOR_BUFFER_BIT),a._glFilterTexture=g},b.WebGLFilterManager.prototype.popFilter=function(){var a=this.gl,c=this.filterStack.pop(),d=c._filterArea,e=c._glFilterTexture,f=this.renderSession.projection,g=this.renderSession.offset;if(c.filterPasses.length>1){a.viewport(0,0,d.width,d.height),a.bindBuffer(a.ARRAY_BUFFER,this.vertexBuffer),this.vertexArray[0]=0,this.vertexArray[1]=d.height,this.vertexArray[2]=d.width,this.vertexArray[3]=d.height,this.vertexArray[4]=0,this.vertexArray[5]=0,this.vertexArray[6]=d.width,this.vertexArray[7]=0,a.bufferSubData(a.ARRAY_BUFFER,0,this.vertexArray),a.bindBuffer(a.ARRAY_BUFFER,this.uvBuffer),this.uvArray[2]=d.width/this.width,this.uvArray[5]=d.height/this.height,this.uvArray[6]=d.width/this.width,this.uvArray[7]=d.height/this.height,a.bufferSubData(a.ARRAY_BUFFER,0,this.uvArray);var h=e,i=this.texturePool.pop();i||(i=new b.FilterTexture(this.gl,this.width,this.height)),i.resize(this.width,this.height),a.bindFramebuffer(a.FRAMEBUFFER,i.frameBuffer),a.clear(a.COLOR_BUFFER_BIT),a.disable(a.BLEND);for(var j=0;jB?B:A,c.beginPath(),c.moveTo(w,x+A),c.lineTo(w,x+z-A),c.quadraticCurveTo(w,x+z,w+A,x+z),c.lineTo(w+y-A,x+z),c.quadraticCurveTo(w+y,x+z,w+y,x+z-A),c.lineTo(w+y,x+A),c.quadraticCurveTo(w+y,x,w+y-A,x),c.lineTo(w+A,x),c.quadraticCurveTo(w,x,w,x+A),c.closePath(),(g.fillColor||0===g.fillColor)&&(c.globalAlpha=g.fillAlpha*d,c.fillStyle=e="#"+("00000"+(0|g.fillColor).toString(16)).substr(-6),c.fill()),g.lineWidth&&(c.globalAlpha=g.lineAlpha*d,c.stroke())}}},b.CanvasGraphics.renderGraphicsMask=function(a,c){var d=a.graphicsData.length;if(0!==d){d>1&&(d=1,window.console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object"));for(var e=0;1>e;e++){var f=a.graphicsData[e],g=f.shape;if(f.type===b.Graphics.POLY){c.beginPath();var h=g.points;c.moveTo(h[0],h[1]);for(var i=1;iA?A:z,c.beginPath(),c.moveTo(v,w+z),c.lineTo(v,w+y-z),c.quadraticCurveTo(v,w+y,v+z,w+y),c.lineTo(v+x-z,w+y),c.quadraticCurveTo(v+x,w+y,v+x,w+y-z),c.lineTo(v+x,w+z),c.quadraticCurveTo(v+x,w,v+x-z,w),c.lineTo(v+z,w),c.quadraticCurveTo(v,w,v,w+z),c.closePath()}}}},b.Graphics=function(){b.DisplayObjectContainer.call(this),this.renderable=!0,this.fillAlpha=1,this.lineWidth=0,this.lineColor=0,this.graphicsData=[],this.tint=16777215,this.blendMode=b.blendModes.NORMAL,this.currentPath=null,this._webGL=[],this.isMask=!1,this.boundsPadding=0,this.dirty=!0,this.webGLDirty=!1,this.cachedSpriteDirty=!1},b.Graphics.prototype=Object.create(b.DisplayObjectContainer.prototype),b.Graphics.prototype.constructor=b.Graphics,Object.defineProperty(b.Graphics.prototype,"cacheAsBitmap",{get:function(){return this._cacheAsBitmap},set:function(a){this._cacheAsBitmap=a,this._cacheAsBitmap?this._generateCachedSprite():(this.destroyCachedSprite(),this.dirty=!0)}}),b.Graphics.prototype.lineStyle=function(a,c,d){if(this.lineWidth=a||0,this.lineColor=c||0,this.lineAlpha=arguments.length<3?1:d,this.currentPath){if(this.currentPath.shape.points.length)return this.drawShape(new b.Polygon(this.currentPath.shape.points.slice(-2))),this;this.currentPath.lineWidth=this.lineWidth,this.currentPath.lineColor=this.lineColor,this.currentPath.lineAlpha=this.lineAlpha}return this},b.Graphics.prototype.moveTo=function(a,c){return this.drawShape(new b.Polygon([a,c])),this},b.Graphics.prototype.lineTo=function(a,b){return this.currentPath.shape.points.push(a,b),this.dirty=!0,this},b.Graphics.prototype.quadraticCurveTo=function(a,b,c,d){this.currentPath?0===this.currentPath.shape.points.length&&(this.currentPath.shape.points=[0,0]):this.moveTo(0,0);var e,f,g=20,h=this.currentPath.shape.points;0===h.length&&this.moveTo(0,0);for(var i=h[h.length-2],j=h[h.length-1],k=0,l=1;g>=l;l++)k=l/g,e=i+(a-i)*k,f=j+(b-j)*k,h.push(e+(a+(c-a)*k-e)*k,f+(b+(d-b)*k-f)*k);return this.dirty=!0,this},b.Graphics.prototype.bezierCurveTo=function(a,b,c,d,e,f){this.currentPath?0===this.currentPath.shape.points.length&&(this.currentPath.shape.points=[0,0]):this.moveTo(0,0);for(var g,h,i,j,k,l=20,m=this.currentPath.shape.points,n=m[m.length-2],o=m[m.length-1],p=0,q=1;l>=q;q++)p=q/l,g=1-p,h=g*g,i=h*g,j=p*p,k=j*p,m.push(i*n+3*h*p*a+3*g*j*c+k*e,i*o+3*h*p*b+3*g*j*d+k*f);return this.dirty=!0,this},b.Graphics.prototype.arcTo=function(a,b,c,d,e){this.currentPath?0===this.currentPath.shape.points.length&&(this.currentPath.shape.points=[a,b]):this.moveTo(a,b),0===this.currentPath.length&&this.moveTo(a,b);var f=this.currentPath,g=f[f.length-2],h=f[f.length-1],i=h-b,j=g-a,k=d-b,l=c-a,m=Math.abs(i*l-j*k);if(1e-8>m||0===e)f.push(a,b);else{var n=i*i+j*j,o=k*k+l*l,p=i*k+j*l,q=e*Math.sqrt(n)/m,r=e*Math.sqrt(o)/m,s=q*p/n,t=r*p/o,u=q*l+r*j,v=q*k+r*i,w=j*(r+s),x=i*(r+s),y=l*(q+t),z=k*(q+t),A=Math.atan2(x-v,w-u),B=Math.atan2(z-v,y-u);this.arc(u+a,v+b,e,A,B,j*k>l*i)}return this.dirty=!0,this},b.Graphics.prototype.arc=function(a,b,c,d,e,f){var g=a+Math.cos(d)*c,h=b+Math.sin(d)*c,i=this.currentPath.shape.points;if((0!==i.length&&i[i.length-2]!==g||i[i.length-1]!==h)&&(this.moveTo(g,h),i=this.currentPath.shape.points),d===e)return this;!f&&d>=e?e+=2*Math.PI:f&&e>=d&&(d+=2*Math.PI);var j=f?-1*(d-e):e-d,k=Math.abs(j)/(2*Math.PI)*40;if(0===j)return this;for(var l=j/(2*k),m=2*l,n=Math.cos(l),o=Math.sin(l),p=k-1,q=p%1/p,r=0;p>=r;r++){var s=r+q*r,t=l+d+m*s,u=Math.cos(t),v=-Math.sin(t);i.push((n*u+o*v)*c+a,(n*-v+o*u)*c+b)}return this.dirty=!0,this},b.Graphics.prototype.beginFill=function(a,b){return this.filling=!0,this.fillColor=a||0,this.fillAlpha=void 0===b?1:b,this.currentPath&&this.currentPath.shape.points.length<=2&&(this.currentPath.fill=this.filling,this.currentPath.fillColor=this.fillColor,this.currentPath.fillAlpha=this.fillAlpha),this},b.Graphics.prototype.endFill=function(){return this.filling=!1,this.fillColor=null,this.fillAlpha=1,this},b.Graphics.prototype.drawRect=function(a,c,d,e){return this.drawShape(new b.Rectangle(a,c,d,e)),this},b.Graphics.prototype.drawRoundedRect=function(a,c,d,e,f){return this.drawShape({points:[a,c,d,e,f],type:b.Graphics.RREC}),this},b.Graphics.prototype.drawCircle=function(a,c,d){return this.drawShape(new b.Circle(a,c,d)),this},b.Graphics.prototype.drawEllipse=function(a,c,d,e){return this.drawShape(new b.Ellipse(a,c,d,e)),this},b.Graphics.prototype.drawPolygon=function(a){return a instanceof Array||(a=Array.prototype.slice.call(arguments)),this.drawShape(new b.Polygon(a)),this},b.Graphics.prototype.clear=function(){return this.lineWidth=0,this.filling=!1,this.dirty=!0,this.clearDirty=!0,this.graphicsData=[],this},b.Graphics.prototype.generateTexture=function(a,c){a=a||1;var d=this.getBounds(),e=new b.CanvasBuffer(d.width*a,d.height*a),f=b.Texture.fromCanvas(e.canvas,c);return f.baseTexture.resolution=a,e.context.scale(a,a),e.context.translate(-d.x,-d.y),b.CanvasGraphics.renderGraphics(this,e.context),f},b.Graphics.prototype._renderWebGL=function(a){if(this.visible!==!1&&0!==this.alpha&&this.isMask!==!0){if(this._cacheAsBitmap)return(this.dirty||this.cachedSpriteDirty)&&(this._generateCachedSprite(),this.updateCachedSpriteTexture(),this.cachedSpriteDirty=!1,this.dirty=!1),this._cachedSprite.alpha=this.alpha,b.Sprite.prototype._renderWebGL.call(this._cachedSprite,a),void 0;if(a.spriteBatch.stop(),a.blendModeManager.setBlendMode(this.blendMode),this._mask&&a.maskManager.pushMask(this._mask,a),this._filters&&a.filterManager.pushFilter(this._filterBlock),this.blendMode!==a.spriteBatch.currentBlendMode){a.spriteBatch.currentBlendMode=this.blendMode;var c=b.blendModesWebGL[a.spriteBatch.currentBlendMode];a.spriteBatch.gl.blendFunc(c[0],c[1])}if(this.webGLDirty&&(this.dirty=!0,this.webGLDirty=!1),b.WebGLGraphics.renderGraphics(this,a),this.children.length){a.spriteBatch.start();for(var d=0,e=this.children.length;e>d;d++)this.children[d]._renderWebGL(a);a.spriteBatch.stop()}this._filters&&a.filterManager.popFilter(),this._mask&&a.maskManager.popMask(this.mask,a),a.drawCount++,a.spriteBatch.start()}},b.Graphics.prototype._renderCanvas=function(a){if(this.visible!==!1&&0!==this.alpha&&this.isMask!==!0){if(this._cacheAsBitmap)return(this.dirty||this.cachedSpriteDirty)&&(this._generateCachedSprite(),this.updateCachedSpriteTexture(),this.cachedSpriteDirty=!1,this.dirty=!1),this._cachedSprite.alpha=this.alpha,b.Sprite.prototype._renderCanvas.call(this._cachedSprite,a),void 0;var c=a.context,d=this.worldTransform;this.blendMode!==a.currentBlendMode&&(a.currentBlendMode=this.blendMode,c.globalCompositeOperation=b.blendModesCanvas[a.currentBlendMode]),this._mask&&a.maskManager.pushMask(this._mask,a);var e=a.resolution;c.setTransform(d.a*e,d.b*e,d.c*e,d.d*e,d.tx*e,d.ty*e),b.CanvasGraphics.renderGraphics(this,c);for(var f=0,g=this.children.length;g>f;f++)this.children[f]._renderCanvas(a);this._mask&&a.maskManager.popMask(a)}},b.Graphics.prototype.getBounds=function(a){this.dirty&&(this.updateBounds(),this.webGLDirty=!0,this.cachedSpriteDirty=!0,this.dirty=!1);var b=this._bounds,c=b.x,d=b.width+b.x,e=b.y,f=b.height+b.y,g=a||this.worldTransform,h=g.a,i=g.c,j=g.b,k=g.d,l=g.tx,m=g.ty,n=h*d+j*f+l,o=k*f+i*d+m,p=h*c+j*f+l,q=k*f+i*c+m,r=h*c+j*e+l,s=k*e+i*c+m,t=h*d+j*e+l,u=k*e+i*d+m,v=n,w=o,x=n,y=o;return x=x>p?p:x,x=x>r?r:x,x=x>t?t:x,y=y>q?q:y,y=y>s?s:y,y=y>u?u:y,v=p>v?p:v,v=r>v?r:v,v=t>v?t:v,w=q>w?q:w,w=s>w?s:w,w=u>w?u:w,b.x=x,b.width=v-x,b.y=y,b.height=w-y,b},b.Graphics.prototype.updateBounds=function(){var a=1/0,c=-1/0,d=1/0,e=-1/0;if(this.graphicsData.length)for(var f,g,h,i,j,k,l=0;lh?h:a,c=h+j>c?h+j:c,d=d>i?i:d,e=i+k>e?i+k:e;else if(n===b.Graphics.CIRC)h=f.x,i=f.y,j=f.radius+o/2,k=f.radius+o/2,a=a>h-j?h-j:a,c=h+j>c?h+j:c,d=d>i-k?i-k:d,e=i+k>e?i+k:e;else if(n===b.Graphics.ELIP)h=f.x,i=f.y,j=f.width+o/2,k=f.height+o/2,a=a>h-j?h-j:a,c=h+j>c?h+j:c,d=d>i-k?i-k:d,e=i+k>e?i+k:e;else{g=f.points;for(var p=0;ph-o?h-o:a,c=h+o>c?h+o:c,d=d>i-o?i-o:d,e=i+o>e?i+o:e}}else a=0,c=0,d=0,e=0;var q=this.boundsPadding,r=this._bounds;r.x=a-q,r.width=c-a+2*q,r.y=d-q,r.height=e-d+2*q},b.Graphics.prototype._generateCachedSprite=function(){var a=this.getLocalBounds();if(this._cachedSprite)this._cachedSprite.buffer.resize(a.width,a.height);else{var c=new b.CanvasBuffer(a.width,a.height),d=b.Texture.fromCanvas(c.canvas);this._cachedSprite=new b.Sprite(d),this._cachedSprite.buffer=c,this._cachedSprite.worldTransform=this.worldTransform}this._cachedSprite.anchor.x=-(a.x/a.width),this._cachedSprite.anchor.y=-(a.y/a.height),this._cachedSprite.buffer.context.translate(-a.x,-a.y),this.worldAlpha=1,b.CanvasGraphics.renderGraphics(this,this._cachedSprite.buffer.context),this._cachedSprite.alpha=this.alpha},b.Graphics.prototype.updateCachedSpriteTexture=function(){var a=this._cachedSprite,b=a.texture,c=a.buffer.canvas;b.baseTexture.width=c.width,b.baseTexture.height=c.height,b.crop.width=b.frame.width=c.width,b.crop.height=b.frame.height=c.height,a._width=c.width,a._height=c.height,b.baseTexture.dirty()},b.Graphics.prototype.destroyCachedSprite=function(){this._cachedSprite.texture.destroy(!0),this._cachedSprite=null},b.Graphics.prototype.drawShape=function(a){this.currentPath&&this.currentPath.shape.points.length<=2&&this.graphicsData.pop(),this.currentPath=null;var c=new b.GraphicsData(this.lineWidth,this.lineColor,this.lineAlpha,this.fillColor,this.fillAlpha,this.filling,a);return this.graphicsData.push(c),c.type===b.Graphics.POLY&&(c.shape.closed=this.filling,this.currentPath=c),this.dirty=!0,c},b.GraphicsData=function(a,b,c,d,e,f,g){this.lineWidth=a,this.lineColor=b,this.lineAlpha=c,this.fillColor=d,this.fillAlpha=e,this.fill=f,this.shape=g,this.type=g.type},b.Graphics.POLY=0,b.Graphics.RECT=1,b.Graphics.CIRC=2,b.Graphics.ELIP=3,b.Graphics.RREC=4,b.Polygon.prototype.type=b.Graphics.POLY,b.Rectangle.prototype.type=b.Graphics.RECT,b.Circle.prototype.type=b.Graphics.CIRC,b.Ellipse.prototype.type=b.Graphics.ELIP,b.Strip=function(a){b.DisplayObjectContainer.call(this),this.texture=a,this.uvs=new b.Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new b.Float32Array([0,0,100,0,100,100,0,100]),this.colors=new b.Float32Array([1,1,1,1]),this.indices=new b.Uint16Array([0,1,2,3]),this.dirty=!0,this.padding=0},b.Strip.prototype=Object.create(b.DisplayObjectContainer.prototype),b.Strip.prototype.constructor=b.Strip,b.Strip.prototype._renderWebGL=function(a){!this.visible||this.alpha<=0||(a.spriteBatch.stop(),this._vertexBuffer||this._initWebGL(a),a.shaderManager.setShader(a.shaderManager.stripShader),this._renderStrip(a),a.spriteBatch.start())},b.Strip.prototype._initWebGL=function(a){var b=a.gl;this._vertexBuffer=b.createBuffer(),this._indexBuffer=b.createBuffer(),this._uvBuffer=b.createBuffer(),this._colorBuffer=b.createBuffer(),b.bindBuffer(b.ARRAY_BUFFER,this._vertexBuffer),b.bufferData(b.ARRAY_BUFFER,this.verticies,b.DYNAMIC_DRAW),b.bindBuffer(b.ARRAY_BUFFER,this._uvBuffer),b.bufferData(b.ARRAY_BUFFER,this.uvs,b.STATIC_DRAW),b.bindBuffer(b.ARRAY_BUFFER,this._colorBuffer),b.bufferData(b.ARRAY_BUFFER,this.colors,b.STATIC_DRAW),b.bindBuffer(b.ELEMENT_ARRAY_BUFFER,this._indexBuffer),b.bufferData(b.ELEMENT_ARRAY_BUFFER,this.indices,b.STATIC_DRAW)},b.Strip.prototype._renderStrip=function(a){var b=a.gl,c=a.projection,d=a.offset,e=a.shaderManager.stripShader;b.blendFunc(b.ONE,b.ONE_MINUS_SRC_ALPHA),b.uniformMatrix3fv(e.translationMatrix,!1,this.worldTransform.toArray(!0)),b.uniform2f(e.projectionVector,c.x,-c.y),b.uniform2f(e.offsetVector,-d.x,-d.y),b.uniform1f(e.alpha,this.worldAlpha),this.dirty?(this.dirty=!1,b.bindBuffer(b.ARRAY_BUFFER,this._vertexBuffer),b.bufferData(b.ARRAY_BUFFER,this.verticies,b.STATIC_DRAW),b.vertexAttribPointer(e.aVertexPosition,2,b.FLOAT,!1,0,0),b.bindBuffer(b.ARRAY_BUFFER,this._uvBuffer),b.bufferData(b.ARRAY_BUFFER,this.uvs,b.STATIC_DRAW),b.vertexAttribPointer(e.aTextureCoord,2,b.FLOAT,!1,0,0),b.activeTexture(b.TEXTURE0),this.texture.baseTexture._dirty[b.id]?a.renderer.updateTexture(this.texture.baseTexture):b.bindTexture(b.TEXTURE_2D,this.texture.baseTexture._glTextures[b.id]),b.bindBuffer(b.ELEMENT_ARRAY_BUFFER,this._indexBuffer),b.bufferData(b.ELEMENT_ARRAY_BUFFER,this.indices,b.STATIC_DRAW)):(b.bindBuffer(b.ARRAY_BUFFER,this._vertexBuffer),b.bufferSubData(b.ARRAY_BUFFER,0,this.verticies),b.vertexAttribPointer(e.aVertexPosition,2,b.FLOAT,!1,0,0),b.bindBuffer(b.ARRAY_BUFFER,this._uvBuffer),b.vertexAttribPointer(e.aTextureCoord,2,b.FLOAT,!1,0,0),b.activeTexture(b.TEXTURE0),this.texture.baseTexture._dirty[b.id]?a.renderer.updateTexture(this.texture.baseTexture):b.bindTexture(b.TEXTURE_2D,this.texture.baseTexture._glTextures[b.id]),b.bindBuffer(b.ELEMENT_ARRAY_BUFFER,this._indexBuffer)),b.drawElements(b.TRIANGLE_STRIP,this.indices.length,b.UNSIGNED_SHORT,0)},b.Strip.prototype._renderCanvas=function(a){var b=a.context,c=this.worldTransform;a.roundPixels?b.setTransform(c.a,c.b,c.c,c.d,0|c.tx,0|c.ty):b.setTransform(c.a,c.b,c.c,c.d,c.tx,c.ty);var d=this,e=d.verticies,f=d.uvs,g=e.length/2;this.count++;for(var h=0;g-2>h;h++){var i=2*h,j=e[i],k=e[i+2],l=e[i+4],m=e[i+1],n=e[i+3],o=e[i+5];if(this.padding>0){var p=(j+k+l)/3,q=(m+n+o)/3,r=j-p,s=m-q,t=Math.sqrt(r*r+s*s);j=p+r/t*(t+3),m=q+s/t*(t+3),r=k-p,s=n-q,t=Math.sqrt(r*r+s*s),k=p+r/t*(t+3),n=q+s/t*(t+3),r=l-p,s=o-q,t=Math.sqrt(r*r+s*s),l=p+r/t*(t+3),o=q+s/t*(t+3)}var u=f[i]*d.texture.width,v=f[i+2]*d.texture.width,w=f[i+4]*d.texture.width,x=f[i+1]*d.texture.height,y=f[i+3]*d.texture.height,z=f[i+5]*d.texture.height;b.save(),b.beginPath(),b.moveTo(j,m),b.lineTo(k,n),b.lineTo(l,o),b.closePath(),b.clip();var A=u*y+x*w+v*z-y*w-x*v-u*z,B=j*y+x*l+k*z-y*l-x*k-j*z,C=u*k+j*w+v*l-k*w-j*v-u*l,D=u*y*l+x*k*w+j*v*z-j*y*w-x*v*l-u*k*z,E=m*y+x*o+n*z-y*o-x*n-m*z,F=u*n+m*w+v*o-n*w-m*v-u*o,G=u*y*o+x*n*w+m*v*z-m*y*w-x*v*o-u*n*z;b.transform(B/A,E/A,C/A,F/A,D/A,G/A),b.drawImage(d.texture.baseTexture.source,0,0),b.restore()}},b.Strip.prototype.renderStripFlat=function(a){var b=this.context,c=a.verticies,d=c.length/2;this.count++,b.beginPath();for(var e=1;d-2>e;e++){var f=2*e,g=c[f],h=c[f+2],i=c[f+4],j=c[f+1],k=c[f+3],l=c[f+5];b.moveTo(g,j),b.lineTo(h,k),b.lineTo(i,l)}b.fillStyle="#FF0000",b.fill(),b.closePath()},b.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},b.Rope=function(a,c){b.Strip.call(this,a),this.points=c,this.verticies=new b.Float32Array(4*c.length),this.uvs=new b.Float32Array(4*c.length),this.colors=new b.Float32Array(2*c.length),this.indices=new b.Uint16Array(2*c.length),this.refresh()},b.Rope.prototype=Object.create(b.Strip.prototype),b.Rope.prototype.constructor=b.Rope,b.Rope.prototype.refresh=function(){var a=this.points;if(!(a.length<1)){var b=this.uvs,c=a[0],d=this.indices,e=this.colors;this.count-=.2,b[0]=0,b[1]=0,b[2]=0,b[3]=1,e[0]=1,e[1]=1,d[0]=0,d[1]=1;for(var f,g,h,i=a.length,j=1;i>j;j++)f=a[j],g=4*j,h=j/(i-1),j%2?(b[g]=h,b[g+1]=0,b[g+2]=h,b[g+3]=1):(b[g]=h,b[g+1]=0,b[g+2]=h,b[g+3]=1),g=2*j,e[g]=1,e[g+1]=1,g=2*j,d[g]=g,d[g+1]=g+1,c=f}},b.Rope.prototype.updateTransform=function(){var a=this.points;if(!(a.length<1)){var c,d=a[0],e={x:0,y:0};this.count-=.2;for(var f,g,h,i,j,k=this.verticies,l=a.length,m=0;l>m;m++)f=a[m],g=4*m,c=m1&&(h=1),i=Math.sqrt(e.x*e.x+e.y*e.y),j=this.texture.height/2,e.x/=i,e.y/=i,e.x*=j,e.y*=j,k[g]=f.x+e.x,k[g+1]=f.y+e.y,k[g+2]=f.x-e.x,k[g+3]=f.y-e.y,d=f;b.DisplayObjectContainer.prototype.updateTransform.call(this)}},b.Rope.prototype.setTexture=function(a){this.texture=a},b.TilingSprite=function(a,c,d){b.Sprite.call(this,a),this._width=c||100,this._height=d||100,this.tileScale=new b.Point(1,1),this.tileScaleOffset=new b.Point(1,1),this.tilePosition=new b.Point(0,0),this.renderable=!0,this.tint=16777215,this.blendMode=b.blendModes.NORMAL},b.TilingSprite.prototype=Object.create(b.Sprite.prototype),b.TilingSprite.prototype.constructor=b.TilingSprite,Object.defineProperty(b.TilingSprite.prototype,"width",{get:function(){return this._width},set:function(a){this._width=a}}),Object.defineProperty(b.TilingSprite.prototype,"height",{get:function(){return this._height},set:function(a){this._height=a}}),b.TilingSprite.prototype.setTexture=function(a){this.texture!==a&&(this.texture=a,this.refreshTexture=!0,this.cachedTint=16777215)},b.TilingSprite.prototype._renderWebGL=function(a){if(this.visible!==!1&&0!==this.alpha){var c,d;for(this._mask&&(a.spriteBatch.stop(),a.maskManager.pushMask(this.mask,a),a.spriteBatch.start()),this._filters&&(a.spriteBatch.flush(),a.filterManager.pushFilter(this._filterBlock)),!this.tilingTexture||this.refreshTexture?(this.generateTilingTexture(!0),this.tilingTexture&&this.tilingTexture.needsUpdate&&(b.updateWebGLTexture(this.tilingTexture.baseTexture,a.gl),this.tilingTexture.needsUpdate=!1)):a.spriteBatch.renderTilingSprite(this),c=0,d=this.children.length;d>c;c++)this.children[c]._renderWebGL(a);a.spriteBatch.stop(),this._filters&&a.filterManager.popFilter(),this._mask&&a.maskManager.popMask(this._mask,a),a.spriteBatch.start()}},b.TilingSprite.prototype._renderCanvas=function(a){if(this.visible!==!1&&0!==this.alpha){var c=a.context;this._mask&&a.maskManager.pushMask(this._mask,c),c.globalAlpha=this.worldAlpha;var d,e,f=this.worldTransform,g=a.resolution;if(c.setTransform(f.a*g,f.c*g,f.b*g,f.d*g,f.tx*g,f.ty*g),!this.__tilePattern||this.refreshTexture){if(this.generateTilingTexture(!1),!this.tilingTexture)return;this.__tilePattern=c.createPattern(this.tilingTexture.baseTexture.source,"repeat")}this.blendMode!==a.currentBlendMode&&(a.currentBlendMode=this.blendMode,c.globalCompositeOperation=b.blendModesCanvas[a.currentBlendMode]);var h=this.tilePosition,i=this.tileScale;for(h.x%=this.tilingTexture.baseTexture.width,h.y%=this.tilingTexture.baseTexture.height,c.scale(i.x,i.y),c.translate(h.x+this.anchor.x*-this._width,h.y+this.anchor.y*-this._height),c.fillStyle=this.__tilePattern,c.fillRect(-h.x,-h.y,this._width/i.x,this._height/i.y),c.scale(1/i.x,1/i.y),c.translate(-h.x+this.anchor.x*this._width,-h.y+this.anchor.y*this._height),this._mask&&a.maskManager.popMask(a.context),d=0,e=this.children.length;e>d;d++)this.children[d]._renderCanvas(a)}},b.TilingSprite.prototype.getBounds=function(){var a=this._width,b=this._height,c=a*(1-this.anchor.x),d=a*-this.anchor.x,e=b*(1-this.anchor.y),f=b*-this.anchor.y,g=this.worldTransform,h=g.a,i=g.c,j=g.b,k=g.d,l=g.tx,m=g.ty,n=h*d+j*f+l,o=k*f+i*d+m,p=h*c+j*f+l,q=k*f+i*c+m,r=h*c+j*e+l,s=k*e+i*c+m,t=h*d+j*e+l,u=k*e+i*d+m,v=-1/0,w=-1/0,x=1/0,y=1/0;x=x>n?n:x,x=x>p?p:x,x=x>r?r:x,x=x>t?t:x,y=y>o?o:y,y=y>q?q:y,y=y>s?s:y,y=y>u?u:y,v=n>v?n:v,v=p>v?p:v,v=r>v?r:v,v=t>v?t:v,w=o>w?o:w,w=q>w?q:w,w=s>w?s:w,w=u>w?u:w;var z=this._bounds;return z.x=x,z.width=v-x,z.y=y,z.height=w-y,this._currentBounds=z,z},b.TilingSprite.prototype.onTextureUpdate=function(){},b.TilingSprite.prototype.generateTilingTexture=function(a){if(this.texture.baseTexture.hasLoaded){var c,d,e=this.originalTexture||this.texture,f=e.frame,g=f.width!==e.baseTexture.width||f.height!==e.baseTexture.height,h=!1;if(a?(c=b.getNextPowerOfTwo(f.width),d=b.getNextPowerOfTwo(f.height),(f.width!==c||f.height!==d)&&(h=!0)):g&&(c=f.width,d=f.height,h=!0),h){var i;this.tilingTexture&&this.tilingTexture.isTiling?(i=this.tilingTexture.canvasBuffer,i.resize(c,d),this.tilingTexture.baseTexture.width=c,this.tilingTexture.baseTexture.height=d,this.tilingTexture.needsUpdate=!0):(i=new b.CanvasBuffer(c,d),this.tilingTexture=b.Texture.fromCanvas(i.canvas),this.tilingTexture.canvasBuffer=i,this.tilingTexture.isTiling=!0),i.context.drawImage(e.baseTexture.source,e.crop.x,e.crop.y,e.crop.width,e.crop.height,0,0,c,d),this.tileScaleOffset.x=f.width/c,this.tileScaleOffset.y=f.height/d}else this.tilingTexture&&this.tilingTexture.isTiling&&this.tilingTexture.destroy(!0),this.tileScaleOffset.x=1,this.tileScaleOffset.y=1,this.tilingTexture=e;this.refreshTexture=!1,this.originalTexture=this.texture,this.texture=this.tilingTexture,this.tilingTexture.baseTexture._powerOf2=!0}};var c={};c.BoneData=function(a,b){this.name=a,this.parent=b},c.BoneData.prototype={length:0,x:0,y:0,rotation:0,scaleX:1,scaleY:1},c.SlotData=function(a,b){this.name=a,this.boneData=b},c.SlotData.prototype={r:1,g:1,b:1,a:1,attachmentName:null},c.Bone=function(a,b){this.data=a,this.parent=b,this.setToSetupPose()},c.Bone.yDown=!1,c.Bone.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,m00:0,m01:0,worldX:0,m10:0,m11:0,worldY:0,worldRotation:0,worldScaleX:1,worldScaleY:1,updateWorldTransform:function(a,b){var d=this.parent;null!=d?(this.worldX=this.x*d.m00+this.y*d.m01+d.worldX,this.worldY=this.x*d.m10+this.y*d.m11+d.worldY,this.worldScaleX=d.worldScaleX*this.scaleX,this.worldScaleY=d.worldScaleY*this.scaleY,this.worldRotation=d.worldRotation+this.rotation):(this.worldX=this.x,this.worldY=this.y,this.worldScaleX=this.scaleX,this.worldScaleY=this.scaleY,this.worldRotation=this.rotation);var e=this.worldRotation*Math.PI/180,f=Math.cos(e),g=Math.sin(e);this.m00=f*this.worldScaleX,this.m10=g*this.worldScaleX,this.m01=-g*this.worldScaleY,this.m11=f*this.worldScaleY,a&&(this.m00=-this.m00,this.m01=-this.m01),b&&(this.m10=-this.m10,this.m11=-this.m11),c.Bone.yDown&&(this.m10=-this.m10,this.m11=-this.m11)},setToSetupPose:function(){var a=this.data;this.x=a.x,this.y=a.y,this.rotation=a.rotation,this.scaleX=a.scaleX,this.scaleY=a.scaleY}},c.Slot=function(a,b,c){this.data=a,this.skeleton=b,this.bone=c,this.setToSetupPose()},c.Slot.prototype={r:1,g:1,b:1,a:1,_attachmentTime:0,attachment:null,setAttachment:function(a){this.attachment=a,this._attachmentTime=this.skeleton.time},setAttachmentTime:function(a){this._attachmentTime=this.skeleton.time-a +},getAttachmentTime:function(){return this.skeleton.time-this._attachmentTime},setToSetupPose:function(){var a=this.data;this.r=a.r,this.g=a.g,this.b=a.b,this.a=a.a;for(var b=this.skeleton.data.slots,c=0,d=b.length;d>c;c++)if(b[c]==a){this.setAttachment(a.attachmentName?this.skeleton.getAttachmentBySlotIndex(c,a.attachmentName):null);break}}},c.Skin=function(a){this.name=a,this.attachments={}},c.Skin.prototype={addAttachment:function(a,b,c){this.attachments[a+":"+b]=c},getAttachment:function(a,b){return this.attachments[a+":"+b]},_attachAll:function(a,b){for(var c in b.attachments){var d=c.indexOf(":"),e=parseInt(c.substring(0,d),10),f=c.substring(d+1),g=a.slots[e];if(g.attachment&&g.attachment.name==f){var h=this.getAttachment(e,f);h&&g.setAttachment(h)}}}},c.Animation=function(a,b,c){this.name=a,this.timelines=b,this.duration=c},c.Animation.prototype={apply:function(a,b,c){c&&this.duration&&(b%=this.duration);for(var d=this.timelines,e=0,f=d.length;f>e;e++)d[e].apply(a,b,1)},mix:function(a,b,c,d){c&&this.duration&&(b%=this.duration);for(var e=this.timelines,f=0,g=e.length;g>f;f++)e[f].apply(a,b,d)}},c.binarySearch=function(a,b,c){var d=0,e=Math.floor(a.length/c)-2;if(!e)return c;for(var f=e>>>1;;){if(a[(f+1)*c]<=b?d=f+1:e=f,d==e)return(d+1)*c;f=d+e>>>1}},c.linearSearch=function(a,b,c){for(var d=0,e=a.length-c;e>=d;d+=c)if(a[d]>b)return d;return-1},c.Curves=function(a){this.curves=[],this.curves.length=6*(a-1)},c.Curves.prototype={setLinear:function(a){this.curves[6*a]=0},setStepped:function(a){this.curves[6*a]=-1},setCurve:function(a,b,c,d,e){var f=.1,g=f*f,h=g*f,i=3*f,j=3*g,k=6*g,l=6*h,m=2*-b+d,n=2*-c+e,o=3*(b-d)+1,p=3*(c-e)+1,q=6*a,r=this.curves;r[q]=b*i+m*j+o*h,r[q+1]=c*i+n*j+p*h,r[q+2]=m*k+o*l,r[q+3]=n*k+p*l,r[q+4]=o*l,r[q+5]=p*l},getCurvePercent:function(a,b){b=0>b?0:b>1?1:b;var c=6*a,d=this.curves,e=d[c];if(!e)return b;if(-1==e)return 0;for(var f=d[c+1],g=d[c+2],h=d[c+3],i=d[c+4],j=d[c+5],k=e,l=f,m=8;;){if(k>=b){var n=k-e,o=l-f;return o+(l-o)*(b-n)/(k-n)}if(!m)break;m--,e+=g,f+=h,g+=i,h+=j,k+=e,l+=f}return l+(1-l)*(b-k)/(1-k)}},c.RotateTimeline=function(a){this.curves=new c.Curves(a),this.frames=[],this.frames.length=2*a},c.RotateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/2},setFrame:function(a,b,c){a*=2,this.frames[a]=b,this.frames[a+1]=c},apply:function(a,b,d){var e,f=this.frames;if(!(b=f[f.length-2]){for(e=g.data.rotation+f[f.length-1]-g.rotation;e>180;)e-=360;for(;-180>e;)e+=360;return g.rotation+=e*d,void 0}var h=c.binarySearch(f,b,2),i=f[h-1],j=f[h],k=1-(b-j)/(f[h-2]-j);for(k=this.curves.getCurvePercent(h/2-1,k),e=f[h+1]-i;e>180;)e-=360;for(;-180>e;)e+=360;for(e=g.data.rotation+(i+e*k)-g.rotation;e>180;)e-=360;for(;-180>e;)e+=360;g.rotation+=e*d}}},c.TranslateTimeline=function(a){this.curves=new c.Curves(a),this.frames=[],this.frames.length=3*a},c.TranslateTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(a,b,c,d){a*=3,this.frames[a]=b,this.frames[a+1]=c,this.frames[a+2]=d},apply:function(a,b,d){var e=this.frames;if(!(b=e[e.length-3])return f.x+=(f.data.x+e[e.length-2]-f.x)*d,f.y+=(f.data.y+e[e.length-1]-f.y)*d,void 0;var g=c.binarySearch(e,b,3),h=e[g-2],i=e[g-1],j=e[g],k=1-(b-j)/(e[g+-3]-j);k=this.curves.getCurvePercent(g/3-1,k),f.x+=(f.data.x+h+(e[g+1]-h)*k-f.x)*d,f.y+=(f.data.y+i+(e[g+2]-i)*k-f.y)*d}}},c.ScaleTimeline=function(a){this.curves=new c.Curves(a),this.frames=[],this.frames.length=3*a},c.ScaleTimeline.prototype={boneIndex:0,getFrameCount:function(){return this.frames.length/3},setFrame:function(a,b,c,d){a*=3,this.frames[a]=b,this.frames[a+1]=c,this.frames[a+2]=d},apply:function(a,b,d){var e=this.frames;if(!(b=e[e.length-3])return f.scaleX+=(f.data.scaleX-1+e[e.length-2]-f.scaleX)*d,f.scaleY+=(f.data.scaleY-1+e[e.length-1]-f.scaleY)*d,void 0;var g=c.binarySearch(e,b,3),h=e[g-2],i=e[g-1],j=e[g],k=1-(b-j)/(e[g+-3]-j);k=this.curves.getCurvePercent(g/3-1,k),f.scaleX+=(f.data.scaleX-1+h+(e[g+1]-h)*k-f.scaleX)*d,f.scaleY+=(f.data.scaleY-1+i+(e[g+2]-i)*k-f.scaleY)*d}}},c.ColorTimeline=function(a){this.curves=new c.Curves(a),this.frames=[],this.frames.length=5*a},c.ColorTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length/5},setFrame:function(a,b,c,d,e,f){a*=5,this.frames[a]=b,this.frames[a+1]=c,this.frames[a+2]=d,this.frames[a+3]=e,this.frames[a+4]=f},apply:function(a,b,d){var e=this.frames;if(!(b=e[e.length-5]){var g=e.length-1;return f.r=e[g-3],f.g=e[g-2],f.b=e[g-1],f.a=e[g],void 0}var h=c.binarySearch(e,b,5),i=e[h-4],j=e[h-3],k=e[h-2],l=e[h-1],m=e[h],n=1-(b-m)/(e[h-5]-m);n=this.curves.getCurvePercent(h/5-1,n);var o=i+(e[h+1]-i)*n,p=j+(e[h+2]-j)*n,q=k+(e[h+3]-k)*n,r=l+(e[h+4]-l)*n;1>d?(f.r+=(o-f.r)*d,f.g+=(p-f.g)*d,f.b+=(q-f.b)*d,f.a+=(r-f.a)*d):(f.r=o,f.g=p,f.b=q,f.a=r)}}},c.AttachmentTimeline=function(a){this.curves=new c.Curves(a),this.frames=[],this.frames.length=a,this.attachmentNames=[],this.attachmentNames.length=a},c.AttachmentTimeline.prototype={slotIndex:0,getFrameCount:function(){return this.frames.length},setFrame:function(a,b,c){this.frames[a]=b,this.attachmentNames[a]=c},apply:function(a,b){var d=this.frames;if(!(b=d[d.length-1]?d.length-1:c.binarySearch(d,b,1)-1;var f=this.attachmentNames[e];a.slots[this.slotIndex].setAttachment(f?a.getAttachmentBySlotIndex(this.slotIndex,f):null)}}},c.SkeletonData=function(){this.bones=[],this.slots=[],this.skins=[],this.animations=[]},c.SkeletonData.prototype={defaultSkin:null,findBone:function(a){for(var b=this.bones,c=0,d=b.length;d>c;c++)if(b[c].name==a)return b[c];return null},findBoneIndex:function(a){for(var b=this.bones,c=0,d=b.length;d>c;c++)if(b[c].name==a)return c;return-1},findSlot:function(a){for(var b=this.slots,c=0,d=b.length;d>c;c++)if(b[c].name==a)return slot[c];return null},findSlotIndex:function(a){for(var b=this.slots,c=0,d=b.length;d>c;c++)if(b[c].name==a)return c;return-1},findSkin:function(a){for(var b=this.skins,c=0,d=b.length;d>c;c++)if(b[c].name==a)return b[c];return null},findAnimation:function(a){for(var b=this.animations,c=0,d=b.length;d>c;c++)if(b[c].name==a)return b[c];return null}},c.Skeleton=function(a){this.data=a,this.bones=[];for(var b=0,d=a.bones.length;d>b;b++){var e=a.bones[b],f=e.parent?this.bones[a.bones.indexOf(e.parent)]:null;this.bones.push(new c.Bone(e,f))}for(this.slots=[],this.drawOrder=[],b=0,d=a.slots.length;d>b;b++){var g=a.slots[b],h=this.bones[a.bones.indexOf(g.boneData)],i=new c.Slot(g,this,h);this.slots.push(i),this.drawOrder.push(i)}},c.Skeleton.prototype={x:0,y:0,skin:null,r:1,g:1,b:1,a:1,time:0,flipX:!1,flipY:!1,updateWorldTransform:function(){for(var a=this.flipX,b=this.flipY,c=this.bones,d=0,e=c.length;e>d;d++)c[d].updateWorldTransform(a,b)},setToSetupPose:function(){this.setBonesToSetupPose(),this.setSlotsToSetupPose()},setBonesToSetupPose:function(){for(var a=this.bones,b=0,c=a.length;c>b;b++)a[b].setToSetupPose()},setSlotsToSetupPose:function(){for(var a=this.slots,b=0,c=a.length;c>b;b++)a[b].setToSetupPose(b)},getRootBone:function(){return this.bones.length?this.bones[0]:null},findBone:function(a){for(var b=this.bones,c=0,d=b.length;d>c;c++)if(b[c].data.name==a)return b[c];return null},findBoneIndex:function(a){for(var b=this.bones,c=0,d=b.length;d>c;c++)if(b[c].data.name==a)return c;return-1},findSlot:function(a){for(var b=this.slots,c=0,d=b.length;d>c;c++)if(b[c].data.name==a)return b[c];return null},findSlotIndex:function(a){for(var b=this.slots,c=0,d=b.length;d>c;c++)if(b[c].data.name==a)return c;return-1},setSkinByName:function(a){var b=this.data.findSkin(a);if(!b)throw"Skin not found: "+a;this.setSkin(b)},setSkin:function(a){this.skin&&a&&a._attachAll(this,this.skin),this.skin=a},getAttachmentBySlotName:function(a,b){return this.getAttachmentBySlotIndex(this.data.findSlotIndex(a),b)},getAttachmentBySlotIndex:function(a,b){if(this.skin){var c=this.skin.getAttachment(a,b);if(c)return c}return this.data.defaultSkin?this.data.defaultSkin.getAttachment(a,b):null},setAttachment:function(a,b){for(var c=this.slots,d=0,e=c.size;e>d;d++){var f=c[d];if(f.data.name==a){var g=null;if(b&&(g=this.getAttachment(d,b),null==g))throw"Attachment not found: "+b+", for slot: "+a;return f.setAttachment(g),void 0}}throw"Slot not found: "+a},update:function(a){time+=a}},c.AttachmentType={region:0},c.RegionAttachment=function(){this.offset=[],this.offset.length=8,this.uvs=[],this.uvs.length=8},c.RegionAttachment.prototype={x:0,y:0,rotation:0,scaleX:1,scaleY:1,width:0,height:0,rendererObject:null,regionOffsetX:0,regionOffsetY:0,regionWidth:0,regionHeight:0,regionOriginalWidth:0,regionOriginalHeight:0,setUVs:function(a,b,c,d,e){var f=this.uvs;e?(f[2]=a,f[3]=d,f[4]=a,f[5]=b,f[6]=c,f[7]=b,f[0]=c,f[1]=d):(f[0]=a,f[1]=d,f[2]=a,f[3]=b,f[4]=c,f[5]=b,f[6]=c,f[7]=d)},updateOffset:function(){var a=this.width/this.regionOriginalWidth*this.scaleX,b=this.height/this.regionOriginalHeight*this.scaleY,c=-this.width/2*this.scaleX+this.regionOffsetX*a,d=-this.height/2*this.scaleY+this.regionOffsetY*b,e=c+this.regionWidth*a,f=d+this.regionHeight*b,g=this.rotation*Math.PI/180,h=Math.cos(g),i=Math.sin(g),j=c*h+this.x,k=c*i,l=d*h+this.y,m=d*i,n=e*h+this.x,o=e*i,p=f*h+this.y,q=f*i,r=this.offset;r[0]=j-m,r[1]=l+k,r[2]=j-q,r[3]=p+k,r[4]=n-q,r[5]=p+o,r[6]=n-m,r[7]=l+o},computeVertices:function(a,b,c,d){a+=c.worldX,b+=c.worldY;var e=c.m00,f=c.m01,g=c.m10,h=c.m11,i=this.offset;d[0]=i[0]*e+i[1]*f+a,d[1]=i[0]*g+i[1]*h+b,d[2]=i[2]*e+i[3]*f+a,d[3]=i[2]*g+i[3]*h+b,d[4]=i[4]*e+i[5]*f+a,d[5]=i[4]*g+i[5]*h+b,d[6]=i[6]*e+i[7]*f+a,d[7]=i[6]*g+i[7]*h+b}},c.AnimationStateData=function(a){this.skeletonData=a,this.animationToMixTime={}},c.AnimationStateData.prototype={defaultMix:0,setMixByName:function(a,b,c){var d=this.skeletonData.findAnimation(a);if(!d)throw"Animation not found: "+a;var e=this.skeletonData.findAnimation(b);if(!e)throw"Animation not found: "+b;this.setMix(d,e,c)},setMix:function(a,b,c){this.animationToMixTime[a.name+":"+b.name]=c},getMix:function(a,b){var c=this.animationToMixTime[a.name+":"+b.name];return c?c:this.defaultMix}},c.AnimationState=function(a){this.data=a,this.queue=[]},c.AnimationState.prototype={animationSpeed:1,current:null,previous:null,currentTime:0,previousTime:0,currentLoop:!1,previousLoop:!1,mixTime:0,mixDuration:0,update:function(a){if(this.currentTime+=a*this.animationSpeed,this.previousTime+=a,this.mixTime+=a,this.queue.length>0){var b=this.queue[0];this.currentTime>=b.delay&&(this._setAnimation(b.animation,b.loop),this.queue.shift())}},apply:function(a){if(this.current)if(this.previous){this.previous.apply(a,this.previousTime,this.previousLoop);var b=this.mixTime/this.mixDuration;b>=1&&(b=1,this.previous=null),this.current.mix(a,this.currentTime,this.currentLoop,b)}else this.current.apply(a,this.currentTime,this.currentLoop)},clearAnimation:function(){this.previous=null,this.current=null,this.queue.length=0},_setAnimation:function(a,b){this.previous=null,a&&this.current&&(this.mixDuration=this.data.getMix(this.current,a),this.mixDuration>0&&(this.mixTime=0,this.previous=this.current,this.previousTime=this.currentTime,this.previousLoop=this.currentLoop)),this.current=a,this.currentLoop=b,this.currentTime=0},setAnimationByName:function(a,b){var c=this.data.skeletonData.findAnimation(a);if(!c)throw"Animation not found: "+a;this.setAnimation(c,b)},setAnimation:function(a,b){this.queue.length=0,this._setAnimation(a,b)},addAnimationByName:function(a,b,c){var d=this.data.skeletonData.findAnimation(a);if(!d)throw"Animation not found: "+a;this.addAnimation(d,b,c)},addAnimation:function(a,b,c){var d={};if(d.animation=a,d.loop=b,!c||0>=c){var e=this.queue.length?this.queue[this.queue.length-1].animation:this.current;c=null!=e?e.duration-this.data.getMix(e,a)+(c||0):0}d.delay=c,this.queue.push(d)},isComplete:function(){return!this.current||this.currentTime>=this.current.duration}},c.SkeletonJson=function(a){this.attachmentLoader=a},c.SkeletonJson.prototype={scale:1,readSkeletonData:function(a){for(var b,d=new c.SkeletonData,e=a.bones,f=0,g=e.length;g>f;f++){var h=e[f],i=null;if(h.parent&&(i=d.findBone(h.parent),!i))throw"Parent bone not found: "+h.parent;b=new c.BoneData(h.name,i),b.length=(h.length||0)*this.scale,b.x=(h.x||0)*this.scale,b.y=(h.y||0)*this.scale,b.rotation=h.rotation||0,b.scaleX=h.scaleX||1,b.scaleY=h.scaleY||1,d.bones.push(b)}var j=a.slots;for(f=0,g=j.length;g>f;f++){var k=j[f];if(b=d.findBone(k.bone),!b)throw"Slot bone not found: "+k.bone;var l=new c.SlotData(k.name,b),m=k.color;m&&(l.r=c.SkeletonJson.toColor(m,0),l.g=c.SkeletonJson.toColor(m,1),l.b=c.SkeletonJson.toColor(m,2),l.a=c.SkeletonJson.toColor(m,3)),l.attachmentName=k.attachment,d.slots.push(l)}var n=a.skins;for(var o in n)if(n.hasOwnProperty(o)){var p=n[o],q=new c.Skin(o);for(var r in p)if(p.hasOwnProperty(r)){var s=d.findSlotIndex(r),t=p[r];for(var u in t)if(t.hasOwnProperty(u)){var v=this.readAttachment(q,u,t[u]);null!=v&&q.addAttachment(s,u,v)}}d.skins.push(q),"default"==q.name&&(d.defaultSkin=q)}var w=a.animations;for(var x in w)w.hasOwnProperty(x)&&this.readAnimation(x,w[x],d);return d},readAttachment:function(a,b,d){b=d.name||b;var e=c.AttachmentType[d.type||"region"];if(e==c.AttachmentType.region){var f=new c.RegionAttachment;return f.x=(d.x||0)*this.scale,f.y=(d.y||0)*this.scale,f.scaleX=d.scaleX||1,f.scaleY=d.scaleY||1,f.rotation=d.rotation||0,f.width=(d.width||32)*this.scale,f.height=(d.height||32)*this.scale,f.updateOffset(),f.rendererObject={},f.rendererObject.name=b,f.rendererObject.scale={},f.rendererObject.scale.x=f.scaleX,f.rendererObject.scale.y=f.scaleY,f.rendererObject.rotation=-f.rotation*Math.PI/180,f}throw"Unknown attachment type: "+e},readAnimation:function(a,b,d){var e,f,g,h,i,j,k,l=[],m=0,n=b.bones;for(var o in n)if(n.hasOwnProperty(o)){var p=d.findBoneIndex(o);if(-1==p)throw"Bone not found: "+o;var q=n[o];for(g in q)if(q.hasOwnProperty(g))if(i=q[g],"rotate"==g){for(f=new c.RotateTimeline(i.length),f.boneIndex=p,e=0,j=0,k=i.length;k>j;j++)h=i[j],f.setFrame(e,h.time,h.angle),c.SkeletonJson.readCurve(f,e,h),e++;l.push(f),m=Math.max(m,f.frames[2*f.getFrameCount()-2])}else{if("translate"!=g&&"scale"!=g)throw"Invalid timeline type for a bone: "+g+" ("+o+")";var r=1;for("scale"==g?f=new c.ScaleTimeline(i.length):(f=new c.TranslateTimeline(i.length),r=this.scale),f.boneIndex=p,e=0,j=0,k=i.length;k>j;j++){h=i[j];var s=(h.x||0)*r,t=(h.y||0)*r;f.setFrame(e,h.time,s,t),c.SkeletonJson.readCurve(f,e,h),e++}l.push(f),m=Math.max(m,f.frames[3*f.getFrameCount()-3])}}var u=b.slots;for(var v in u)if(u.hasOwnProperty(v)){var w=u[v],x=d.findSlotIndex(v);for(g in w)if(w.hasOwnProperty(g))if(i=w[g],"color"==g){for(f=new c.ColorTimeline(i.length),f.slotIndex=x,e=0,j=0,k=i.length;k>j;j++){h=i[j];var y=h.color,z=c.SkeletonJson.toColor(y,0),A=c.SkeletonJson.toColor(y,1),B=c.SkeletonJson.toColor(y,2),C=c.SkeletonJson.toColor(y,3);f.setFrame(e,h.time,z,A,B,C),c.SkeletonJson.readCurve(f,e,h),e++}l.push(f),m=Math.max(m,f.frames[5*f.getFrameCount()-5])}else{if("attachment"!=g)throw"Invalid timeline type for a slot: "+g+" ("+v+")";for(f=new c.AttachmentTimeline(i.length),f.slotIndex=x,e=0,j=0,k=i.length;k>j;j++)h=i[j],f.setFrame(e++,h.time,h.name);l.push(f),m=Math.max(m,f.frames[f.getFrameCount()-1])}}d.animations.push(new c.Animation(a,l,m))}},c.SkeletonJson.readCurve=function(a,b,c){var d=c.curve;d&&("stepped"==d?a.curves.setStepped(b):d instanceof Array&&a.curves.setCurve(b,d[0],d[1],d[2],d[3]))},c.SkeletonJson.toColor=function(a,b){if(8!=a.length)throw"Color hexidecimal length must be 8, recieved: "+a;return parseInt(a.substr(2*b,2),16)/255},c.Atlas=function(a,b){this.textureLoader=b,this.pages=[],this.regions=[];var d=new c.AtlasReader(a),e=[];e.length=4;for(var f=null;;){var g=d.readLine();if(null==g)break;if(g=d.trim(g),g.length)if(f){var h=new c.AtlasRegion;h.name=g,h.page=f,h.rotate="true"==d.readValue(),d.readTuple(e);var i=parseInt(e[0],10),j=parseInt(e[1],10);d.readTuple(e);var k=parseInt(e[0],10),l=parseInt(e[1],10);h.u=i/f.width,h.v=j/f.height,h.rotate?(h.u2=(i+l)/f.width,h.v2=(j+k)/f.height):(h.u2=(i+k)/f.width,h.v2=(j+l)/f.height),h.x=i,h.y=j,h.width=Math.abs(k),h.height=Math.abs(l),4==d.readTuple(e)&&(h.splits=[parseInt(e[0],10),parseInt(e[1],10),parseInt(e[2],10),parseInt(e[3],10)],4==d.readTuple(e)&&(h.pads=[parseInt(e[0],10),parseInt(e[1],10),parseInt(e[2],10),parseInt(e[3],10)],d.readTuple(e))),h.originalWidth=parseInt(e[0],10),h.originalHeight=parseInt(e[1],10),d.readTuple(e),h.offsetX=parseInt(e[0],10),h.offsetY=parseInt(e[1],10),h.index=parseInt(d.readValue(),10),this.regions.push(h)}else{f=new c.AtlasPage,f.name=g,f.format=c.Atlas.Format[d.readValue()],d.readTuple(e),f.minFilter=c.Atlas.TextureFilter[e[0]],f.magFilter=c.Atlas.TextureFilter[e[1]];var m=d.readValue();f.uWrap=c.Atlas.TextureWrap.clampToEdge,f.vWrap=c.Atlas.TextureWrap.clampToEdge,"x"==m?f.uWrap=c.Atlas.TextureWrap.repeat:"y"==m?f.vWrap=c.Atlas.TextureWrap.repeat:"xy"==m&&(f.uWrap=f.vWrap=c.Atlas.TextureWrap.repeat),b.load(f,g),this.pages.push(f)}else f=null}},c.Atlas.prototype={findRegion:function(a){for(var b=this.regions,c=0,d=b.length;d>c;c++)if(b[c].name==a)return b[c];return null},dispose:function(){for(var a=this.pages,b=0,c=a.length;c>b;b++)this.textureLoader.unload(a[b].rendererObject)},updateUVs:function(a){for(var b=this.regions,c=0,d=b.length;d>c;c++){var e=b[c];e.page==a&&(e.u=e.x/a.width,e.v=e.y/a.height,e.rotate?(e.u2=(e.x+e.height)/a.width,e.v2=(e.y+e.width)/a.height):(e.u2=(e.x+e.width)/a.width,e.v2=(e.y+e.height)/a.height))}}},c.Atlas.Format={alpha:0,intensity:1,luminanceAlpha:2,rgb565:3,rgba4444:4,rgb888:5,rgba8888:6},c.Atlas.TextureFilter={nearest:0,linear:1,mipMap:2,mipMapNearestNearest:3,mipMapLinearNearest:4,mipMapNearestLinear:5,mipMapLinearLinear:6},c.Atlas.TextureWrap={mirroredRepeat:0,clampToEdge:1,repeat:2},c.AtlasPage=function(){},c.AtlasPage.prototype={name:null,format:null,minFilter:null,magFilter:null,uWrap:null,vWrap:null,rendererObject:null,width:0,height:0},c.AtlasRegion=function(){},c.AtlasRegion.prototype={page:null,name:null,x:0,y:0,width:0,height:0,u:0,v:0,u2:0,v2:0,offsetX:0,offsetY:0,originalWidth:0,originalHeight:0,index:0,rotate:!1,splits:null,pads:null},c.AtlasReader=function(a){this.lines=a.split(/\r\n|\r|\n/)},c.AtlasReader.prototype={index:0,trim:function(a){return a.replace(/^\s+|\s+$/g,"")},readLine:function(){return this.index>=this.lines.length?null:this.lines[this.index++]},readValue:function(){var a=this.readLine(),b=a.indexOf(":");if(-1==b)throw"Invalid line: "+a;return this.trim(a.substring(b+1))},readTuple:function(a){var b=this.readLine(),c=b.indexOf(":");if(-1==c)throw"Invalid line: "+b;for(var d=0,e=c+1;3>d;d++){var f=b.indexOf(",",e);if(-1==f){if(!d)throw"Invalid line: "+b;break}a[d]=this.trim(b.substr(e,f-e)),e=f+1}return a[d]=this.trim(b.substring(e)),d+1}},c.AtlasAttachmentLoader=function(a){this.atlas=a},c.AtlasAttachmentLoader.prototype={newAttachment:function(a,b,d){switch(b){case c.AttachmentType.region:var e=this.atlas.findRegion(d);if(!e)throw"Region not found in atlas: "+d+" ("+b+")";var f=new c.RegionAttachment(d);return f.rendererObject=e,f.setUVs(e.u,e.v,e.u2,e.v2,e.rotate),f.regionOffsetX=e.offsetX,f.regionOffsetY=e.offsetY,f.regionWidth=e.width,f.regionHeight=e.height,f.regionOriginalWidth=e.originalWidth,f.regionOriginalHeight=e.originalHeight,f}throw"Unknown attachment type: "+b}},c.Bone.yDown=!0,b.AnimCache={},b.Spine=function(a){if(b.DisplayObjectContainer.call(this),this.spineData=b.AnimCache[a],!this.spineData)throw new Error("Spine data must be preloaded using PIXI.SpineLoader or PIXI.AssetLoader: "+a);this.skeleton=new c.Skeleton(this.spineData),this.skeleton.updateWorldTransform(),this.stateData=new c.AnimationStateData(this.spineData),this.state=new c.AnimationState(this.stateData),this.slotContainers=[];for(var d=0,e=this.skeleton.drawOrder.length;e>d;d++){var f=this.skeleton.drawOrder[d],g=f.attachment,h=new b.DisplayObjectContainer;if(this.slotContainers.push(h),this.addChild(h),g instanceof c.RegionAttachment){var i=g.rendererObject.name,j=this.createSprite(f,g.rendererObject);f.currentSprite=j,f.currentSpriteName=i,h.addChild(j)}}},b.Spine.prototype=Object.create(b.DisplayObjectContainer.prototype),b.Spine.prototype.constructor=b.Spine,b.Spine.prototype.updateTransform=function(){this.lastTime=this.lastTime||Date.now();var a=.001*(Date.now()-this.lastTime);this.lastTime=Date.now(),this.state.update(a),this.state.apply(this.skeleton),this.skeleton.updateWorldTransform();for(var d=this.skeleton.drawOrder,e=0,f=d.length;f>e;e++){var g=d[e],h=g.attachment,i=this.slotContainers[e];if(h instanceof c.RegionAttachment){if(h.rendererObject&&(!g.currentSpriteName||g.currentSpriteName!=h.name)){var j=h.rendererObject.name;if(void 0!==g.currentSprite&&(g.currentSprite.visible=!1),g.sprites=g.sprites||{},void 0!==g.sprites[j])g.sprites[j].visible=!0;else{var k=this.createSprite(g,h.rendererObject);i.addChild(k)}g.currentSprite=g.sprites[j],g.currentSpriteName=j}i.visible=!0;var l=g.bone;i.position.x=l.worldX+h.x*l.m00+h.y*l.m01,i.position.y=l.worldY+h.x*l.m10+h.y*l.m11,i.scale.x=l.worldScaleX,i.scale.y=l.worldScaleY,i.rotation=-(g.bone.worldRotation*Math.PI/180),i.alpha=g.a,g.currentSprite.tint=b.rgb2hex([g.r,g.g,g.b])}else i.visible=!1}b.DisplayObjectContainer.prototype.updateTransform.call(this)},b.Spine.prototype.createSprite=function(a,c){var d=b.TextureCache[c.name]?c.name:c.name+".png",e=new b.Sprite(b.Texture.fromFrame(d));return e.scale=c.scale,e.rotation=c.rotation,e.anchor.x=e.anchor.y=.5,a.sprites=a.sprites||{},a.sprites[c.name]=e,e},b.BaseTextureCache={},b.BaseTextureCacheIdGenerator=0,b.BaseTexture=function(a,c){if(this.resolution=1,this.width=100,this.height=100,this.scaleMode=c||b.scaleModes.DEFAULT,this.hasLoaded=!1,this.source=a,this._UID=b._UID++,this.premultipliedAlpha=!0,this._glTextures=[],this._dirty=[!0,!0,!0,!0],a){if((this.source.complete||this.source.getContext)&&this.source.width&&this.source.height)this.hasLoaded=!0,this.width=this.source.naturalWidth||this.source.width,this.height=this.source.naturalHeight||this.source.height,this.dirty();else{var d=this;this.source.onload=function(){d.hasLoaded=!0,d.width=d.source.naturalWidth||d.source.width,d.height=d.source.naturalHeight||d.source.height,d.dirty(),d.dispatchEvent({type:"loaded",content:d})},this.source.onerror=function(){d.dispatchEvent({type:"error",content:d})}}this.imageUrl=null,this._powerOf2=!1}},b.BaseTexture.prototype.constructor=b.BaseTexture,b.EventTarget.mixin(b.BaseTexture.prototype),b.BaseTexture.prototype.destroy=function(){this.imageUrl?(delete b.BaseTextureCache[this.imageUrl],delete b.TextureCache[this.imageUrl],this.imageUrl=null,this.source.src=""):this.source&&this.source._pixiId&&delete b.BaseTextureCache[this.source._pixiId],this.source=null;for(var a=this._glTextures.length-1;a>=0;a--){var c=this._glTextures[a],d=b.glContexts[a];d&&c&&d.deleteTexture(c)}this._glTextures.length=0},b.BaseTexture.prototype.updateSourceImage=function(a){this.hasLoaded=!1,this.source.src=null,this.source.src=a},b.BaseTexture.prototype.dirty=function(){for(var a=0;athis.baseTexture.width||a.y+a.height>this.baseTexture.height))throw new Error("Texture Error: frame does not fit inside the base Texture dimensions "+this);this.valid=a&&a.width&&a.height&&this.baseTexture.source&&this.baseTexture.hasLoaded,this.trim&&(this.width=this.trim.width,this.height=this.trim.height,this.frame.width=this.trim.width,this.frame.height=this.trim.height),this.valid&&this._updateUvs()},b.Texture.prototype._updateUvs=function(){this._uvs||(this._uvs=new b.TextureUvs);var a=this.crop,c=this.baseTexture.width,d=this.baseTexture.height;this._uvs.x0=a.x/c,this._uvs.y0=a.y/d,this._uvs.x1=(a.x+a.width)/c,this._uvs.y1=a.y/d,this._uvs.x2=(a.x+a.width)/c,this._uvs.y2=(a.y+a.height)/d,this._uvs.x3=a.x/c,this._uvs.y3=(a.y+a.height)/d},b.Texture.fromImage=function(a,c,d){var e=b.TextureCache[a];return e||(e=new b.Texture(b.BaseTexture.fromImage(a,c,d)),b.TextureCache[a]=e),e},b.Texture.fromFrame=function(a){var c=b.TextureCache[a];if(!c)throw new Error('The frameId "'+a+'" does not exist in the texture cache ');return c},b.Texture.fromCanvas=function(a,c){var d=b.BaseTexture.fromCanvas(a,c);return new b.Texture(d)},b.Texture.addTextureToCache=function(a,c){b.TextureCache[c]=a},b.Texture.removeTextureFromCache=function(a){var c=b.TextureCache[a];return delete b.TextureCache[a],delete b.BaseTextureCache[a],c},b.TextureUvs=function(){this.x0=0,this.y0=0,this.x1=0,this.y1=0,this.x2=0,this.y2=0,this.x3=0,this.y3=0},b.RenderTexture=function(a,c,d,e,f){if(this.width=a||100,this.height=c||100,this.resolution=f||1,this.frame=new b.Rectangle(0,0,this.width*this.resolution,this.height*this.resolution),this.crop=new b.Rectangle(0,0,this.width*this.resolution,this.height*this.resolution),this.baseTexture=new b.BaseTexture,this.baseTexture.width=this.width*this.resolution,this.baseTexture.height=this.height*this.resolution,this.baseTexture._glTextures=[],this.baseTexture.resolution=this.resolution,this.baseTexture.scaleMode=e||b.scaleModes.DEFAULT,this.baseTexture.hasLoaded=!0,b.Texture.call(this,this.baseTexture,new b.Rectangle(0,0,this.width,this.height)),this.renderer=d||b.defaultRenderer,this.renderer.type===b.WEBGL_RENDERER){var g=this.renderer.gl;this.baseTexture._dirty[g.id]=!1,this.textureBuffer=new b.FilterTexture(g,this.width*this.resolution,this.height*this.resolution,this.baseTexture.scaleMode),this.baseTexture._glTextures[g.id]=this.textureBuffer.texture,this.render=this.renderWebGL,this.projection=new b.Point(.5*this.width,.5*-this.height)}else this.render=this.renderCanvas,this.textureBuffer=new b.CanvasBuffer(this.width*this.resolution,this.height*this.resolution),this.baseTexture.source=this.textureBuffer.canvas;this.valid=!0,this._updateUvs()},b.RenderTexture.prototype=Object.create(b.Texture.prototype),b.RenderTexture.prototype.constructor=b.RenderTexture,b.RenderTexture.prototype.resize=function(a,c,d){(a!==this.width||c!==this.height)&&(this.valid=a>0&&c>0,this.width=this.frame.width=this.crop.width=a,this.height=this.frame.height=this.crop.height=c,d&&(this.baseTexture.width=this.width,this.baseTexture.height=this.height),this.renderer.type===b.WEBGL_RENDERER&&(this.projection.x=this.width/2,this.projection.y=-this.height/2),this.valid&&this.textureBuffer.resize(this.width*this.resolution,this.height*this.resolution))},b.RenderTexture.prototype.clear=function(){this.valid&&(this.renderer.type===b.WEBGL_RENDERER&&this.renderer.gl.bindFramebuffer(this.renderer.gl.FRAMEBUFFER,this.textureBuffer.frameBuffer),this.textureBuffer.clear())},b.RenderTexture.prototype.renderWebGL=function(a,b,c){if(this.valid){var d=a.worldTransform;d.identity(),d.translate(0,2*this.projection.y),b&&d.append(b),d.scale(1,-1),a.worldAlpha=1;for(var e=a.children,f=0,g=e.length;g>f;f++)e[f].updateTransform();var h=this.renderer.gl;h.viewport(0,0,this.width*this.resolution,this.height*this.resolution),h.bindFramebuffer(h.FRAMEBUFFER,this.textureBuffer.frameBuffer),c&&this.textureBuffer.clear(),this.renderer.spriteBatch.dirty=!0,this.renderer.renderDisplayObject(a,this.projection,this.textureBuffer.frameBuffer),this.renderer.spriteBatch.dirty=!0}},b.RenderTexture.prototype.renderCanvas=function(a,b,c){if(this.valid){var d=a.worldTransform;d.identity(),b&&d.append(b);for(var e=a.children,f=0,g=e.length;g>f;f++)e[f].updateTransform();c&&this.textureBuffer.clear();var h=this.textureBuffer.context,i=this.renderer.resolution;this.renderer.resolution=this.resolution,this.renderer.renderDisplayObject(a,h),this.renderer.resolution=i}},b.RenderTexture.prototype.getImage=function(){var a=new Image;return a.src=this.getBase64(),a},b.RenderTexture.prototype.getBase64=function(){return this.getCanvas().toDataURL()},b.RenderTexture.prototype.getCanvas=function(){if(this.renderer.type===b.WEBGL_RENDERER){var a=this.renderer.gl,c=this.textureBuffer.width,d=this.textureBuffer.height,e=new Uint8Array(4*c*d);a.bindFramebuffer(a.FRAMEBUFFER,this.textureBuffer.frameBuffer),a.readPixels(0,0,c,d,a.RGBA,a.UNSIGNED_BYTE,e),a.bindFramebuffer(a.FRAMEBUFFER,null);for(var f=new b.CanvasBuffer(c,d),g=f.context.getImageData(0,0,c,d),h=g.data,i=0;i0){if(f===g)this.atlas.meta.image.push(a[g]),d=this.atlas.meta.image.length-1,this.atlas.frames.push({}),c=-3;else if(c>0)if(c%7===1)null!=e&&(this.atlas.frames[d][e.name]=e),e={name:a[g],frame:{}};else{var j=a[g].split(" ");if(c%7===3)e.frame.x=Number(j[1].replace(",","")),e.frame.y=Number(j[2]);else if(c%7===4)e.frame.w=Number(j[1].replace(",","")),e.frame.h=Number(j[2]);else if(c%7===5){var k={x:0,y:0,w:Number(j[1].replace(",","")),h:Number(j[2])};k.w>e.frame.w||k.h>e.frame.h?(e.trimmed=!0,e.realSize=k):e.trimmed=!1}}c++}if(null!=e&&(this.atlas.frames[d][e.name]=e),this.atlas.meta.image.length>0){for(this.images=[],h=0;hthis.currentImageId?(this.currentImageId++,this.images[this.currentImageId].load()):(this.loaded=!0,this.emit("loaded",{content:this}))},b.AtlasLoader.prototype.onError=function(){this.emit("error",{content:this})},b.SpriteSheetLoader=function(a,b){this.url=a,this.crossorigin=b,this.baseUrl=a.replace(/[^\/]*$/,""),this.texture=null,this.frames={}},b.SpriteSheetLoader.prototype.constructor=b.SpriteSheetLoader,b.EventTarget.mixin(b.SpriteSheetLoader.prototype),b.SpriteSheetLoader.prototype.load=function(){var a=this,c=new b.JsonLoader(this.url,this.crossorigin);c.on("loaded",function(b){a.json=b.data.content.json,a.onLoaded()}),c.load()},b.SpriteSheetLoader.prototype.onLoaded=function(){this.emit("loaded",{content:this})},b.ImageLoader=function(a,c){this.texture=b.Texture.fromImage(a,c),this.frames=[]},b.ImageLoader.prototype.constructor=b.ImageLoader,b.EventTarget.mixin(b.ImageLoader.prototype),b.ImageLoader.prototype.load=function(){this.texture.baseTexture.hasLoaded?this.onLoaded():this.texture.baseTexture.on("loaded",this.onLoaded.bind(this))},b.ImageLoader.prototype.onLoaded=function(){this.emit("loaded",{content:this})},b.ImageLoader.prototype.loadFramedSpriteSheet=function(a,c,d){this.frames=[];for(var e=Math.floor(this.texture.width/a),f=Math.floor(this.texture.height/c),g=0,h=0;f>h;h++)for(var i=0;e>i;i++,g++){var j=new b.Texture(this.texture.baseTexture,{x:i*a,y:h*c,width:a,height:c});this.frames.push(j),d&&(b.TextureCache[d+"-"+g]=j)}this.load()},b.BitmapFontLoader=function(a,b){this.url=a,this.crossorigin=b,this.baseUrl=a.replace(/[^\/]*$/,""),this.texture=null},b.BitmapFontLoader.prototype.constructor=b.BitmapFontLoader,b.EventTarget.mixin(b.BitmapFontLoader.prototype),b.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new b.AjaxRequest,this.ajaxRequest.onreadystatechange=this.onXMLLoaded.bind(this),this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},b.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4===this.ajaxRequest.readyState&&(200===this.ajaxRequest.status||-1===window.location.protocol.indexOf("http"))){var a=this.ajaxRequest.responseXML;if(!a||/MSIE 9/i.test(navigator.userAgent)||navigator.isCocoonJS)if("function"==typeof window.DOMParser){var c=new DOMParser;a=c.parseFromString(this.ajaxRequest.responseText,"text/xml")}else{var d=document.createElement("div");d.innerHTML=this.ajaxRequest.responseText,a=d}var e=this.baseUrl+a.getElementsByTagName("page")[0].getAttribute("file"),f=new b.ImageLoader(e,this.crossorigin);this.texture=f.texture.baseTexture;var g={},h=a.getElementsByTagName("info")[0],i=a.getElementsByTagName("common")[0];g.font=h.getAttribute("face"),g.size=parseInt(h.getAttribute("size"),10),g.lineHeight=parseInt(i.getAttribute("lineHeight"),10),g.chars={};for(var j=a.getElementsByTagName("char"),k=0;ka;a++)this.shaders[a].dirty=!0},b.AlphaMaskFilter=function(a){b.AbstractFilter.call(this),this.passes=[this],a.baseTexture._powerOf2=!0,this.uniforms={mask:{type:"sampler2D",value:a},mapDimensions:{type:"2f",value:{x:1,y:5112}},dimensions:{type:"4fv",value:[0,0,0,0]}},a.baseTexture.hasLoaded?(this.uniforms.mask.value.x=a.width,this.uniforms.mask.value.y=a.height):(this.boundLoadedFunction=this.onTextureLoaded.bind(this),a.baseTexture.on("loaded",this.boundLoadedFunction)),this.fragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying vec4 vColor;","uniform sampler2D mask;","uniform sampler2D uSampler;","uniform vec2 offset;","uniform vec4 dimensions;","uniform vec2 mapDimensions;","void main(void) {"," vec2 mapCords = vTextureCoord.xy;"," mapCords += (dimensions.zw + offset)/ dimensions.xy ;"," mapCords.y *= -1.0;"," mapCords.y += 1.0;"," mapCords *= dimensions.xy / mapDimensions;"," vec4 original = texture2D(uSampler, vTextureCoord);"," float maskAlpha = texture2D(mask, mapCords).r;"," original *= maskAlpha;"," gl_FragColor = original;","}"]},b.AlphaMaskFilter.prototype=Object.create(b.AbstractFilter.prototype),b.AlphaMaskFilter.prototype.constructor=b.AlphaMaskFilter,b.AlphaMaskFilter.prototype.onTextureLoaded=function(){this.uniforms.mapDimensions.value.x=this.uniforms.mask.value.width,this.uniforms.mapDimensions.value.y=this.uniforms.mask.value.height,this.uniforms.mask.value.baseTexture.off("loaded",this.boundLoadedFunction)},Object.defineProperty(b.AlphaMaskFilter.prototype,"map",{get:function(){return this.uniforms.mask.value},set:function(a){this.uniforms.mask.value=a}}),b.ColorMatrixFilter=function(){b.AbstractFilter.call(this),this.passes=[this],this.uniforms={matrix:{type:"mat4",value:[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]}},this.fragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying vec4 vColor;","uniform float invert;","uniform mat4 matrix;","uniform sampler2D uSampler;","void main(void) {"," gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;","}"]},b.ColorMatrixFilter.prototype=Object.create(b.AbstractFilter.prototype),b.ColorMatrixFilter.prototype.constructor=b.ColorMatrixFilter,Object.defineProperty(b.ColorMatrixFilter.prototype,"matrix",{get:function(){return this.uniforms.matrix.value},set:function(a){this.uniforms.matrix.value=a}}),b.GrayFilter=function(){b.AbstractFilter.call(this),this.passes=[this],this.uniforms={gray:{type:"1f",value:1}},this.fragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying vec4 vColor;","uniform sampler2D uSampler;","uniform float gray;","void main(void) {"," gl_FragColor = texture2D(uSampler, vTextureCoord);"," gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);","}"]},b.GrayFilter.prototype=Object.create(b.AbstractFilter.prototype),b.GrayFilter.prototype.constructor=b.GrayFilter,Object.defineProperty(b.GrayFilter.prototype,"gray",{get:function(){return this.uniforms.gray.value},set:function(a){this.uniforms.gray.value=a}}),b.DisplacementFilter=function(a){b.AbstractFilter.call(this),this.passes=[this],a.baseTexture._powerOf2=!0,this.uniforms={displacementMap:{type:"sampler2D",value:a},scale:{type:"2f",value:{x:30,y:30}},offset:{type:"2f",value:{x:0,y:0}},mapDimensions:{type:"2f",value:{x:1,y:5112}},dimensions:{type:"4fv",value:[0,0,0,0]}},a.baseTexture.hasLoaded?(this.uniforms.mapDimensions.value.x=a.width,this.uniforms.mapDimensions.value.y=a.height):(this.boundLoadedFunction=this.onTextureLoaded.bind(this),a.baseTexture.on("loaded",this.boundLoadedFunction)),this.fragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying vec4 vColor;","uniform sampler2D displacementMap;","uniform sampler2D uSampler;","uniform vec2 scale;","uniform vec2 offset;","uniform vec4 dimensions;","uniform vec2 mapDimensions;","void main(void) {"," vec2 mapCords = vTextureCoord.xy;"," mapCords += (dimensions.zw + offset)/ dimensions.xy ;"," mapCords.y *= -1.0;"," mapCords.y += 1.0;"," vec2 matSample = texture2D(displacementMap, mapCords).xy;"," matSample -= 0.5;"," matSample *= scale;"," matSample /= mapDimensions;"," gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));"," gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);"," vec2 cord = vTextureCoord;","}"]},b.DisplacementFilter.prototype=Object.create(b.AbstractFilter.prototype),b.DisplacementFilter.prototype.constructor=b.DisplacementFilter,b.DisplacementFilter.prototype.onTextureLoaded=function(){this.uniforms.mapDimensions.value.x=this.uniforms.displacementMap.value.width,this.uniforms.mapDimensions.value.y=this.uniforms.displacementMap.value.height,this.uniforms.displacementMap.value.baseTexture.off("loaded",this.boundLoadedFunction)},Object.defineProperty(b.DisplacementFilter.prototype,"map",{get:function(){return this.uniforms.displacementMap.value},set:function(a){this.uniforms.displacementMap.value=a}}),Object.defineProperty(b.DisplacementFilter.prototype,"scale",{get:function(){return this.uniforms.scale.value},set:function(a){this.uniforms.scale.value=a}}),Object.defineProperty(b.DisplacementFilter.prototype,"offset",{get:function(){return this.uniforms.offset.value},set:function(a){this.uniforms.offset.value=a}}),b.PixelateFilter=function(){b.AbstractFilter.call(this),this.passes=[this],this.uniforms={invert:{type:"1f",value:0},dimensions:{type:"4fv",value:new Float32Array([1e4,100,10,10])},pixelSize:{type:"2f",value:{x:10,y:10}}},this.fragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying vec4 vColor;","uniform vec2 testDim;","uniform vec4 dimensions;","uniform vec2 pixelSize;","uniform sampler2D uSampler;","void main(void) {"," vec2 coord = vTextureCoord;"," vec2 size = dimensions.xy/pixelSize;"," vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;"," gl_FragColor = texture2D(uSampler, color);","}"]},b.PixelateFilter.prototype=Object.create(b.AbstractFilter.prototype),b.PixelateFilter.prototype.constructor=b.PixelateFilter,Object.defineProperty(b.PixelateFilter.prototype,"size",{get:function(){return this.uniforms.pixelSize.value},set:function(a){this.dirty=!0,this.uniforms.pixelSize.value=a}}),b.BlurXFilter=function(){b.AbstractFilter.call(this),this.passes=[this],this.uniforms={blur:{type:"1f",value:1/512}},this.fragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying vec4 vColor;","uniform float blur;","uniform sampler2D uSampler;","void main(void) {"," vec4 sum = vec4(0.0);"," sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;"," sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;"," sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;"," sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;"," sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;"," sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;"," sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;"," sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;"," sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;"," gl_FragColor = sum;","}"]},b.BlurXFilter.prototype=Object.create(b.AbstractFilter.prototype),b.BlurXFilter.prototype.constructor=b.BlurXFilter,Object.defineProperty(b.BlurXFilter.prototype,"blur",{get:function(){return this.uniforms.blur.value/(1/7e3)},set:function(a){this.dirty=!0,this.uniforms.blur.value=1/7e3*a}}),b.BlurYFilter=function(){b.AbstractFilter.call(this),this.passes=[this],this.uniforms={blur:{type:"1f",value:1/512}},this.fragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying vec4 vColor;","uniform float blur;","uniform sampler2D uSampler;","void main(void) {"," vec4 sum = vec4(0.0);"," sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;"," sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;"," sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;"," sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;"," sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;"," sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;"," sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;"," sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;"," sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;"," gl_FragColor = sum;","}"]},b.BlurYFilter.prototype=Object.create(b.AbstractFilter.prototype),b.BlurYFilter.prototype.constructor=b.BlurYFilter,Object.defineProperty(b.BlurYFilter.prototype,"blur",{get:function(){return this.uniforms.blur.value/(1/7e3)},set:function(a){this.uniforms.blur.value=1/7e3*a}}),b.BlurFilter=function(){this.blurXFilter=new b.BlurXFilter,this.blurYFilter=new b.BlurYFilter,this.passes=[this.blurXFilter,this.blurYFilter]},b.BlurFilter.prototype=Object.create(b.AbstractFilter.prototype),b.BlurFilter.prototype.constructor=b.BlurFilter,Object.defineProperty(b.BlurFilter.prototype,"blur",{get:function(){return this.blurXFilter.blur},set:function(a){this.blurXFilter.blur=this.blurYFilter.blur=a}}),Object.defineProperty(b.BlurFilter.prototype,"blurX",{get:function(){return this.blurXFilter.blur},set:function(a){this.blurXFilter.blur=a}}),Object.defineProperty(b.BlurFilter.prototype,"blurY",{get:function(){return this.blurYFilter.blur},set:function(a){this.blurYFilter.blur=a}}),b.InvertFilter=function(){b.AbstractFilter.call(this),this.passes=[this],this.uniforms={invert:{type:"1f",value:1}},this.fragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying vec4 vColor;","uniform float invert;","uniform sampler2D uSampler;","void main(void) {"," gl_FragColor = texture2D(uSampler, vTextureCoord);"," gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);","}"]},b.InvertFilter.prototype=Object.create(b.AbstractFilter.prototype),b.InvertFilter.prototype.constructor=b.InvertFilter,Object.defineProperty(b.InvertFilter.prototype,"invert",{get:function(){return this.uniforms.invert.value},set:function(a){this.uniforms.invert.value=a}}),b.SepiaFilter=function(){b.AbstractFilter.call(this),this.passes=[this],this.uniforms={sepia:{type:"1f",value:1}},this.fragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying vec4 vColor;","uniform float sepia;","uniform sampler2D uSampler;","const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);","void main(void) {"," gl_FragColor = texture2D(uSampler, vTextureCoord);"," gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);","}"]},b.SepiaFilter.prototype=Object.create(b.AbstractFilter.prototype),b.SepiaFilter.prototype.constructor=b.SepiaFilter,Object.defineProperty(b.SepiaFilter.prototype,"sepia",{get:function(){return this.uniforms.sepia.value},set:function(a){this.uniforms.sepia.value=a}}),b.TwistFilter=function(){b.AbstractFilter.call(this),this.passes=[this],this.uniforms={radius:{type:"1f",value:.5},angle:{type:"1f",value:5},offset:{type:"2f",value:{x:.5,y:.5}}},this.fragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying vec4 vColor;","uniform vec4 dimensions;","uniform sampler2D uSampler;","uniform float radius;","uniform float angle;","uniform vec2 offset;","void main(void) {"," vec2 coord = vTextureCoord - offset;"," float distance = length(coord);"," if (distance < radius) {"," float ratio = (radius - distance) / radius;"," float angleMod = ratio * ratio * angle;"," float s = sin(angleMod);"," float c = cos(angleMod);"," coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);"," }"," gl_FragColor = texture2D(uSampler, coord+offset);","}"]},b.TwistFilter.prototype=Object.create(b.AbstractFilter.prototype),b.TwistFilter.prototype.constructor=b.TwistFilter,Object.defineProperty(b.TwistFilter.prototype,"offset",{get:function(){return this.uniforms.offset.value},set:function(a){this.dirty=!0,this.uniforms.offset.value=a}}),Object.defineProperty(b.TwistFilter.prototype,"radius",{get:function(){return this.uniforms.radius.value},set:function(a){this.dirty=!0,this.uniforms.radius.value=a}}),Object.defineProperty(b.TwistFilter.prototype,"angle",{get:function(){return this.uniforms.angle.value},set:function(a){this.dirty=!0,this.uniforms.angle.value=a}}),b.ColorStepFilter=function(){b.AbstractFilter.call(this),this.passes=[this],this.uniforms={step:{type:"1f",value:5}},this.fragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying vec4 vColor;","uniform sampler2D uSampler;","uniform float step;","void main(void) {"," vec4 color = texture2D(uSampler, vTextureCoord);"," color = floor(color * step) / step;"," gl_FragColor = color;","}"]},b.ColorStepFilter.prototype=Object.create(b.AbstractFilter.prototype),b.ColorStepFilter.prototype.constructor=b.ColorStepFilter,Object.defineProperty(b.ColorStepFilter.prototype,"step",{get:function(){return this.uniforms.step.value},set:function(a){this.uniforms.step.value=a}}),b.DotScreenFilter=function(){b.AbstractFilter.call(this),this.passes=[this],this.uniforms={scale:{type:"1f",value:1},angle:{type:"1f",value:5},dimensions:{type:"4fv",value:[0,0,0,0]}},this.fragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying vec4 vColor;","uniform vec4 dimensions;","uniform sampler2D uSampler;","uniform float angle;","uniform float scale;","float pattern() {"," float s = sin(angle), c = cos(angle);"," vec2 tex = vTextureCoord * dimensions.xy;"," vec2 point = vec2("," c * tex.x - s * tex.y,"," s * tex.x + c * tex.y"," ) * scale;"," return (sin(point.x) * sin(point.y)) * 4.0;","}","void main() {"," vec4 color = texture2D(uSampler, vTextureCoord);"," float average = (color.r + color.g + color.b) / 3.0;"," gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);","}"]},b.DotScreenFilter.prototype=Object.create(b.AbstractFilter.prototype),b.DotScreenFilter.prototype.constructor=b.DotScreenFilter,Object.defineProperty(b.DotScreenFilter.prototype,"scale",{get:function(){return this.uniforms.scale.value},set:function(a){this.dirty=!0,this.uniforms.scale.value=a}}),Object.defineProperty(b.DotScreenFilter.prototype,"angle",{get:function(){return this.uniforms.angle.value},set:function(a){this.dirty=!0,this.uniforms.angle.value=a}}),b.CrossHatchFilter=function(){b.AbstractFilter.call(this),this.passes=[this],this.uniforms={blur:{type:"1f",value:1/512}},this.fragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying vec4 vColor;","uniform float blur;","uniform sampler2D uSampler;","void main(void) {"," float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);"," gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);"," if (lum < 1.00) {"," if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {"," gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);"," }"," }"," if (lum < 0.75) {"," if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {"," gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);"," }"," }"," if (lum < 0.50) {"," if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {"," gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);"," }"," }"," if (lum < 0.3) {"," if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {"," gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);"," }"," }","}"]},b.CrossHatchFilter.prototype=Object.create(b.AbstractFilter.prototype),b.CrossHatchFilter.prototype.constructor=b.CrossHatchFilter,Object.defineProperty(b.CrossHatchFilter.prototype,"blur",{get:function(){return this.uniforms.blur.value/(1/7e3)},set:function(a){this.uniforms.blur.value=1/7e3*a}}),b.RGBSplitFilter=function(){b.AbstractFilter.call(this),this.passes=[this],this.uniforms={red:{type:"2f",value:{x:20,y:20}},green:{type:"2f",value:{x:-20,y:20}},blue:{type:"2f",value:{x:20,y:-20}},dimensions:{type:"4fv",value:[0,0,0,0]}},this.fragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying vec4 vColor;","uniform vec2 red;","uniform vec2 green;","uniform vec2 blue;","uniform vec4 dimensions;","uniform sampler2D uSampler;","void main(void) {"," gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;"," gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;"," gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;"," gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;","}"]},b.RGBSplitFilter.prototype=Object.create(b.AbstractFilter.prototype),b.RGBSplitFilter.prototype.constructor=b.RGBSplitFilter,Object.defineProperty(b.RGBSplitFilter.prototype,"red",{get:function(){return this.uniforms.red.value},set:function(a){this.uniforms.red.value=a}}),Object.defineProperty(b.RGBSplitFilter.prototype,"green",{get:function(){return this.uniforms.green.value},set:function(a){this.uniforms.green.value=a}}),Object.defineProperty(b.RGBSplitFilter.prototype,"blue",{get:function(){return this.uniforms.blue.value},set:function(a){this.uniforms.blue.value=a}}),"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=b),exports.PIXI=b):"undefined"!=typeof define&&define.amd?define(b):a.PIXI=b}).call(this); \ No newline at end of file