diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js index daa8b64..79d038a 100644 --- a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -9,7 +9,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -17,18 +23,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;', @@ -38,6 +46,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -65,14 +74,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); @@ -84,7 +94,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'); @@ -98,9 +107,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js index daa8b64..79d038a 100644 --- a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -9,7 +9,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -17,18 +23,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;', @@ -38,6 +46,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -65,14 +74,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); @@ -84,7 +94,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'); @@ -98,9 +107,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiFastShader.js b/src/pixi/renderers/webgl/shaders/PixiFastShader.js index 4fb3fe2..bb46419 100644 --- a/src/pixi/renderers/webgl/shaders/PixiFastShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiFastShader.js @@ -1,6 +1,5 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -10,6 +9,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -19,12 +23,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;', @@ -37,8 +45,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -69,24 +79,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); @@ -111,8 +122,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? @@ -128,14 +137,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js index daa8b64..79d038a 100644 --- a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -9,7 +9,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -17,18 +23,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;', @@ -38,6 +46,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -65,14 +74,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); @@ -84,7 +94,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'); @@ -98,9 +107,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiFastShader.js b/src/pixi/renderers/webgl/shaders/PixiFastShader.js index 4fb3fe2..bb46419 100644 --- a/src/pixi/renderers/webgl/shaders/PixiFastShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiFastShader.js @@ -1,6 +1,5 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -10,6 +9,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -19,12 +23,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;', @@ -37,8 +45,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -69,24 +79,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); @@ -111,8 +122,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? @@ -128,14 +137,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiShader.js b/src/pixi/renderers/webgl/shaders/PixiShader.js index d76ec03..725dce2 100644 --- a/src/pixi/renderers/webgl/shaders/PixiShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiShader.js @@ -6,9 +6,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++; /** @@ -18,13 +24,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;', @@ -36,21 +46,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() { @@ -71,12 +104,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) { @@ -101,6 +133,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 * @@ -316,7 +349,8 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy */ PIXI.PixiShader.prototype.destroy = function() @@ -329,7 +363,8 @@ }; /** -* The Default Vertex shader source +* The Default Vertex shader source. +* * @property defaultVertexSrc * @type String */ diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js index daa8b64..79d038a 100644 --- a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -9,7 +9,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -17,18 +23,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;', @@ -38,6 +46,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -65,14 +74,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); @@ -84,7 +94,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'); @@ -98,9 +107,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiFastShader.js b/src/pixi/renderers/webgl/shaders/PixiFastShader.js index 4fb3fe2..bb46419 100644 --- a/src/pixi/renderers/webgl/shaders/PixiFastShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiFastShader.js @@ -1,6 +1,5 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -10,6 +9,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -19,12 +23,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;', @@ -37,8 +45,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -69,24 +79,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); @@ -111,8 +122,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? @@ -128,14 +137,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiShader.js b/src/pixi/renderers/webgl/shaders/PixiShader.js index d76ec03..725dce2 100644 --- a/src/pixi/renderers/webgl/shaders/PixiShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiShader.js @@ -6,9 +6,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++; /** @@ -18,13 +24,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;', @@ -36,21 +46,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() { @@ -71,12 +104,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) { @@ -101,6 +133,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 * @@ -316,7 +349,8 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy */ PIXI.PixiShader.prototype.destroy = function() @@ -329,7 +363,8 @@ }; /** -* The Default Vertex shader source +* The Default Vertex shader source. +* * @property defaultVertexSrc * @type String */ diff --git a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js index 3a82be2..0f6854c 100644 --- a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js @@ -9,6 +9,11 @@ */ PIXI.PrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -18,11 +23,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 */ @@ -36,6 +44,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -60,14 +69,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); @@ -78,7 +88,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'); @@ -92,9 +101,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js index daa8b64..79d038a 100644 --- a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -9,7 +9,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -17,18 +23,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;', @@ -38,6 +46,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -65,14 +74,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); @@ -84,7 +94,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'); @@ -98,9 +107,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiFastShader.js b/src/pixi/renderers/webgl/shaders/PixiFastShader.js index 4fb3fe2..bb46419 100644 --- a/src/pixi/renderers/webgl/shaders/PixiFastShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiFastShader.js @@ -1,6 +1,5 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -10,6 +9,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -19,12 +23,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;', @@ -37,8 +45,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -69,24 +79,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); @@ -111,8 +122,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? @@ -128,14 +137,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiShader.js b/src/pixi/renderers/webgl/shaders/PixiShader.js index d76ec03..725dce2 100644 --- a/src/pixi/renderers/webgl/shaders/PixiShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiShader.js @@ -6,9 +6,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++; /** @@ -18,13 +24,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;', @@ -36,21 +46,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() { @@ -71,12 +104,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) { @@ -101,6 +133,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 * @@ -316,7 +349,8 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy */ PIXI.PixiShader.prototype.destroy = function() @@ -329,7 +363,8 @@ }; /** -* The Default Vertex shader source +* The Default Vertex shader source. +* * @property defaultVertexSrc * @type String */ diff --git a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js index 3a82be2..0f6854c 100644 --- a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js @@ -9,6 +9,11 @@ */ PIXI.PrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -18,11 +23,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 */ @@ -36,6 +44,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -60,14 +69,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); @@ -78,7 +88,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'); @@ -92,9 +101,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/StripShader.js b/src/pixi/renderers/webgl/shaders/StripShader.js index 11f13ad..8fefe51 100644 --- a/src/pixi/renderers/webgl/shaders/StripShader.js +++ b/src/pixi/renderers/webgl/shaders/StripShader.js @@ -2,20 +2,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;', @@ -30,9 +47,11 @@ '}' ]; - /** - * @property {array} fragmentSrc - The fragment shader. - */ + /** + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -56,10 +75,12 @@ this.init(); }; +PIXI.StripShader.prototype.constructor = PIXI.StripShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.StripShader.prototype.init = function() { @@ -88,9 +109,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.StripShader.prototype.destroy = function() { diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js index daa8b64..79d038a 100644 --- a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -9,7 +9,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -17,18 +23,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;', @@ -38,6 +46,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -65,14 +74,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); @@ -84,7 +94,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'); @@ -98,9 +107,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiFastShader.js b/src/pixi/renderers/webgl/shaders/PixiFastShader.js index 4fb3fe2..bb46419 100644 --- a/src/pixi/renderers/webgl/shaders/PixiFastShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiFastShader.js @@ -1,6 +1,5 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -10,6 +9,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -19,12 +23,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;', @@ -37,8 +45,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -69,24 +79,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); @@ -111,8 +122,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? @@ -128,14 +137,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiShader.js b/src/pixi/renderers/webgl/shaders/PixiShader.js index d76ec03..725dce2 100644 --- a/src/pixi/renderers/webgl/shaders/PixiShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiShader.js @@ -6,9 +6,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++; /** @@ -18,13 +24,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;', @@ -36,21 +46,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() { @@ -71,12 +104,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) { @@ -101,6 +133,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 * @@ -316,7 +349,8 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy */ PIXI.PixiShader.prototype.destroy = function() @@ -329,7 +363,8 @@ }; /** -* The Default Vertex shader source +* The Default Vertex shader source. +* * @property defaultVertexSrc * @type String */ diff --git a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js index 3a82be2..0f6854c 100644 --- a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js @@ -9,6 +9,11 @@ */ PIXI.PrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -18,11 +23,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 */ @@ -36,6 +44,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -60,14 +69,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); @@ -78,7 +88,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'); @@ -92,9 +101,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/StripShader.js b/src/pixi/renderers/webgl/shaders/StripShader.js index 11f13ad..8fefe51 100644 --- a/src/pixi/renderers/webgl/shaders/StripShader.js +++ b/src/pixi/renderers/webgl/shaders/StripShader.js @@ -2,20 +2,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;', @@ -30,9 +47,11 @@ '}' ]; - /** - * @property {array} fragmentSrc - The fragment shader. - */ + /** + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -56,10 +75,12 @@ this.init(); }; +PIXI.StripShader.prototype.constructor = PIXI.StripShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.StripShader.prototype.init = function() { @@ -88,9 +109,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.StripShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/utils/FilterTexture.js b/src/pixi/renderers/webgl/utils/FilterTexture.js index 9dada23..389acbe 100644 --- a/src/pixi/renderers/webgl/utils/FilterTexture.js +++ b/src/pixi/renderers/webgl/utils/FilterTexture.js @@ -9,7 +9,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) { @@ -19,11 +18,24 @@ */ 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); @@ -44,9 +56,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() @@ -75,14 +89,14 @@ gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width , height , 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - // console.log( width, width ) // update the stencil buffer width and height gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width , height ); }; /** -* Destroys the filter texture +* Destroys the filter texture. +* * @method destroy */ PIXI.FilterTexture.prototype.destroy = function() diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js index daa8b64..79d038a 100644 --- a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -9,7 +9,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -17,18 +23,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;', @@ -38,6 +46,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -65,14 +74,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); @@ -84,7 +94,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'); @@ -98,9 +107,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiFastShader.js b/src/pixi/renderers/webgl/shaders/PixiFastShader.js index 4fb3fe2..bb46419 100644 --- a/src/pixi/renderers/webgl/shaders/PixiFastShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiFastShader.js @@ -1,6 +1,5 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -10,6 +9,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -19,12 +23,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;', @@ -37,8 +45,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -69,24 +79,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); @@ -111,8 +122,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? @@ -128,14 +137,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiShader.js b/src/pixi/renderers/webgl/shaders/PixiShader.js index d76ec03..725dce2 100644 --- a/src/pixi/renderers/webgl/shaders/PixiShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiShader.js @@ -6,9 +6,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++; /** @@ -18,13 +24,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;', @@ -36,21 +46,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() { @@ -71,12 +104,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) { @@ -101,6 +133,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 * @@ -316,7 +349,8 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy */ PIXI.PixiShader.prototype.destroy = function() @@ -329,7 +363,8 @@ }; /** -* The Default Vertex shader source +* The Default Vertex shader source. +* * @property defaultVertexSrc * @type String */ diff --git a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js index 3a82be2..0f6854c 100644 --- a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js @@ -9,6 +9,11 @@ */ PIXI.PrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -18,11 +23,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 */ @@ -36,6 +44,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -60,14 +69,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); @@ -78,7 +88,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'); @@ -92,9 +101,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/StripShader.js b/src/pixi/renderers/webgl/shaders/StripShader.js index 11f13ad..8fefe51 100644 --- a/src/pixi/renderers/webgl/shaders/StripShader.js +++ b/src/pixi/renderers/webgl/shaders/StripShader.js @@ -2,20 +2,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;', @@ -30,9 +47,11 @@ '}' ]; - /** - * @property {array} fragmentSrc - The fragment shader. - */ + /** + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -56,10 +75,12 @@ this.init(); }; +PIXI.StripShader.prototype.constructor = PIXI.StripShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.StripShader.prototype.init = function() { @@ -88,9 +109,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.StripShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/utils/FilterTexture.js b/src/pixi/renderers/webgl/utils/FilterTexture.js index 9dada23..389acbe 100644 --- a/src/pixi/renderers/webgl/utils/FilterTexture.js +++ b/src/pixi/renderers/webgl/utils/FilterTexture.js @@ -9,7 +9,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) { @@ -19,11 +18,24 @@ */ 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); @@ -44,9 +56,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() @@ -75,14 +89,14 @@ gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width , height , 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - // console.log( width, width ) // update the stencil buffer width and height gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width , height ); }; /** -* Destroys the filter texture +* Destroys the filter texture. +* * @method destroy */ PIXI.FilterTexture.prototype.destroy = function() diff --git a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js index c73728f..3de0ec9 100644 --- a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js @@ -3,31 +3,42 @@ */ /** -* @class WebGLMaskManager +* @class WebGLBlendModeManager * @constructor * @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLBlendModeManager = function() { + /** + * @property currentBlendMode + * @type Number + */ this.currentBlendMode = 99999; }; +PIXI.WebGLBlendModeManager.prototype.constructor = PIXI.WebGLBlendModeManager; + +/** + * 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 +* 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]; @@ -36,7 +47,12 @@ return true; }; +/** +* Destroys this object. +* +* @method destroy +*/ PIXI.WebGLBlendModeManager.prototype.destroy = function() { this.gl = null; -}; \ No newline at end of file +}; diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js index daa8b64..79d038a 100644 --- a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -9,7 +9,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -17,18 +23,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;', @@ -38,6 +46,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -65,14 +74,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); @@ -84,7 +94,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'); @@ -98,9 +107,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiFastShader.js b/src/pixi/renderers/webgl/shaders/PixiFastShader.js index 4fb3fe2..bb46419 100644 --- a/src/pixi/renderers/webgl/shaders/PixiFastShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiFastShader.js @@ -1,6 +1,5 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -10,6 +9,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -19,12 +23,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;', @@ -37,8 +45,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -69,24 +79,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); @@ -111,8 +122,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? @@ -128,14 +137,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiShader.js b/src/pixi/renderers/webgl/shaders/PixiShader.js index d76ec03..725dce2 100644 --- a/src/pixi/renderers/webgl/shaders/PixiShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiShader.js @@ -6,9 +6,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++; /** @@ -18,13 +24,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;', @@ -36,21 +46,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() { @@ -71,12 +104,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) { @@ -101,6 +133,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 * @@ -316,7 +349,8 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy */ PIXI.PixiShader.prototype.destroy = function() @@ -329,7 +363,8 @@ }; /** -* The Default Vertex shader source +* The Default Vertex shader source. +* * @property defaultVertexSrc * @type String */ diff --git a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js index 3a82be2..0f6854c 100644 --- a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js @@ -9,6 +9,11 @@ */ PIXI.PrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -18,11 +23,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 */ @@ -36,6 +44,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -60,14 +69,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); @@ -78,7 +88,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'); @@ -92,9 +101,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/StripShader.js b/src/pixi/renderers/webgl/shaders/StripShader.js index 11f13ad..8fefe51 100644 --- a/src/pixi/renderers/webgl/shaders/StripShader.js +++ b/src/pixi/renderers/webgl/shaders/StripShader.js @@ -2,20 +2,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;', @@ -30,9 +47,11 @@ '}' ]; - /** - * @property {array} fragmentSrc - The fragment shader. - */ + /** + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -56,10 +75,12 @@ this.init(); }; +PIXI.StripShader.prototype.constructor = PIXI.StripShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.StripShader.prototype.init = function() { @@ -88,9 +109,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.StripShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/utils/FilterTexture.js b/src/pixi/renderers/webgl/utils/FilterTexture.js index 9dada23..389acbe 100644 --- a/src/pixi/renderers/webgl/utils/FilterTexture.js +++ b/src/pixi/renderers/webgl/utils/FilterTexture.js @@ -9,7 +9,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) { @@ -19,11 +18,24 @@ */ 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); @@ -44,9 +56,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() @@ -75,14 +89,14 @@ gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width , height , 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - // console.log( width, width ) // update the stencil buffer width and height gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width , height ); }; /** -* Destroys the filter texture +* Destroys the filter texture. +* * @method destroy */ PIXI.FilterTexture.prototype.destroy = function() diff --git a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js index c73728f..3de0ec9 100644 --- a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js @@ -3,31 +3,42 @@ */ /** -* @class WebGLMaskManager +* @class WebGLBlendModeManager * @constructor * @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLBlendModeManager = function() { + /** + * @property currentBlendMode + * @type Number + */ this.currentBlendMode = 99999; }; +PIXI.WebGLBlendModeManager.prototype.constructor = PIXI.WebGLBlendModeManager; + +/** + * 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 +* 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]; @@ -36,7 +47,12 @@ return true; }; +/** +* Destroys this object. +* +* @method destroy +*/ PIXI.WebGLBlendModeManager.prototype.destroy = function() { this.gl = null; -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js index 0d08e47..0bdbbe4 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -8,27 +8,66 @@ * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java */ +/** +* @class WebGLFastSpriteBatch +* @constructor +*/ PIXI.WebGLFastSpriteBatch = function() { - - + /** + * @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) @@ -41,21 +80,58 @@ 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; @@ -66,7 +142,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); @@ -75,6 +150,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; @@ -85,15 +165,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]; @@ -119,6 +204,10 @@ this.flush(); }; +/** + * @method renderSprite + * @param sprite {Sprite} + */ PIXI.WebGLFastSpriteBatch.prototype.renderSprite = function(sprite) { //sprite = children[i]; @@ -137,7 +226,6 @@ uvs = sprite.texture._uvs; - width = sprite.texture.frame.width; height = sprite.texture.frame.height; @@ -257,9 +345,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; @@ -272,7 +362,6 @@ gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); // upload the verts to the buffer - if(this.currentBatchSize > ( this.size * 0.5 ) ) { @@ -285,7 +374,6 @@ gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, this.currentBatchSize * 6, gl.UNSIGNED_SHORT, 0); @@ -297,11 +385,17 @@ }; +/** + * @method stop + */ PIXI.WebGLFastSpriteBatch.prototype.stop = function() { this.flush(); }; +/** + * @method start + */ PIXI.WebGLFastSpriteBatch.prototype.start = function() { var gl = this.gl; @@ -329,8 +423,5 @@ 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); - }; - - diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js index daa8b64..79d038a 100644 --- a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -9,7 +9,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -17,18 +23,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;', @@ -38,6 +46,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -65,14 +74,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); @@ -84,7 +94,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'); @@ -98,9 +107,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiFastShader.js b/src/pixi/renderers/webgl/shaders/PixiFastShader.js index 4fb3fe2..bb46419 100644 --- a/src/pixi/renderers/webgl/shaders/PixiFastShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiFastShader.js @@ -1,6 +1,5 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -10,6 +9,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -19,12 +23,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;', @@ -37,8 +45,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -69,24 +79,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); @@ -111,8 +122,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? @@ -128,14 +137,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiShader.js b/src/pixi/renderers/webgl/shaders/PixiShader.js index d76ec03..725dce2 100644 --- a/src/pixi/renderers/webgl/shaders/PixiShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiShader.js @@ -6,9 +6,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++; /** @@ -18,13 +24,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;', @@ -36,21 +46,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() { @@ -71,12 +104,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) { @@ -101,6 +133,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 * @@ -316,7 +349,8 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy */ PIXI.PixiShader.prototype.destroy = function() @@ -329,7 +363,8 @@ }; /** -* The Default Vertex shader source +* The Default Vertex shader source. +* * @property defaultVertexSrc * @type String */ diff --git a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js index 3a82be2..0f6854c 100644 --- a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js @@ -9,6 +9,11 @@ */ PIXI.PrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -18,11 +23,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 */ @@ -36,6 +44,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -60,14 +69,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); @@ -78,7 +88,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'); @@ -92,9 +101,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/StripShader.js b/src/pixi/renderers/webgl/shaders/StripShader.js index 11f13ad..8fefe51 100644 --- a/src/pixi/renderers/webgl/shaders/StripShader.js +++ b/src/pixi/renderers/webgl/shaders/StripShader.js @@ -2,20 +2,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;', @@ -30,9 +47,11 @@ '}' ]; - /** - * @property {array} fragmentSrc - The fragment shader. - */ + /** + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -56,10 +75,12 @@ this.init(); }; +PIXI.StripShader.prototype.constructor = PIXI.StripShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.StripShader.prototype.init = function() { @@ -88,9 +109,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.StripShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/utils/FilterTexture.js b/src/pixi/renderers/webgl/utils/FilterTexture.js index 9dada23..389acbe 100644 --- a/src/pixi/renderers/webgl/utils/FilterTexture.js +++ b/src/pixi/renderers/webgl/utils/FilterTexture.js @@ -9,7 +9,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) { @@ -19,11 +18,24 @@ */ 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); @@ -44,9 +56,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() @@ -75,14 +89,14 @@ gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width , height , 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - // console.log( width, width ) // update the stencil buffer width and height gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width , height ); }; /** -* Destroys the filter texture +* Destroys the filter texture. +* * @method destroy */ PIXI.FilterTexture.prototype.destroy = function() diff --git a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js index c73728f..3de0ec9 100644 --- a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js @@ -3,31 +3,42 @@ */ /** -* @class WebGLMaskManager +* @class WebGLBlendModeManager * @constructor * @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLBlendModeManager = function() { + /** + * @property currentBlendMode + * @type Number + */ this.currentBlendMode = 99999; }; +PIXI.WebGLBlendModeManager.prototype.constructor = PIXI.WebGLBlendModeManager; + +/** + * 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 +* 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]; @@ -36,7 +47,12 @@ return true; }; +/** +* Destroys this object. +* +* @method destroy +*/ PIXI.WebGLBlendModeManager.prototype.destroy = function() { this.gl = null; -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js index 0d08e47..0bdbbe4 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -8,27 +8,66 @@ * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java */ +/** +* @class WebGLFastSpriteBatch +* @constructor +*/ PIXI.WebGLFastSpriteBatch = function() { - - + /** + * @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) @@ -41,21 +80,58 @@ 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; @@ -66,7 +142,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); @@ -75,6 +150,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; @@ -85,15 +165,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]; @@ -119,6 +204,10 @@ this.flush(); }; +/** + * @method renderSprite + * @param sprite {Sprite} + */ PIXI.WebGLFastSpriteBatch.prototype.renderSprite = function(sprite) { //sprite = children[i]; @@ -137,7 +226,6 @@ uvs = sprite.texture._uvs; - width = sprite.texture.frame.width; height = sprite.texture.frame.height; @@ -257,9 +345,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; @@ -272,7 +362,6 @@ gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); // upload the verts to the buffer - if(this.currentBatchSize > ( this.size * 0.5 ) ) { @@ -285,7 +374,6 @@ gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, this.currentBatchSize * 6, gl.UNSIGNED_SHORT, 0); @@ -297,11 +385,17 @@ }; +/** + * @method stop + */ PIXI.WebGLFastSpriteBatch.prototype.stop = function() { this.flush(); }; +/** + * @method start + */ PIXI.WebGLFastSpriteBatch.prototype.start = function() { var gl = this.gl; @@ -329,8 +423,5 @@ 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); - }; - - diff --git a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js index 9bb9195..359a834 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js @@ -5,22 +5,33 @@ /** * @class WebGLFilterManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLFilterManager = function() { + /** + * @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 */ @@ -33,7 +44,6 @@ }; /** -* * @method begin * @param renderSession {RenderSession} * @param buffer {ArrayBuffer} @@ -44,14 +54,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 */ @@ -64,7 +74,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); @@ -126,9 +135,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() @@ -211,7 +220,6 @@ this.offsetX -= filterArea.x; this.offsetY -= filterArea.y; - var sizeX = this.width; var sizeY = this.height; @@ -239,9 +247,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; @@ -280,10 +286,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 @@ -300,9 +302,9 @@ this.applyFilterPass(filter, filterArea, sizeX, sizeY); // 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); + // 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); @@ -311,7 +313,8 @@ /** -* 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 @@ -351,7 +354,6 @@ filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; } - // console.log(this.uvArray ) shader.syncUniforms(); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); @@ -372,7 +374,8 @@ }; /** -* Initialises the shader buffers +* Initialises the shader buffers. +* * @method initShaderBuffers */ PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() @@ -385,7 +388,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, @@ -394,11 +396,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, @@ -407,10 +405,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, @@ -418,21 +413,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() diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js index daa8b64..79d038a 100644 --- a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -9,7 +9,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -17,18 +23,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;', @@ -38,6 +46,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -65,14 +74,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); @@ -84,7 +94,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'); @@ -98,9 +107,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiFastShader.js b/src/pixi/renderers/webgl/shaders/PixiFastShader.js index 4fb3fe2..bb46419 100644 --- a/src/pixi/renderers/webgl/shaders/PixiFastShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiFastShader.js @@ -1,6 +1,5 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -10,6 +9,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -19,12 +23,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;', @@ -37,8 +45,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -69,24 +79,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); @@ -111,8 +122,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? @@ -128,14 +137,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiShader.js b/src/pixi/renderers/webgl/shaders/PixiShader.js index d76ec03..725dce2 100644 --- a/src/pixi/renderers/webgl/shaders/PixiShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiShader.js @@ -6,9 +6,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++; /** @@ -18,13 +24,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;', @@ -36,21 +46,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() { @@ -71,12 +104,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) { @@ -101,6 +133,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 * @@ -316,7 +349,8 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy */ PIXI.PixiShader.prototype.destroy = function() @@ -329,7 +363,8 @@ }; /** -* The Default Vertex shader source +* The Default Vertex shader source. +* * @property defaultVertexSrc * @type String */ diff --git a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js index 3a82be2..0f6854c 100644 --- a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js @@ -9,6 +9,11 @@ */ PIXI.PrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -18,11 +23,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 */ @@ -36,6 +44,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -60,14 +69,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); @@ -78,7 +88,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'); @@ -92,9 +101,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/StripShader.js b/src/pixi/renderers/webgl/shaders/StripShader.js index 11f13ad..8fefe51 100644 --- a/src/pixi/renderers/webgl/shaders/StripShader.js +++ b/src/pixi/renderers/webgl/shaders/StripShader.js @@ -2,20 +2,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;', @@ -30,9 +47,11 @@ '}' ]; - /** - * @property {array} fragmentSrc - The fragment shader. - */ + /** + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -56,10 +75,12 @@ this.init(); }; +PIXI.StripShader.prototype.constructor = PIXI.StripShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.StripShader.prototype.init = function() { @@ -88,9 +109,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.StripShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/utils/FilterTexture.js b/src/pixi/renderers/webgl/utils/FilterTexture.js index 9dada23..389acbe 100644 --- a/src/pixi/renderers/webgl/utils/FilterTexture.js +++ b/src/pixi/renderers/webgl/utils/FilterTexture.js @@ -9,7 +9,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) { @@ -19,11 +18,24 @@ */ 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); @@ -44,9 +56,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() @@ -75,14 +89,14 @@ gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width , height , 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - // console.log( width, width ) // update the stencil buffer width and height gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width , height ); }; /** -* Destroys the filter texture +* Destroys the filter texture. +* * @method destroy */ PIXI.FilterTexture.prototype.destroy = function() diff --git a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js index c73728f..3de0ec9 100644 --- a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js @@ -3,31 +3,42 @@ */ /** -* @class WebGLMaskManager +* @class WebGLBlendModeManager * @constructor * @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLBlendModeManager = function() { + /** + * @property currentBlendMode + * @type Number + */ this.currentBlendMode = 99999; }; +PIXI.WebGLBlendModeManager.prototype.constructor = PIXI.WebGLBlendModeManager; + +/** + * 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 +* 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]; @@ -36,7 +47,12 @@ return true; }; +/** +* Destroys this object. +* +* @method destroy +*/ PIXI.WebGLBlendModeManager.prototype.destroy = function() { this.gl = null; -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js index 0d08e47..0bdbbe4 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -8,27 +8,66 @@ * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java */ +/** +* @class WebGLFastSpriteBatch +* @constructor +*/ PIXI.WebGLFastSpriteBatch = function() { - - + /** + * @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) @@ -41,21 +80,58 @@ 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; @@ -66,7 +142,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); @@ -75,6 +150,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; @@ -85,15 +165,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]; @@ -119,6 +204,10 @@ this.flush(); }; +/** + * @method renderSprite + * @param sprite {Sprite} + */ PIXI.WebGLFastSpriteBatch.prototype.renderSprite = function(sprite) { //sprite = children[i]; @@ -137,7 +226,6 @@ uvs = sprite.texture._uvs; - width = sprite.texture.frame.width; height = sprite.texture.frame.height; @@ -257,9 +345,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; @@ -272,7 +362,6 @@ gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); // upload the verts to the buffer - if(this.currentBatchSize > ( this.size * 0.5 ) ) { @@ -285,7 +374,6 @@ gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, this.currentBatchSize * 6, gl.UNSIGNED_SHORT, 0); @@ -297,11 +385,17 @@ }; +/** + * @method stop + */ PIXI.WebGLFastSpriteBatch.prototype.stop = function() { this.flush(); }; +/** + * @method start + */ PIXI.WebGLFastSpriteBatch.prototype.start = function() { var gl = this.gl; @@ -329,8 +423,5 @@ 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); - }; - - diff --git a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js index 9bb9195..359a834 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js @@ -5,22 +5,33 @@ /** * @class WebGLFilterManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLFilterManager = function() { + /** + * @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 */ @@ -33,7 +44,6 @@ }; /** -* * @method begin * @param renderSession {RenderSession} * @param buffer {ArrayBuffer} @@ -44,14 +54,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 */ @@ -64,7 +74,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); @@ -126,9 +135,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() @@ -211,7 +220,6 @@ this.offsetX -= filterArea.x; this.offsetY -= filterArea.y; - var sizeX = this.width; var sizeY = this.height; @@ -239,9 +247,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; @@ -280,10 +286,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 @@ -300,9 +302,9 @@ this.applyFilterPass(filter, filterArea, sizeX, sizeY); // 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); + // 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); @@ -311,7 +313,8 @@ /** -* 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 @@ -351,7 +354,6 @@ filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; } - // console.log(this.uvArray ) shader.syncUniforms(); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); @@ -372,7 +374,8 @@ }; /** -* Initialises the shader buffers +* Initialises the shader buffers. +* * @method initShaderBuffers */ PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() @@ -385,7 +388,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, @@ -394,11 +396,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, @@ -407,10 +405,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, @@ -418,21 +413,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() diff --git a/src/pixi/renderers/webgl/utils/WebGLGraphics.js b/src/pixi/renderers/webgl/utils/WebGLGraphics.js index 4de401d..9ea5a53 100644 --- a/src/pixi/renderers/webgl/utils/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/utils/WebGLGraphics.js @@ -11,7 +11,6 @@ */ PIXI.WebGLGraphics = function() { - }; /** @@ -120,7 +119,6 @@ webGL.data = []; webGL.lastIndex = 0; } - var webGLData; @@ -131,8 +129,6 @@ { var data = graphics.graphicsData[i]; - - if(data.type === PIXI.Graphics.POLY) { // need to add the points the the graphics object.. @@ -189,7 +185,6 @@ } } - webGL.lastIndex++; } @@ -201,7 +196,13 @@ } }; - +/** + * @static + * @private + * @method switchMode + * @param webGL {WebGLContext} + * @param type {Number} + */ PIXI.WebGLGraphics.switchMode = function(webGL, type) { var webGLData; @@ -308,7 +309,6 @@ */ PIXI.WebGLGraphics.buildRoundedRectangle = function(graphicsData, webGLData) { - var points = graphicsData.points; var x = points[0]; var y = points[1]; @@ -316,7 +316,6 @@ 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)); @@ -324,7 +323,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; @@ -368,8 +366,8 @@ }; /** - * 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 * * @static * @private @@ -383,6 +381,7 @@ * @return {Array} */ PIXI.WebGLGraphics.quadraticBezierCurve = function(fromX, fromY, cpX, cpY, toX, toY) { + var xa, ya, xb, @@ -718,13 +717,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; @@ -776,6 +774,15 @@ }; +/** + * 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; @@ -818,6 +825,11 @@ PIXI.WebGLGraphics.graphicsDataPool = []; +/** + * @class WebGLGraphicsData + * @private + * @static + */ PIXI.WebGLGraphicsData = function(gl) { this.gl = gl; @@ -834,6 +846,9 @@ this.dirty = true; }; +/** + * @method reset + */ PIXI.WebGLGraphicsData.prototype.reset = function() { this.points = []; @@ -841,6 +856,9 @@ this.lastIndex = 0; }; +/** + * @method upload + */ PIXI.WebGLGraphicsData.prototype.upload = function() { var gl = this.gl; diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js index daa8b64..79d038a 100644 --- a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -9,7 +9,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -17,18 +23,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;', @@ -38,6 +46,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -65,14 +74,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); @@ -84,7 +94,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'); @@ -98,9 +107,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiFastShader.js b/src/pixi/renderers/webgl/shaders/PixiFastShader.js index 4fb3fe2..bb46419 100644 --- a/src/pixi/renderers/webgl/shaders/PixiFastShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiFastShader.js @@ -1,6 +1,5 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -10,6 +9,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -19,12 +23,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;', @@ -37,8 +45,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -69,24 +79,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); @@ -111,8 +122,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? @@ -128,14 +137,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiShader.js b/src/pixi/renderers/webgl/shaders/PixiShader.js index d76ec03..725dce2 100644 --- a/src/pixi/renderers/webgl/shaders/PixiShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiShader.js @@ -6,9 +6,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++; /** @@ -18,13 +24,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;', @@ -36,21 +46,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() { @@ -71,12 +104,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) { @@ -101,6 +133,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 * @@ -316,7 +349,8 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy */ PIXI.PixiShader.prototype.destroy = function() @@ -329,7 +363,8 @@ }; /** -* The Default Vertex shader source +* The Default Vertex shader source. +* * @property defaultVertexSrc * @type String */ diff --git a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js index 3a82be2..0f6854c 100644 --- a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js @@ -9,6 +9,11 @@ */ PIXI.PrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -18,11 +23,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 */ @@ -36,6 +44,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -60,14 +69,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); @@ -78,7 +88,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'); @@ -92,9 +101,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/StripShader.js b/src/pixi/renderers/webgl/shaders/StripShader.js index 11f13ad..8fefe51 100644 --- a/src/pixi/renderers/webgl/shaders/StripShader.js +++ b/src/pixi/renderers/webgl/shaders/StripShader.js @@ -2,20 +2,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;', @@ -30,9 +47,11 @@ '}' ]; - /** - * @property {array} fragmentSrc - The fragment shader. - */ + /** + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -56,10 +75,12 @@ this.init(); }; +PIXI.StripShader.prototype.constructor = PIXI.StripShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.StripShader.prototype.init = function() { @@ -88,9 +109,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.StripShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/utils/FilterTexture.js b/src/pixi/renderers/webgl/utils/FilterTexture.js index 9dada23..389acbe 100644 --- a/src/pixi/renderers/webgl/utils/FilterTexture.js +++ b/src/pixi/renderers/webgl/utils/FilterTexture.js @@ -9,7 +9,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) { @@ -19,11 +18,24 @@ */ 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); @@ -44,9 +56,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() @@ -75,14 +89,14 @@ gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width , height , 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - // console.log( width, width ) // update the stencil buffer width and height gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width , height ); }; /** -* Destroys the filter texture +* Destroys the filter texture. +* * @method destroy */ PIXI.FilterTexture.prototype.destroy = function() diff --git a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js index c73728f..3de0ec9 100644 --- a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js @@ -3,31 +3,42 @@ */ /** -* @class WebGLMaskManager +* @class WebGLBlendModeManager * @constructor * @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLBlendModeManager = function() { + /** + * @property currentBlendMode + * @type Number + */ this.currentBlendMode = 99999; }; +PIXI.WebGLBlendModeManager.prototype.constructor = PIXI.WebGLBlendModeManager; + +/** + * 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 +* 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]; @@ -36,7 +47,12 @@ return true; }; +/** +* Destroys this object. +* +* @method destroy +*/ PIXI.WebGLBlendModeManager.prototype.destroy = function() { this.gl = null; -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js index 0d08e47..0bdbbe4 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -8,27 +8,66 @@ * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java */ +/** +* @class WebGLFastSpriteBatch +* @constructor +*/ PIXI.WebGLFastSpriteBatch = function() { - - + /** + * @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) @@ -41,21 +80,58 @@ 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; @@ -66,7 +142,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); @@ -75,6 +150,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; @@ -85,15 +165,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]; @@ -119,6 +204,10 @@ this.flush(); }; +/** + * @method renderSprite + * @param sprite {Sprite} + */ PIXI.WebGLFastSpriteBatch.prototype.renderSprite = function(sprite) { //sprite = children[i]; @@ -137,7 +226,6 @@ uvs = sprite.texture._uvs; - width = sprite.texture.frame.width; height = sprite.texture.frame.height; @@ -257,9 +345,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; @@ -272,7 +362,6 @@ gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); // upload the verts to the buffer - if(this.currentBatchSize > ( this.size * 0.5 ) ) { @@ -285,7 +374,6 @@ gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, this.currentBatchSize * 6, gl.UNSIGNED_SHORT, 0); @@ -297,11 +385,17 @@ }; +/** + * @method stop + */ PIXI.WebGLFastSpriteBatch.prototype.stop = function() { this.flush(); }; +/** + * @method start + */ PIXI.WebGLFastSpriteBatch.prototype.start = function() { var gl = this.gl; @@ -329,8 +423,5 @@ 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); - }; - - diff --git a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js index 9bb9195..359a834 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js @@ -5,22 +5,33 @@ /** * @class WebGLFilterManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLFilterManager = function() { + /** + * @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 */ @@ -33,7 +44,6 @@ }; /** -* * @method begin * @param renderSession {RenderSession} * @param buffer {ArrayBuffer} @@ -44,14 +54,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 */ @@ -64,7 +74,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); @@ -126,9 +135,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() @@ -211,7 +220,6 @@ this.offsetX -= filterArea.x; this.offsetY -= filterArea.y; - var sizeX = this.width; var sizeY = this.height; @@ -239,9 +247,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; @@ -280,10 +286,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 @@ -300,9 +302,9 @@ this.applyFilterPass(filter, filterArea, sizeX, sizeY); // 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); + // 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); @@ -311,7 +313,8 @@ /** -* 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 @@ -351,7 +354,6 @@ filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; } - // console.log(this.uvArray ) shader.syncUniforms(); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); @@ -372,7 +374,8 @@ }; /** -* Initialises the shader buffers +* Initialises the shader buffers. +* * @method initShaderBuffers */ PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() @@ -385,7 +388,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, @@ -394,11 +396,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, @@ -407,10 +405,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, @@ -418,21 +413,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() diff --git a/src/pixi/renderers/webgl/utils/WebGLGraphics.js b/src/pixi/renderers/webgl/utils/WebGLGraphics.js index 4de401d..9ea5a53 100644 --- a/src/pixi/renderers/webgl/utils/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/utils/WebGLGraphics.js @@ -11,7 +11,6 @@ */ PIXI.WebGLGraphics = function() { - }; /** @@ -120,7 +119,6 @@ webGL.data = []; webGL.lastIndex = 0; } - var webGLData; @@ -131,8 +129,6 @@ { var data = graphics.graphicsData[i]; - - if(data.type === PIXI.Graphics.POLY) { // need to add the points the the graphics object.. @@ -189,7 +185,6 @@ } } - webGL.lastIndex++; } @@ -201,7 +196,13 @@ } }; - +/** + * @static + * @private + * @method switchMode + * @param webGL {WebGLContext} + * @param type {Number} + */ PIXI.WebGLGraphics.switchMode = function(webGL, type) { var webGLData; @@ -308,7 +309,6 @@ */ PIXI.WebGLGraphics.buildRoundedRectangle = function(graphicsData, webGLData) { - var points = graphicsData.points; var x = points[0]; var y = points[1]; @@ -316,7 +316,6 @@ 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)); @@ -324,7 +323,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; @@ -368,8 +366,8 @@ }; /** - * 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 * * @static * @private @@ -383,6 +381,7 @@ * @return {Array} */ PIXI.WebGLGraphics.quadraticBezierCurve = function(fromX, fromY, cpX, cpY, toX, toY) { + var xa, ya, xb, @@ -718,13 +717,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; @@ -776,6 +774,15 @@ }; +/** + * 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; @@ -818,6 +825,11 @@ PIXI.WebGLGraphics.graphicsDataPool = []; +/** + * @class WebGLGraphicsData + * @private + * @static + */ PIXI.WebGLGraphicsData = function(gl) { this.gl = gl; @@ -834,6 +846,9 @@ this.dirty = true; }; +/** + * @method reset + */ PIXI.WebGLGraphicsData.prototype.reset = function() { this.points = []; @@ -841,6 +856,9 @@ this.lastIndex = 0; }; +/** + * @method upload + */ PIXI.WebGLGraphicsData.prototype.upload = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js index 181f560..607d5dd 100644 --- a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js @@ -5,16 +5,17 @@ /** * @class WebGLMaskManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLMaskManager = function() { - //this.setContext(gl); }; +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 */ @@ -24,10 +25,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) { @@ -44,10 +46,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) { @@ -55,9 +58,9 @@ 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() diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js index daa8b64..79d038a 100644 --- a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -9,7 +9,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -17,18 +23,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;', @@ -38,6 +46,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -65,14 +74,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); @@ -84,7 +94,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'); @@ -98,9 +107,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiFastShader.js b/src/pixi/renderers/webgl/shaders/PixiFastShader.js index 4fb3fe2..bb46419 100644 --- a/src/pixi/renderers/webgl/shaders/PixiFastShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiFastShader.js @@ -1,6 +1,5 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -10,6 +9,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -19,12 +23,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;', @@ -37,8 +45,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -69,24 +79,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); @@ -111,8 +122,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? @@ -128,14 +137,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiShader.js b/src/pixi/renderers/webgl/shaders/PixiShader.js index d76ec03..725dce2 100644 --- a/src/pixi/renderers/webgl/shaders/PixiShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiShader.js @@ -6,9 +6,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++; /** @@ -18,13 +24,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;', @@ -36,21 +46,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() { @@ -71,12 +104,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) { @@ -101,6 +133,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 * @@ -316,7 +349,8 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy */ PIXI.PixiShader.prototype.destroy = function() @@ -329,7 +363,8 @@ }; /** -* The Default Vertex shader source +* The Default Vertex shader source. +* * @property defaultVertexSrc * @type String */ diff --git a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js index 3a82be2..0f6854c 100644 --- a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js @@ -9,6 +9,11 @@ */ PIXI.PrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -18,11 +23,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 */ @@ -36,6 +44,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -60,14 +69,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); @@ -78,7 +88,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'); @@ -92,9 +101,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/StripShader.js b/src/pixi/renderers/webgl/shaders/StripShader.js index 11f13ad..8fefe51 100644 --- a/src/pixi/renderers/webgl/shaders/StripShader.js +++ b/src/pixi/renderers/webgl/shaders/StripShader.js @@ -2,20 +2,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;', @@ -30,9 +47,11 @@ '}' ]; - /** - * @property {array} fragmentSrc - The fragment shader. - */ + /** + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -56,10 +75,12 @@ this.init(); }; +PIXI.StripShader.prototype.constructor = PIXI.StripShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.StripShader.prototype.init = function() { @@ -88,9 +109,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.StripShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/utils/FilterTexture.js b/src/pixi/renderers/webgl/utils/FilterTexture.js index 9dada23..389acbe 100644 --- a/src/pixi/renderers/webgl/utils/FilterTexture.js +++ b/src/pixi/renderers/webgl/utils/FilterTexture.js @@ -9,7 +9,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) { @@ -19,11 +18,24 @@ */ 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); @@ -44,9 +56,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() @@ -75,14 +89,14 @@ gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width , height , 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - // console.log( width, width ) // update the stencil buffer width and height gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width , height ); }; /** -* Destroys the filter texture +* Destroys the filter texture. +* * @method destroy */ PIXI.FilterTexture.prototype.destroy = function() diff --git a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js index c73728f..3de0ec9 100644 --- a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js @@ -3,31 +3,42 @@ */ /** -* @class WebGLMaskManager +* @class WebGLBlendModeManager * @constructor * @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLBlendModeManager = function() { + /** + * @property currentBlendMode + * @type Number + */ this.currentBlendMode = 99999; }; +PIXI.WebGLBlendModeManager.prototype.constructor = PIXI.WebGLBlendModeManager; + +/** + * 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 +* 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]; @@ -36,7 +47,12 @@ return true; }; +/** +* Destroys this object. +* +* @method destroy +*/ PIXI.WebGLBlendModeManager.prototype.destroy = function() { this.gl = null; -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js index 0d08e47..0bdbbe4 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -8,27 +8,66 @@ * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java */ +/** +* @class WebGLFastSpriteBatch +* @constructor +*/ PIXI.WebGLFastSpriteBatch = function() { - - + /** + * @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) @@ -41,21 +80,58 @@ 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; @@ -66,7 +142,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); @@ -75,6 +150,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; @@ -85,15 +165,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]; @@ -119,6 +204,10 @@ this.flush(); }; +/** + * @method renderSprite + * @param sprite {Sprite} + */ PIXI.WebGLFastSpriteBatch.prototype.renderSprite = function(sprite) { //sprite = children[i]; @@ -137,7 +226,6 @@ uvs = sprite.texture._uvs; - width = sprite.texture.frame.width; height = sprite.texture.frame.height; @@ -257,9 +345,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; @@ -272,7 +362,6 @@ gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); // upload the verts to the buffer - if(this.currentBatchSize > ( this.size * 0.5 ) ) { @@ -285,7 +374,6 @@ gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, this.currentBatchSize * 6, gl.UNSIGNED_SHORT, 0); @@ -297,11 +385,17 @@ }; +/** + * @method stop + */ PIXI.WebGLFastSpriteBatch.prototype.stop = function() { this.flush(); }; +/** + * @method start + */ PIXI.WebGLFastSpriteBatch.prototype.start = function() { var gl = this.gl; @@ -329,8 +423,5 @@ 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); - }; - - diff --git a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js index 9bb9195..359a834 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js @@ -5,22 +5,33 @@ /** * @class WebGLFilterManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLFilterManager = function() { + /** + * @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 */ @@ -33,7 +44,6 @@ }; /** -* * @method begin * @param renderSession {RenderSession} * @param buffer {ArrayBuffer} @@ -44,14 +54,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 */ @@ -64,7 +74,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); @@ -126,9 +135,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() @@ -211,7 +220,6 @@ this.offsetX -= filterArea.x; this.offsetY -= filterArea.y; - var sizeX = this.width; var sizeY = this.height; @@ -239,9 +247,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; @@ -280,10 +286,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 @@ -300,9 +302,9 @@ this.applyFilterPass(filter, filterArea, sizeX, sizeY); // 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); + // 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); @@ -311,7 +313,8 @@ /** -* 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 @@ -351,7 +354,6 @@ filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; } - // console.log(this.uvArray ) shader.syncUniforms(); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); @@ -372,7 +374,8 @@ }; /** -* Initialises the shader buffers +* Initialises the shader buffers. +* * @method initShaderBuffers */ PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() @@ -385,7 +388,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, @@ -394,11 +396,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, @@ -407,10 +405,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, @@ -418,21 +413,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() diff --git a/src/pixi/renderers/webgl/utils/WebGLGraphics.js b/src/pixi/renderers/webgl/utils/WebGLGraphics.js index 4de401d..9ea5a53 100644 --- a/src/pixi/renderers/webgl/utils/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/utils/WebGLGraphics.js @@ -11,7 +11,6 @@ */ PIXI.WebGLGraphics = function() { - }; /** @@ -120,7 +119,6 @@ webGL.data = []; webGL.lastIndex = 0; } - var webGLData; @@ -131,8 +129,6 @@ { var data = graphics.graphicsData[i]; - - if(data.type === PIXI.Graphics.POLY) { // need to add the points the the graphics object.. @@ -189,7 +185,6 @@ } } - webGL.lastIndex++; } @@ -201,7 +196,13 @@ } }; - +/** + * @static + * @private + * @method switchMode + * @param webGL {WebGLContext} + * @param type {Number} + */ PIXI.WebGLGraphics.switchMode = function(webGL, type) { var webGLData; @@ -308,7 +309,6 @@ */ PIXI.WebGLGraphics.buildRoundedRectangle = function(graphicsData, webGLData) { - var points = graphicsData.points; var x = points[0]; var y = points[1]; @@ -316,7 +316,6 @@ 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)); @@ -324,7 +323,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; @@ -368,8 +366,8 @@ }; /** - * 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 * * @static * @private @@ -383,6 +381,7 @@ * @return {Array} */ PIXI.WebGLGraphics.quadraticBezierCurve = function(fromX, fromY, cpX, cpY, toX, toY) { + var xa, ya, xb, @@ -718,13 +717,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; @@ -776,6 +774,15 @@ }; +/** + * 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; @@ -818,6 +825,11 @@ PIXI.WebGLGraphics.graphicsDataPool = []; +/** + * @class WebGLGraphicsData + * @private + * @static + */ PIXI.WebGLGraphicsData = function(gl) { this.gl = gl; @@ -834,6 +846,9 @@ this.dirty = true; }; +/** + * @method reset + */ PIXI.WebGLGraphicsData.prototype.reset = function() { this.points = []; @@ -841,6 +856,9 @@ this.lastIndex = 0; }; +/** + * @method upload + */ PIXI.WebGLGraphicsData.prototype.upload = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js index 181f560..607d5dd 100644 --- a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js @@ -5,16 +5,17 @@ /** * @class WebGLMaskManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLMaskManager = function() { - //this.setContext(gl); }; +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 */ @@ -24,10 +25,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) { @@ -44,10 +46,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) { @@ -55,9 +58,9 @@ 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() diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js index b597698..a15974e 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js @@ -5,38 +5,54 @@ /** * @class WebGLShaderManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLShaderManager = function() { - + /** + * @property maxAttibs + * @type Number + */ this.maxAttibs = 10; + + /** + * @property attribState + * @type Array + */ this.attribState = []; + + /** + * @property tempAttribState + * @type Array + */ this.tempAttribState = []; - for (var i = 0; i < this.maxAttibs; i++) { + for (var i = 0; i < this.maxAttibs; i++) + { this.attribState[i] = false; } + /** + * @property stack + * @type Array + */ this.stack = []; - - //this.setContext(gl); - // the final one is used for the rendering strips + }; +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 @@ -53,16 +69,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++) @@ -97,6 +112,12 @@ } }; +/** +* Sets the current shader. +* +* @method setShader +* @param shader {Any} +*/ PIXI.WebGLShaderManager.prototype.setShader = function(shader) { if(this._currentId === shader._UID)return false; @@ -112,7 +133,8 @@ }; /** -* Destroys +* Destroys this object. +* * @method destroy */ PIXI.WebGLShaderManager.prototype.destroy = function() @@ -133,4 +155,3 @@ this.gl = null; }; - diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js index daa8b64..79d038a 100644 --- a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -9,7 +9,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -17,18 +23,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;', @@ -38,6 +46,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -65,14 +74,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); @@ -84,7 +94,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'); @@ -98,9 +107,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiFastShader.js b/src/pixi/renderers/webgl/shaders/PixiFastShader.js index 4fb3fe2..bb46419 100644 --- a/src/pixi/renderers/webgl/shaders/PixiFastShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiFastShader.js @@ -1,6 +1,5 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -10,6 +9,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -19,12 +23,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;', @@ -37,8 +45,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -69,24 +79,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); @@ -111,8 +122,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? @@ -128,14 +137,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiShader.js b/src/pixi/renderers/webgl/shaders/PixiShader.js index d76ec03..725dce2 100644 --- a/src/pixi/renderers/webgl/shaders/PixiShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiShader.js @@ -6,9 +6,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++; /** @@ -18,13 +24,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;', @@ -36,21 +46,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() { @@ -71,12 +104,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) { @@ -101,6 +133,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 * @@ -316,7 +349,8 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy */ PIXI.PixiShader.prototype.destroy = function() @@ -329,7 +363,8 @@ }; /** -* The Default Vertex shader source +* The Default Vertex shader source. +* * @property defaultVertexSrc * @type String */ diff --git a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js index 3a82be2..0f6854c 100644 --- a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js @@ -9,6 +9,11 @@ */ PIXI.PrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -18,11 +23,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 */ @@ -36,6 +44,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -60,14 +69,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); @@ -78,7 +88,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'); @@ -92,9 +101,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/StripShader.js b/src/pixi/renderers/webgl/shaders/StripShader.js index 11f13ad..8fefe51 100644 --- a/src/pixi/renderers/webgl/shaders/StripShader.js +++ b/src/pixi/renderers/webgl/shaders/StripShader.js @@ -2,20 +2,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;', @@ -30,9 +47,11 @@ '}' ]; - /** - * @property {array} fragmentSrc - The fragment shader. - */ + /** + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -56,10 +75,12 @@ this.init(); }; +PIXI.StripShader.prototype.constructor = PIXI.StripShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.StripShader.prototype.init = function() { @@ -88,9 +109,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.StripShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/utils/FilterTexture.js b/src/pixi/renderers/webgl/utils/FilterTexture.js index 9dada23..389acbe 100644 --- a/src/pixi/renderers/webgl/utils/FilterTexture.js +++ b/src/pixi/renderers/webgl/utils/FilterTexture.js @@ -9,7 +9,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) { @@ -19,11 +18,24 @@ */ 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); @@ -44,9 +56,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() @@ -75,14 +89,14 @@ gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width , height , 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - // console.log( width, width ) // update the stencil buffer width and height gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width , height ); }; /** -* Destroys the filter texture +* Destroys the filter texture. +* * @method destroy */ PIXI.FilterTexture.prototype.destroy = function() diff --git a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js index c73728f..3de0ec9 100644 --- a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js @@ -3,31 +3,42 @@ */ /** -* @class WebGLMaskManager +* @class WebGLBlendModeManager * @constructor * @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLBlendModeManager = function() { + /** + * @property currentBlendMode + * @type Number + */ this.currentBlendMode = 99999; }; +PIXI.WebGLBlendModeManager.prototype.constructor = PIXI.WebGLBlendModeManager; + +/** + * 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 +* 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]; @@ -36,7 +47,12 @@ return true; }; +/** +* Destroys this object. +* +* @method destroy +*/ PIXI.WebGLBlendModeManager.prototype.destroy = function() { this.gl = null; -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js index 0d08e47..0bdbbe4 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -8,27 +8,66 @@ * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java */ +/** +* @class WebGLFastSpriteBatch +* @constructor +*/ PIXI.WebGLFastSpriteBatch = function() { - - + /** + * @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) @@ -41,21 +80,58 @@ 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; @@ -66,7 +142,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); @@ -75,6 +150,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; @@ -85,15 +165,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]; @@ -119,6 +204,10 @@ this.flush(); }; +/** + * @method renderSprite + * @param sprite {Sprite} + */ PIXI.WebGLFastSpriteBatch.prototype.renderSprite = function(sprite) { //sprite = children[i]; @@ -137,7 +226,6 @@ uvs = sprite.texture._uvs; - width = sprite.texture.frame.width; height = sprite.texture.frame.height; @@ -257,9 +345,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; @@ -272,7 +362,6 @@ gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); // upload the verts to the buffer - if(this.currentBatchSize > ( this.size * 0.5 ) ) { @@ -285,7 +374,6 @@ gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, this.currentBatchSize * 6, gl.UNSIGNED_SHORT, 0); @@ -297,11 +385,17 @@ }; +/** + * @method stop + */ PIXI.WebGLFastSpriteBatch.prototype.stop = function() { this.flush(); }; +/** + * @method start + */ PIXI.WebGLFastSpriteBatch.prototype.start = function() { var gl = this.gl; @@ -329,8 +423,5 @@ 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); - }; - - diff --git a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js index 9bb9195..359a834 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js @@ -5,22 +5,33 @@ /** * @class WebGLFilterManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLFilterManager = function() { + /** + * @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 */ @@ -33,7 +44,6 @@ }; /** -* * @method begin * @param renderSession {RenderSession} * @param buffer {ArrayBuffer} @@ -44,14 +54,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 */ @@ -64,7 +74,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); @@ -126,9 +135,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() @@ -211,7 +220,6 @@ this.offsetX -= filterArea.x; this.offsetY -= filterArea.y; - var sizeX = this.width; var sizeY = this.height; @@ -239,9 +247,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; @@ -280,10 +286,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 @@ -300,9 +302,9 @@ this.applyFilterPass(filter, filterArea, sizeX, sizeY); // 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); + // 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); @@ -311,7 +313,8 @@ /** -* 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 @@ -351,7 +354,6 @@ filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; } - // console.log(this.uvArray ) shader.syncUniforms(); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); @@ -372,7 +374,8 @@ }; /** -* Initialises the shader buffers +* Initialises the shader buffers. +* * @method initShaderBuffers */ PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() @@ -385,7 +388,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, @@ -394,11 +396,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, @@ -407,10 +405,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, @@ -418,21 +413,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() diff --git a/src/pixi/renderers/webgl/utils/WebGLGraphics.js b/src/pixi/renderers/webgl/utils/WebGLGraphics.js index 4de401d..9ea5a53 100644 --- a/src/pixi/renderers/webgl/utils/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/utils/WebGLGraphics.js @@ -11,7 +11,6 @@ */ PIXI.WebGLGraphics = function() { - }; /** @@ -120,7 +119,6 @@ webGL.data = []; webGL.lastIndex = 0; } - var webGLData; @@ -131,8 +129,6 @@ { var data = graphics.graphicsData[i]; - - if(data.type === PIXI.Graphics.POLY) { // need to add the points the the graphics object.. @@ -189,7 +185,6 @@ } } - webGL.lastIndex++; } @@ -201,7 +196,13 @@ } }; - +/** + * @static + * @private + * @method switchMode + * @param webGL {WebGLContext} + * @param type {Number} + */ PIXI.WebGLGraphics.switchMode = function(webGL, type) { var webGLData; @@ -308,7 +309,6 @@ */ PIXI.WebGLGraphics.buildRoundedRectangle = function(graphicsData, webGLData) { - var points = graphicsData.points; var x = points[0]; var y = points[1]; @@ -316,7 +316,6 @@ 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)); @@ -324,7 +323,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; @@ -368,8 +366,8 @@ }; /** - * 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 * * @static * @private @@ -383,6 +381,7 @@ * @return {Array} */ PIXI.WebGLGraphics.quadraticBezierCurve = function(fromX, fromY, cpX, cpY, toX, toY) { + var xa, ya, xb, @@ -718,13 +717,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; @@ -776,6 +774,15 @@ }; +/** + * 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; @@ -818,6 +825,11 @@ PIXI.WebGLGraphics.graphicsDataPool = []; +/** + * @class WebGLGraphicsData + * @private + * @static + */ PIXI.WebGLGraphicsData = function(gl) { this.gl = gl; @@ -834,6 +846,9 @@ this.dirty = true; }; +/** + * @method reset + */ PIXI.WebGLGraphicsData.prototype.reset = function() { this.points = []; @@ -841,6 +856,9 @@ this.lastIndex = 0; }; +/** + * @method upload + */ PIXI.WebGLGraphicsData.prototype.upload = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js index 181f560..607d5dd 100644 --- a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js @@ -5,16 +5,17 @@ /** * @class WebGLMaskManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLMaskManager = function() { - //this.setContext(gl); }; +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 */ @@ -24,10 +25,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) { @@ -44,10 +46,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) { @@ -55,9 +58,9 @@ 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() diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js index b597698..a15974e 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js @@ -5,38 +5,54 @@ /** * @class WebGLShaderManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLShaderManager = function() { - + /** + * @property maxAttibs + * @type Number + */ this.maxAttibs = 10; + + /** + * @property attribState + * @type Array + */ this.attribState = []; + + /** + * @property tempAttribState + * @type Array + */ this.tempAttribState = []; - for (var i = 0; i < this.maxAttibs; i++) { + for (var i = 0; i < this.maxAttibs; i++) + { this.attribState[i] = false; } + /** + * @property stack + * @type Array + */ this.stack = []; - - //this.setContext(gl); - // the final one is used for the rendering strips + }; +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 @@ -53,16 +69,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++) @@ -97,6 +112,12 @@ } }; +/** +* Sets the current shader. +* +* @method setShader +* @param shader {Any} +*/ PIXI.WebGLShaderManager.prototype.setShader = function(shader) { if(this._currentId === shader._UID)return false; @@ -112,7 +133,8 @@ }; /** -* Destroys +* Destroys this object. +* * @method destroy */ PIXI.WebGLShaderManager.prototype.destroy = function() @@ -133,4 +155,3 @@ this.gl = null; }; - diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js index f6cc024..995aa9b 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js @@ -2,27 +2,44 @@ * @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 +* @private +*/ PIXI.initDefaultShaders = function() { - - // PIXI.stripShader = new PIXI.StripShader(); -// PIXI.stripShader.init(); - }; +/** +* @method CompileVertexShader +* @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 +* @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 +* @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"); @@ -30,7 +47,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; } @@ -38,6 +56,13 @@ return shader; }; +/** +* @method compileProgram +* @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); @@ -49,7 +74,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"); } diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js index daa8b64..79d038a 100644 --- a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -9,7 +9,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -17,18 +23,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;', @@ -38,6 +46,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -65,14 +74,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); @@ -84,7 +94,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'); @@ -98,9 +107,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiFastShader.js b/src/pixi/renderers/webgl/shaders/PixiFastShader.js index 4fb3fe2..bb46419 100644 --- a/src/pixi/renderers/webgl/shaders/PixiFastShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiFastShader.js @@ -1,6 +1,5 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -10,6 +9,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -19,12 +23,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;', @@ -37,8 +45,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -69,24 +79,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); @@ -111,8 +122,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? @@ -128,14 +137,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiShader.js b/src/pixi/renderers/webgl/shaders/PixiShader.js index d76ec03..725dce2 100644 --- a/src/pixi/renderers/webgl/shaders/PixiShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiShader.js @@ -6,9 +6,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++; /** @@ -18,13 +24,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;', @@ -36,21 +46,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() { @@ -71,12 +104,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) { @@ -101,6 +133,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 * @@ -316,7 +349,8 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy */ PIXI.PixiShader.prototype.destroy = function() @@ -329,7 +363,8 @@ }; /** -* The Default Vertex shader source +* The Default Vertex shader source. +* * @property defaultVertexSrc * @type String */ diff --git a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js index 3a82be2..0f6854c 100644 --- a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js @@ -9,6 +9,11 @@ */ PIXI.PrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -18,11 +23,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 */ @@ -36,6 +44,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -60,14 +69,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); @@ -78,7 +88,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'); @@ -92,9 +101,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/StripShader.js b/src/pixi/renderers/webgl/shaders/StripShader.js index 11f13ad..8fefe51 100644 --- a/src/pixi/renderers/webgl/shaders/StripShader.js +++ b/src/pixi/renderers/webgl/shaders/StripShader.js @@ -2,20 +2,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;', @@ -30,9 +47,11 @@ '}' ]; - /** - * @property {array} fragmentSrc - The fragment shader. - */ + /** + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -56,10 +75,12 @@ this.init(); }; +PIXI.StripShader.prototype.constructor = PIXI.StripShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.StripShader.prototype.init = function() { @@ -88,9 +109,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.StripShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/utils/FilterTexture.js b/src/pixi/renderers/webgl/utils/FilterTexture.js index 9dada23..389acbe 100644 --- a/src/pixi/renderers/webgl/utils/FilterTexture.js +++ b/src/pixi/renderers/webgl/utils/FilterTexture.js @@ -9,7 +9,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) { @@ -19,11 +18,24 @@ */ 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); @@ -44,9 +56,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() @@ -75,14 +89,14 @@ gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width , height , 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - // console.log( width, width ) // update the stencil buffer width and height gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width , height ); }; /** -* Destroys the filter texture +* Destroys the filter texture. +* * @method destroy */ PIXI.FilterTexture.prototype.destroy = function() diff --git a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js index c73728f..3de0ec9 100644 --- a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js @@ -3,31 +3,42 @@ */ /** -* @class WebGLMaskManager +* @class WebGLBlendModeManager * @constructor * @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLBlendModeManager = function() { + /** + * @property currentBlendMode + * @type Number + */ this.currentBlendMode = 99999; }; +PIXI.WebGLBlendModeManager.prototype.constructor = PIXI.WebGLBlendModeManager; + +/** + * 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 +* 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]; @@ -36,7 +47,12 @@ return true; }; +/** +* Destroys this object. +* +* @method destroy +*/ PIXI.WebGLBlendModeManager.prototype.destroy = function() { this.gl = null; -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js index 0d08e47..0bdbbe4 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -8,27 +8,66 @@ * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java */ +/** +* @class WebGLFastSpriteBatch +* @constructor +*/ PIXI.WebGLFastSpriteBatch = function() { - - + /** + * @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) @@ -41,21 +80,58 @@ 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; @@ -66,7 +142,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); @@ -75,6 +150,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; @@ -85,15 +165,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]; @@ -119,6 +204,10 @@ this.flush(); }; +/** + * @method renderSprite + * @param sprite {Sprite} + */ PIXI.WebGLFastSpriteBatch.prototype.renderSprite = function(sprite) { //sprite = children[i]; @@ -137,7 +226,6 @@ uvs = sprite.texture._uvs; - width = sprite.texture.frame.width; height = sprite.texture.frame.height; @@ -257,9 +345,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; @@ -272,7 +362,6 @@ gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); // upload the verts to the buffer - if(this.currentBatchSize > ( this.size * 0.5 ) ) { @@ -285,7 +374,6 @@ gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, this.currentBatchSize * 6, gl.UNSIGNED_SHORT, 0); @@ -297,11 +385,17 @@ }; +/** + * @method stop + */ PIXI.WebGLFastSpriteBatch.prototype.stop = function() { this.flush(); }; +/** + * @method start + */ PIXI.WebGLFastSpriteBatch.prototype.start = function() { var gl = this.gl; @@ -329,8 +423,5 @@ 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); - }; - - diff --git a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js index 9bb9195..359a834 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js @@ -5,22 +5,33 @@ /** * @class WebGLFilterManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLFilterManager = function() { + /** + * @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 */ @@ -33,7 +44,6 @@ }; /** -* * @method begin * @param renderSession {RenderSession} * @param buffer {ArrayBuffer} @@ -44,14 +54,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 */ @@ -64,7 +74,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); @@ -126,9 +135,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() @@ -211,7 +220,6 @@ this.offsetX -= filterArea.x; this.offsetY -= filterArea.y; - var sizeX = this.width; var sizeY = this.height; @@ -239,9 +247,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; @@ -280,10 +286,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 @@ -300,9 +302,9 @@ this.applyFilterPass(filter, filterArea, sizeX, sizeY); // 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); + // 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); @@ -311,7 +313,8 @@ /** -* 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 @@ -351,7 +354,6 @@ filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; } - // console.log(this.uvArray ) shader.syncUniforms(); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); @@ -372,7 +374,8 @@ }; /** -* Initialises the shader buffers +* Initialises the shader buffers. +* * @method initShaderBuffers */ PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() @@ -385,7 +388,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, @@ -394,11 +396,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, @@ -407,10 +405,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, @@ -418,21 +413,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() diff --git a/src/pixi/renderers/webgl/utils/WebGLGraphics.js b/src/pixi/renderers/webgl/utils/WebGLGraphics.js index 4de401d..9ea5a53 100644 --- a/src/pixi/renderers/webgl/utils/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/utils/WebGLGraphics.js @@ -11,7 +11,6 @@ */ PIXI.WebGLGraphics = function() { - }; /** @@ -120,7 +119,6 @@ webGL.data = []; webGL.lastIndex = 0; } - var webGLData; @@ -131,8 +129,6 @@ { var data = graphics.graphicsData[i]; - - if(data.type === PIXI.Graphics.POLY) { // need to add the points the the graphics object.. @@ -189,7 +185,6 @@ } } - webGL.lastIndex++; } @@ -201,7 +196,13 @@ } }; - +/** + * @static + * @private + * @method switchMode + * @param webGL {WebGLContext} + * @param type {Number} + */ PIXI.WebGLGraphics.switchMode = function(webGL, type) { var webGLData; @@ -308,7 +309,6 @@ */ PIXI.WebGLGraphics.buildRoundedRectangle = function(graphicsData, webGLData) { - var points = graphicsData.points; var x = points[0]; var y = points[1]; @@ -316,7 +316,6 @@ 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)); @@ -324,7 +323,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; @@ -368,8 +366,8 @@ }; /** - * 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 * * @static * @private @@ -383,6 +381,7 @@ * @return {Array} */ PIXI.WebGLGraphics.quadraticBezierCurve = function(fromX, fromY, cpX, cpY, toX, toY) { + var xa, ya, xb, @@ -718,13 +717,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; @@ -776,6 +774,15 @@ }; +/** + * 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; @@ -818,6 +825,11 @@ PIXI.WebGLGraphics.graphicsDataPool = []; +/** + * @class WebGLGraphicsData + * @private + * @static + */ PIXI.WebGLGraphicsData = function(gl) { this.gl = gl; @@ -834,6 +846,9 @@ this.dirty = true; }; +/** + * @method reset + */ PIXI.WebGLGraphicsData.prototype.reset = function() { this.points = []; @@ -841,6 +856,9 @@ this.lastIndex = 0; }; +/** + * @method upload + */ PIXI.WebGLGraphicsData.prototype.upload = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js index 181f560..607d5dd 100644 --- a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js @@ -5,16 +5,17 @@ /** * @class WebGLMaskManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLMaskManager = function() { - //this.setContext(gl); }; +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 */ @@ -24,10 +25,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) { @@ -44,10 +46,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) { @@ -55,9 +58,9 @@ 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() diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js index b597698..a15974e 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js @@ -5,38 +5,54 @@ /** * @class WebGLShaderManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLShaderManager = function() { - + /** + * @property maxAttibs + * @type Number + */ this.maxAttibs = 10; + + /** + * @property attribState + * @type Array + */ this.attribState = []; + + /** + * @property tempAttribState + * @type Array + */ this.tempAttribState = []; - for (var i = 0; i < this.maxAttibs; i++) { + for (var i = 0; i < this.maxAttibs; i++) + { this.attribState[i] = false; } + /** + * @property stack + * @type Array + */ this.stack = []; - - //this.setContext(gl); - // the final one is used for the rendering strips + }; +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 @@ -53,16 +69,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++) @@ -97,6 +112,12 @@ } }; +/** +* Sets the current shader. +* +* @method setShader +* @param shader {Any} +*/ PIXI.WebGLShaderManager.prototype.setShader = function(shader) { if(this._currentId === shader._UID)return false; @@ -112,7 +133,8 @@ }; /** -* Destroys +* Destroys this object. +* * @method destroy */ PIXI.WebGLShaderManager.prototype.destroy = function() @@ -133,4 +155,3 @@ this.gl = null; }; - diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js index f6cc024..995aa9b 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js @@ -2,27 +2,44 @@ * @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 +* @private +*/ PIXI.initDefaultShaders = function() { - - // PIXI.stripShader = new PIXI.StripShader(); -// PIXI.stripShader.init(); - }; +/** +* @method CompileVertexShader +* @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 +* @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 +* @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"); @@ -30,7 +47,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; } @@ -38,6 +56,13 @@ return shader; }; +/** +* @method compileProgram +* @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); @@ -49,7 +74,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"); } diff --git a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js index 4d59c80..f8a4bd7 100755 --- a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js @@ -13,15 +13,10 @@ * @class WebGLSpriteBatch * @private * @constructor - * @param gl {WebGLContext} the current WebGL drawing context - * */ PIXI.WebGLSpriteBatch = function() { - /** - * - * * @property vertSize * @type Number */ @@ -47,7 +42,6 @@ */ this.vertices = new Float32Array(numVerts); - //index data /** * Holds the indices * @@ -56,6 +50,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) @@ -68,20 +66,58 @@ 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;', @@ -94,9 +130,7 @@ }; /** -* * @method setContext -* * @param gl {WebGLContext} the current WebGL drawing context */ PIXI.WebGLSpriteBatch.prototype.setContext = function(gl) @@ -109,7 +143,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); @@ -125,15 +158,12 @@ 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) { @@ -144,9 +174,7 @@ }; /** -* * @method end -* */ PIXI.WebGLSpriteBatch.prototype.end = function() { @@ -154,16 +182,13 @@ }; /** -* * @method render -* * @param sprite {Sprite} the sprite to render when using this spritebatch */ PIXI.WebGLSpriteBatch.prototype.render = function(sprite) { var texture = sprite.texture; - //TODO set blend modes.. // check texture.. if(this.currentBatchSize >= this.size) @@ -270,9 +295,9 @@ }; /** -* 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) @@ -390,12 +415,10 @@ 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() { @@ -516,6 +539,12 @@ 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; @@ -532,7 +561,6 @@ // bind the current texture gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, size * 6, gl.UNSIGNED_SHORT, startIndex * 6 * 2); @@ -541,11 +569,8 @@ this.renderSession.drawCount++; }; - /** -* * @method stop -* */ PIXI.WebGLSpriteBatch.prototype.stop = function() { @@ -554,9 +579,7 @@ }; /** -* * @method start -* */ PIXI.WebGLSpriteBatch.prototype.start = function() { @@ -564,12 +587,12 @@ }; /** -* Destroys the SpriteBatch +* Destroys the SpriteBatch. +* * @method destroy */ PIXI.WebGLSpriteBatch.prototype.destroy = function() { - this.vertices = null; this.indices = null; diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js index daa8b64..79d038a 100644 --- a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -9,7 +9,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -17,18 +23,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;', @@ -38,6 +46,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -65,14 +74,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); @@ -84,7 +94,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'); @@ -98,9 +107,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiFastShader.js b/src/pixi/renderers/webgl/shaders/PixiFastShader.js index 4fb3fe2..bb46419 100644 --- a/src/pixi/renderers/webgl/shaders/PixiFastShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiFastShader.js @@ -1,6 +1,5 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -10,6 +9,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -19,12 +23,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;', @@ -37,8 +45,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -69,24 +79,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); @@ -111,8 +122,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? @@ -128,14 +137,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiShader.js b/src/pixi/renderers/webgl/shaders/PixiShader.js index d76ec03..725dce2 100644 --- a/src/pixi/renderers/webgl/shaders/PixiShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiShader.js @@ -6,9 +6,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++; /** @@ -18,13 +24,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;', @@ -36,21 +46,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() { @@ -71,12 +104,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) { @@ -101,6 +133,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 * @@ -316,7 +349,8 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy */ PIXI.PixiShader.prototype.destroy = function() @@ -329,7 +363,8 @@ }; /** -* The Default Vertex shader source +* The Default Vertex shader source. +* * @property defaultVertexSrc * @type String */ diff --git a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js index 3a82be2..0f6854c 100644 --- a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js @@ -9,6 +9,11 @@ */ PIXI.PrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -18,11 +23,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 */ @@ -36,6 +44,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -60,14 +69,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); @@ -78,7 +88,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'); @@ -92,9 +101,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/StripShader.js b/src/pixi/renderers/webgl/shaders/StripShader.js index 11f13ad..8fefe51 100644 --- a/src/pixi/renderers/webgl/shaders/StripShader.js +++ b/src/pixi/renderers/webgl/shaders/StripShader.js @@ -2,20 +2,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;', @@ -30,9 +47,11 @@ '}' ]; - /** - * @property {array} fragmentSrc - The fragment shader. - */ + /** + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -56,10 +75,12 @@ this.init(); }; +PIXI.StripShader.prototype.constructor = PIXI.StripShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.StripShader.prototype.init = function() { @@ -88,9 +109,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.StripShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/utils/FilterTexture.js b/src/pixi/renderers/webgl/utils/FilterTexture.js index 9dada23..389acbe 100644 --- a/src/pixi/renderers/webgl/utils/FilterTexture.js +++ b/src/pixi/renderers/webgl/utils/FilterTexture.js @@ -9,7 +9,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) { @@ -19,11 +18,24 @@ */ 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); @@ -44,9 +56,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() @@ -75,14 +89,14 @@ gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width , height , 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - // console.log( width, width ) // update the stencil buffer width and height gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width , height ); }; /** -* Destroys the filter texture +* Destroys the filter texture. +* * @method destroy */ PIXI.FilterTexture.prototype.destroy = function() diff --git a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js index c73728f..3de0ec9 100644 --- a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js @@ -3,31 +3,42 @@ */ /** -* @class WebGLMaskManager +* @class WebGLBlendModeManager * @constructor * @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLBlendModeManager = function() { + /** + * @property currentBlendMode + * @type Number + */ this.currentBlendMode = 99999; }; +PIXI.WebGLBlendModeManager.prototype.constructor = PIXI.WebGLBlendModeManager; + +/** + * 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 +* 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]; @@ -36,7 +47,12 @@ return true; }; +/** +* Destroys this object. +* +* @method destroy +*/ PIXI.WebGLBlendModeManager.prototype.destroy = function() { this.gl = null; -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js index 0d08e47..0bdbbe4 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -8,27 +8,66 @@ * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java */ +/** +* @class WebGLFastSpriteBatch +* @constructor +*/ PIXI.WebGLFastSpriteBatch = function() { - - + /** + * @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) @@ -41,21 +80,58 @@ 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; @@ -66,7 +142,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); @@ -75,6 +150,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; @@ -85,15 +165,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]; @@ -119,6 +204,10 @@ this.flush(); }; +/** + * @method renderSprite + * @param sprite {Sprite} + */ PIXI.WebGLFastSpriteBatch.prototype.renderSprite = function(sprite) { //sprite = children[i]; @@ -137,7 +226,6 @@ uvs = sprite.texture._uvs; - width = sprite.texture.frame.width; height = sprite.texture.frame.height; @@ -257,9 +345,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; @@ -272,7 +362,6 @@ gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); // upload the verts to the buffer - if(this.currentBatchSize > ( this.size * 0.5 ) ) { @@ -285,7 +374,6 @@ gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, this.currentBatchSize * 6, gl.UNSIGNED_SHORT, 0); @@ -297,11 +385,17 @@ }; +/** + * @method stop + */ PIXI.WebGLFastSpriteBatch.prototype.stop = function() { this.flush(); }; +/** + * @method start + */ PIXI.WebGLFastSpriteBatch.prototype.start = function() { var gl = this.gl; @@ -329,8 +423,5 @@ 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); - }; - - diff --git a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js index 9bb9195..359a834 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js @@ -5,22 +5,33 @@ /** * @class WebGLFilterManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLFilterManager = function() { + /** + * @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 */ @@ -33,7 +44,6 @@ }; /** -* * @method begin * @param renderSession {RenderSession} * @param buffer {ArrayBuffer} @@ -44,14 +54,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 */ @@ -64,7 +74,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); @@ -126,9 +135,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() @@ -211,7 +220,6 @@ this.offsetX -= filterArea.x; this.offsetY -= filterArea.y; - var sizeX = this.width; var sizeY = this.height; @@ -239,9 +247,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; @@ -280,10 +286,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 @@ -300,9 +302,9 @@ this.applyFilterPass(filter, filterArea, sizeX, sizeY); // 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); + // 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); @@ -311,7 +313,8 @@ /** -* 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 @@ -351,7 +354,6 @@ filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; } - // console.log(this.uvArray ) shader.syncUniforms(); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); @@ -372,7 +374,8 @@ }; /** -* Initialises the shader buffers +* Initialises the shader buffers. +* * @method initShaderBuffers */ PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() @@ -385,7 +388,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, @@ -394,11 +396,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, @@ -407,10 +405,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, @@ -418,21 +413,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() diff --git a/src/pixi/renderers/webgl/utils/WebGLGraphics.js b/src/pixi/renderers/webgl/utils/WebGLGraphics.js index 4de401d..9ea5a53 100644 --- a/src/pixi/renderers/webgl/utils/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/utils/WebGLGraphics.js @@ -11,7 +11,6 @@ */ PIXI.WebGLGraphics = function() { - }; /** @@ -120,7 +119,6 @@ webGL.data = []; webGL.lastIndex = 0; } - var webGLData; @@ -131,8 +129,6 @@ { var data = graphics.graphicsData[i]; - - if(data.type === PIXI.Graphics.POLY) { // need to add the points the the graphics object.. @@ -189,7 +185,6 @@ } } - webGL.lastIndex++; } @@ -201,7 +196,13 @@ } }; - +/** + * @static + * @private + * @method switchMode + * @param webGL {WebGLContext} + * @param type {Number} + */ PIXI.WebGLGraphics.switchMode = function(webGL, type) { var webGLData; @@ -308,7 +309,6 @@ */ PIXI.WebGLGraphics.buildRoundedRectangle = function(graphicsData, webGLData) { - var points = graphicsData.points; var x = points[0]; var y = points[1]; @@ -316,7 +316,6 @@ 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)); @@ -324,7 +323,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; @@ -368,8 +366,8 @@ }; /** - * 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 * * @static * @private @@ -383,6 +381,7 @@ * @return {Array} */ PIXI.WebGLGraphics.quadraticBezierCurve = function(fromX, fromY, cpX, cpY, toX, toY) { + var xa, ya, xb, @@ -718,13 +717,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; @@ -776,6 +774,15 @@ }; +/** + * 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; @@ -818,6 +825,11 @@ PIXI.WebGLGraphics.graphicsDataPool = []; +/** + * @class WebGLGraphicsData + * @private + * @static + */ PIXI.WebGLGraphicsData = function(gl) { this.gl = gl; @@ -834,6 +846,9 @@ this.dirty = true; }; +/** + * @method reset + */ PIXI.WebGLGraphicsData.prototype.reset = function() { this.points = []; @@ -841,6 +856,9 @@ this.lastIndex = 0; }; +/** + * @method upload + */ PIXI.WebGLGraphicsData.prototype.upload = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js index 181f560..607d5dd 100644 --- a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js @@ -5,16 +5,17 @@ /** * @class WebGLMaskManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLMaskManager = function() { - //this.setContext(gl); }; +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 */ @@ -24,10 +25,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) { @@ -44,10 +46,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) { @@ -55,9 +58,9 @@ 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() diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js index b597698..a15974e 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js @@ -5,38 +5,54 @@ /** * @class WebGLShaderManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLShaderManager = function() { - + /** + * @property maxAttibs + * @type Number + */ this.maxAttibs = 10; + + /** + * @property attribState + * @type Array + */ this.attribState = []; + + /** + * @property tempAttribState + * @type Array + */ this.tempAttribState = []; - for (var i = 0; i < this.maxAttibs; i++) { + for (var i = 0; i < this.maxAttibs; i++) + { this.attribState[i] = false; } + /** + * @property stack + * @type Array + */ this.stack = []; - - //this.setContext(gl); - // the final one is used for the rendering strips + }; +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 @@ -53,16 +69,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++) @@ -97,6 +112,12 @@ } }; +/** +* Sets the current shader. +* +* @method setShader +* @param shader {Any} +*/ PIXI.WebGLShaderManager.prototype.setShader = function(shader) { if(this._currentId === shader._UID)return false; @@ -112,7 +133,8 @@ }; /** -* Destroys +* Destroys this object. +* * @method destroy */ PIXI.WebGLShaderManager.prototype.destroy = function() @@ -133,4 +155,3 @@ this.gl = null; }; - diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js index f6cc024..995aa9b 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js @@ -2,27 +2,44 @@ * @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 +* @private +*/ PIXI.initDefaultShaders = function() { - - // PIXI.stripShader = new PIXI.StripShader(); -// PIXI.stripShader.init(); - }; +/** +* @method CompileVertexShader +* @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 +* @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 +* @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"); @@ -30,7 +47,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; } @@ -38,6 +56,13 @@ return shader; }; +/** +* @method compileProgram +* @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); @@ -49,7 +74,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"); } diff --git a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js index 4d59c80..f8a4bd7 100755 --- a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js @@ -13,15 +13,10 @@ * @class WebGLSpriteBatch * @private * @constructor - * @param gl {WebGLContext} the current WebGL drawing context - * */ PIXI.WebGLSpriteBatch = function() { - /** - * - * * @property vertSize * @type Number */ @@ -47,7 +42,6 @@ */ this.vertices = new Float32Array(numVerts); - //index data /** * Holds the indices * @@ -56,6 +50,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) @@ -68,20 +66,58 @@ 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;', @@ -94,9 +130,7 @@ }; /** -* * @method setContext -* * @param gl {WebGLContext} the current WebGL drawing context */ PIXI.WebGLSpriteBatch.prototype.setContext = function(gl) @@ -109,7 +143,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); @@ -125,15 +158,12 @@ 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) { @@ -144,9 +174,7 @@ }; /** -* * @method end -* */ PIXI.WebGLSpriteBatch.prototype.end = function() { @@ -154,16 +182,13 @@ }; /** -* * @method render -* * @param sprite {Sprite} the sprite to render when using this spritebatch */ PIXI.WebGLSpriteBatch.prototype.render = function(sprite) { var texture = sprite.texture; - //TODO set blend modes.. // check texture.. if(this.currentBatchSize >= this.size) @@ -270,9 +295,9 @@ }; /** -* 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) @@ -390,12 +415,10 @@ 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() { @@ -516,6 +539,12 @@ 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; @@ -532,7 +561,6 @@ // bind the current texture gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, size * 6, gl.UNSIGNED_SHORT, startIndex * 6 * 2); @@ -541,11 +569,8 @@ this.renderSession.drawCount++; }; - /** -* * @method stop -* */ PIXI.WebGLSpriteBatch.prototype.stop = function() { @@ -554,9 +579,7 @@ }; /** -* * @method start -* */ PIXI.WebGLSpriteBatch.prototype.start = function() { @@ -564,12 +587,12 @@ }; /** -* Destroys the SpriteBatch +* Destroys the SpriteBatch. +* * @method destroy */ PIXI.WebGLSpriteBatch.prototype.destroy = function() { - this.vertices = null; this.indices = null; diff --git a/src/pixi/renderers/webgl/utils/WebGLStencilManager.js b/src/pixi/renderers/webgl/utils/WebGLStencilManager.js index f841e6f..367d7dc 100644 --- a/src/pixi/renderers/webgl/utils/WebGLStencilManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLStencilManager.js @@ -5,21 +5,18 @@ /** * @class WebGLStencilManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ 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 */ @@ -29,10 +26,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) { @@ -60,7 +59,6 @@ if(webGLData.mode === 1) { - gl.drawElements(gl.TRIANGLE_FAN, webGLData.indices.length - 4, gl.UNSIGNED_SHORT, 0 ); if(this.reverse) @@ -119,7 +117,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; @@ -182,6 +187,12 @@ } }; +/** + * @method popStencil + * @param graphics {Graphics} + * @param webGLData {Array} + * @param renderSession {Object} + */ PIXI.WebGLStencilManager.prototype.popStencil = function(graphics, webGLData, renderSession) { var gl = this.gl; @@ -272,7 +283,8 @@ }; /** -* Destroys the mask stack +* Destroys the mask stack. +* * @method destroy */ PIXI.WebGLStencilManager.prototype.destroy = function() diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js index daa8b64..79d038a 100644 --- a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -9,7 +9,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -17,18 +23,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;', @@ -38,6 +46,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -65,14 +74,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); @@ -84,7 +94,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'); @@ -98,9 +107,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiFastShader.js b/src/pixi/renderers/webgl/shaders/PixiFastShader.js index 4fb3fe2..bb46419 100644 --- a/src/pixi/renderers/webgl/shaders/PixiFastShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiFastShader.js @@ -1,6 +1,5 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -10,6 +9,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -19,12 +23,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;', @@ -37,8 +45,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -69,24 +79,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); @@ -111,8 +122,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? @@ -128,14 +137,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiShader.js b/src/pixi/renderers/webgl/shaders/PixiShader.js index d76ec03..725dce2 100644 --- a/src/pixi/renderers/webgl/shaders/PixiShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiShader.js @@ -6,9 +6,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++; /** @@ -18,13 +24,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;', @@ -36,21 +46,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() { @@ -71,12 +104,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) { @@ -101,6 +133,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 * @@ -316,7 +349,8 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy */ PIXI.PixiShader.prototype.destroy = function() @@ -329,7 +363,8 @@ }; /** -* The Default Vertex shader source +* The Default Vertex shader source. +* * @property defaultVertexSrc * @type String */ diff --git a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js index 3a82be2..0f6854c 100644 --- a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js @@ -9,6 +9,11 @@ */ PIXI.PrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -18,11 +23,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 */ @@ -36,6 +44,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -60,14 +69,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); @@ -78,7 +88,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'); @@ -92,9 +101,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/StripShader.js b/src/pixi/renderers/webgl/shaders/StripShader.js index 11f13ad..8fefe51 100644 --- a/src/pixi/renderers/webgl/shaders/StripShader.js +++ b/src/pixi/renderers/webgl/shaders/StripShader.js @@ -2,20 +2,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;', @@ -30,9 +47,11 @@ '}' ]; - /** - * @property {array} fragmentSrc - The fragment shader. - */ + /** + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -56,10 +75,12 @@ this.init(); }; +PIXI.StripShader.prototype.constructor = PIXI.StripShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.StripShader.prototype.init = function() { @@ -88,9 +109,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.StripShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/utils/FilterTexture.js b/src/pixi/renderers/webgl/utils/FilterTexture.js index 9dada23..389acbe 100644 --- a/src/pixi/renderers/webgl/utils/FilterTexture.js +++ b/src/pixi/renderers/webgl/utils/FilterTexture.js @@ -9,7 +9,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) { @@ -19,11 +18,24 @@ */ 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); @@ -44,9 +56,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() @@ -75,14 +89,14 @@ gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width , height , 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - // console.log( width, width ) // update the stencil buffer width and height gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width , height ); }; /** -* Destroys the filter texture +* Destroys the filter texture. +* * @method destroy */ PIXI.FilterTexture.prototype.destroy = function() diff --git a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js index c73728f..3de0ec9 100644 --- a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js @@ -3,31 +3,42 @@ */ /** -* @class WebGLMaskManager +* @class WebGLBlendModeManager * @constructor * @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLBlendModeManager = function() { + /** + * @property currentBlendMode + * @type Number + */ this.currentBlendMode = 99999; }; +PIXI.WebGLBlendModeManager.prototype.constructor = PIXI.WebGLBlendModeManager; + +/** + * 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 +* 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]; @@ -36,7 +47,12 @@ return true; }; +/** +* Destroys this object. +* +* @method destroy +*/ PIXI.WebGLBlendModeManager.prototype.destroy = function() { this.gl = null; -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js index 0d08e47..0bdbbe4 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -8,27 +8,66 @@ * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java */ +/** +* @class WebGLFastSpriteBatch +* @constructor +*/ PIXI.WebGLFastSpriteBatch = function() { - - + /** + * @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) @@ -41,21 +80,58 @@ 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; @@ -66,7 +142,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); @@ -75,6 +150,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; @@ -85,15 +165,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]; @@ -119,6 +204,10 @@ this.flush(); }; +/** + * @method renderSprite + * @param sprite {Sprite} + */ PIXI.WebGLFastSpriteBatch.prototype.renderSprite = function(sprite) { //sprite = children[i]; @@ -137,7 +226,6 @@ uvs = sprite.texture._uvs; - width = sprite.texture.frame.width; height = sprite.texture.frame.height; @@ -257,9 +345,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; @@ -272,7 +362,6 @@ gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); // upload the verts to the buffer - if(this.currentBatchSize > ( this.size * 0.5 ) ) { @@ -285,7 +374,6 @@ gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, this.currentBatchSize * 6, gl.UNSIGNED_SHORT, 0); @@ -297,11 +385,17 @@ }; +/** + * @method stop + */ PIXI.WebGLFastSpriteBatch.prototype.stop = function() { this.flush(); }; +/** + * @method start + */ PIXI.WebGLFastSpriteBatch.prototype.start = function() { var gl = this.gl; @@ -329,8 +423,5 @@ 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); - }; - - diff --git a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js index 9bb9195..359a834 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js @@ -5,22 +5,33 @@ /** * @class WebGLFilterManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLFilterManager = function() { + /** + * @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 */ @@ -33,7 +44,6 @@ }; /** -* * @method begin * @param renderSession {RenderSession} * @param buffer {ArrayBuffer} @@ -44,14 +54,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 */ @@ -64,7 +74,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); @@ -126,9 +135,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() @@ -211,7 +220,6 @@ this.offsetX -= filterArea.x; this.offsetY -= filterArea.y; - var sizeX = this.width; var sizeY = this.height; @@ -239,9 +247,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; @@ -280,10 +286,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 @@ -300,9 +302,9 @@ this.applyFilterPass(filter, filterArea, sizeX, sizeY); // 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); + // 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); @@ -311,7 +313,8 @@ /** -* 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 @@ -351,7 +354,6 @@ filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; } - // console.log(this.uvArray ) shader.syncUniforms(); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); @@ -372,7 +374,8 @@ }; /** -* Initialises the shader buffers +* Initialises the shader buffers. +* * @method initShaderBuffers */ PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() @@ -385,7 +388,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, @@ -394,11 +396,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, @@ -407,10 +405,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, @@ -418,21 +413,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() diff --git a/src/pixi/renderers/webgl/utils/WebGLGraphics.js b/src/pixi/renderers/webgl/utils/WebGLGraphics.js index 4de401d..9ea5a53 100644 --- a/src/pixi/renderers/webgl/utils/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/utils/WebGLGraphics.js @@ -11,7 +11,6 @@ */ PIXI.WebGLGraphics = function() { - }; /** @@ -120,7 +119,6 @@ webGL.data = []; webGL.lastIndex = 0; } - var webGLData; @@ -131,8 +129,6 @@ { var data = graphics.graphicsData[i]; - - if(data.type === PIXI.Graphics.POLY) { // need to add the points the the graphics object.. @@ -189,7 +185,6 @@ } } - webGL.lastIndex++; } @@ -201,7 +196,13 @@ } }; - +/** + * @static + * @private + * @method switchMode + * @param webGL {WebGLContext} + * @param type {Number} + */ PIXI.WebGLGraphics.switchMode = function(webGL, type) { var webGLData; @@ -308,7 +309,6 @@ */ PIXI.WebGLGraphics.buildRoundedRectangle = function(graphicsData, webGLData) { - var points = graphicsData.points; var x = points[0]; var y = points[1]; @@ -316,7 +316,6 @@ 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)); @@ -324,7 +323,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; @@ -368,8 +366,8 @@ }; /** - * 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 * * @static * @private @@ -383,6 +381,7 @@ * @return {Array} */ PIXI.WebGLGraphics.quadraticBezierCurve = function(fromX, fromY, cpX, cpY, toX, toY) { + var xa, ya, xb, @@ -718,13 +717,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; @@ -776,6 +774,15 @@ }; +/** + * 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; @@ -818,6 +825,11 @@ PIXI.WebGLGraphics.graphicsDataPool = []; +/** + * @class WebGLGraphicsData + * @private + * @static + */ PIXI.WebGLGraphicsData = function(gl) { this.gl = gl; @@ -834,6 +846,9 @@ this.dirty = true; }; +/** + * @method reset + */ PIXI.WebGLGraphicsData.prototype.reset = function() { this.points = []; @@ -841,6 +856,9 @@ this.lastIndex = 0; }; +/** + * @method upload + */ PIXI.WebGLGraphicsData.prototype.upload = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js index 181f560..607d5dd 100644 --- a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js @@ -5,16 +5,17 @@ /** * @class WebGLMaskManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLMaskManager = function() { - //this.setContext(gl); }; +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 */ @@ -24,10 +25,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) { @@ -44,10 +46,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) { @@ -55,9 +58,9 @@ 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() diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js index b597698..a15974e 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js @@ -5,38 +5,54 @@ /** * @class WebGLShaderManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLShaderManager = function() { - + /** + * @property maxAttibs + * @type Number + */ this.maxAttibs = 10; + + /** + * @property attribState + * @type Array + */ this.attribState = []; + + /** + * @property tempAttribState + * @type Array + */ this.tempAttribState = []; - for (var i = 0; i < this.maxAttibs; i++) { + for (var i = 0; i < this.maxAttibs; i++) + { this.attribState[i] = false; } + /** + * @property stack + * @type Array + */ this.stack = []; - - //this.setContext(gl); - // the final one is used for the rendering strips + }; +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 @@ -53,16 +69,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++) @@ -97,6 +112,12 @@ } }; +/** +* Sets the current shader. +* +* @method setShader +* @param shader {Any} +*/ PIXI.WebGLShaderManager.prototype.setShader = function(shader) { if(this._currentId === shader._UID)return false; @@ -112,7 +133,8 @@ }; /** -* Destroys +* Destroys this object. +* * @method destroy */ PIXI.WebGLShaderManager.prototype.destroy = function() @@ -133,4 +155,3 @@ this.gl = null; }; - diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js index f6cc024..995aa9b 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js @@ -2,27 +2,44 @@ * @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 +* @private +*/ PIXI.initDefaultShaders = function() { - - // PIXI.stripShader = new PIXI.StripShader(); -// PIXI.stripShader.init(); - }; +/** +* @method CompileVertexShader +* @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 +* @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 +* @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"); @@ -30,7 +47,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; } @@ -38,6 +56,13 @@ return shader; }; +/** +* @method compileProgram +* @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); @@ -49,7 +74,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"); } diff --git a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js index 4d59c80..f8a4bd7 100755 --- a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js @@ -13,15 +13,10 @@ * @class WebGLSpriteBatch * @private * @constructor - * @param gl {WebGLContext} the current WebGL drawing context - * */ PIXI.WebGLSpriteBatch = function() { - /** - * - * * @property vertSize * @type Number */ @@ -47,7 +42,6 @@ */ this.vertices = new Float32Array(numVerts); - //index data /** * Holds the indices * @@ -56,6 +50,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) @@ -68,20 +66,58 @@ 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;', @@ -94,9 +130,7 @@ }; /** -* * @method setContext -* * @param gl {WebGLContext} the current WebGL drawing context */ PIXI.WebGLSpriteBatch.prototype.setContext = function(gl) @@ -109,7 +143,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); @@ -125,15 +158,12 @@ 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) { @@ -144,9 +174,7 @@ }; /** -* * @method end -* */ PIXI.WebGLSpriteBatch.prototype.end = function() { @@ -154,16 +182,13 @@ }; /** -* * @method render -* * @param sprite {Sprite} the sprite to render when using this spritebatch */ PIXI.WebGLSpriteBatch.prototype.render = function(sprite) { var texture = sprite.texture; - //TODO set blend modes.. // check texture.. if(this.currentBatchSize >= this.size) @@ -270,9 +295,9 @@ }; /** -* 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) @@ -390,12 +415,10 @@ 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() { @@ -516,6 +539,12 @@ 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; @@ -532,7 +561,6 @@ // bind the current texture gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, size * 6, gl.UNSIGNED_SHORT, startIndex * 6 * 2); @@ -541,11 +569,8 @@ this.renderSession.drawCount++; }; - /** -* * @method stop -* */ PIXI.WebGLSpriteBatch.prototype.stop = function() { @@ -554,9 +579,7 @@ }; /** -* * @method start -* */ PIXI.WebGLSpriteBatch.prototype.start = function() { @@ -564,12 +587,12 @@ }; /** -* Destroys the SpriteBatch +* Destroys the SpriteBatch. +* * @method destroy */ PIXI.WebGLSpriteBatch.prototype.destroy = function() { - this.vertices = null; this.indices = null; diff --git a/src/pixi/renderers/webgl/utils/WebGLStencilManager.js b/src/pixi/renderers/webgl/utils/WebGLStencilManager.js index f841e6f..367d7dc 100644 --- a/src/pixi/renderers/webgl/utils/WebGLStencilManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLStencilManager.js @@ -5,21 +5,18 @@ /** * @class WebGLStencilManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ 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 */ @@ -29,10 +26,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) { @@ -60,7 +59,6 @@ if(webGLData.mode === 1) { - gl.drawElements(gl.TRIANGLE_FAN, webGLData.indices.length - 4, gl.UNSIGNED_SHORT, 0 ); if(this.reverse) @@ -119,7 +117,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; @@ -182,6 +187,12 @@ } }; +/** + * @method popStencil + * @param graphics {Graphics} + * @param webGLData {Array} + * @param renderSession {Object} + */ PIXI.WebGLStencilManager.prototype.popStencil = function(graphics, webGLData, renderSession) { var gl = this.gl; @@ -272,7 +283,8 @@ }; /** -* Destroys the mask stack +* Destroys the mask stack. +* * @method destroy */ PIXI.WebGLStencilManager.prototype.destroy = function() diff --git a/src/pixi/text/BitmapText.js b/src/pixi/text/BitmapText.js index cd84a6b..a1d20af 100644 --- a/src/pixi/text/BitmapText.js +++ b/src/pixi/text/BitmapText.js @@ -3,7 +3,7 @@ */ /** - * 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. @@ -20,11 +20,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; }; @@ -33,10 +64,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) { @@ -47,7 +78,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 @@ -82,11 +113,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); @@ -100,12 +131,14 @@ } var charData = data.chars[charCode]; + if(!charData) continue; 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; @@ -116,6 +149,7 @@ maxLineWidth = Math.max(maxLineWidth, pos.x); var lineAlignOffsets = []; + for(i = 0; i <= line; i++) { var alignOffset = 0; @@ -133,6 +167,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. @@ -156,23 +191,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; }; diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js index daa8b64..79d038a 100644 --- a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -9,7 +9,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -17,18 +23,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;', @@ -38,6 +46,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -65,14 +74,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); @@ -84,7 +94,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'); @@ -98,9 +107,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiFastShader.js b/src/pixi/renderers/webgl/shaders/PixiFastShader.js index 4fb3fe2..bb46419 100644 --- a/src/pixi/renderers/webgl/shaders/PixiFastShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiFastShader.js @@ -1,6 +1,5 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -10,6 +9,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -19,12 +23,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;', @@ -37,8 +45,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -69,24 +79,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); @@ -111,8 +122,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? @@ -128,14 +137,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiShader.js b/src/pixi/renderers/webgl/shaders/PixiShader.js index d76ec03..725dce2 100644 --- a/src/pixi/renderers/webgl/shaders/PixiShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiShader.js @@ -6,9 +6,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++; /** @@ -18,13 +24,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;', @@ -36,21 +46,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() { @@ -71,12 +104,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) { @@ -101,6 +133,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 * @@ -316,7 +349,8 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy */ PIXI.PixiShader.prototype.destroy = function() @@ -329,7 +363,8 @@ }; /** -* The Default Vertex shader source +* The Default Vertex shader source. +* * @property defaultVertexSrc * @type String */ diff --git a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js index 3a82be2..0f6854c 100644 --- a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js @@ -9,6 +9,11 @@ */ PIXI.PrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -18,11 +23,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 */ @@ -36,6 +44,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -60,14 +69,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); @@ -78,7 +88,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'); @@ -92,9 +101,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/StripShader.js b/src/pixi/renderers/webgl/shaders/StripShader.js index 11f13ad..8fefe51 100644 --- a/src/pixi/renderers/webgl/shaders/StripShader.js +++ b/src/pixi/renderers/webgl/shaders/StripShader.js @@ -2,20 +2,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;', @@ -30,9 +47,11 @@ '}' ]; - /** - * @property {array} fragmentSrc - The fragment shader. - */ + /** + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -56,10 +75,12 @@ this.init(); }; +PIXI.StripShader.prototype.constructor = PIXI.StripShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.StripShader.prototype.init = function() { @@ -88,9 +109,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.StripShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/utils/FilterTexture.js b/src/pixi/renderers/webgl/utils/FilterTexture.js index 9dada23..389acbe 100644 --- a/src/pixi/renderers/webgl/utils/FilterTexture.js +++ b/src/pixi/renderers/webgl/utils/FilterTexture.js @@ -9,7 +9,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) { @@ -19,11 +18,24 @@ */ 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); @@ -44,9 +56,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() @@ -75,14 +89,14 @@ gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width , height , 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - // console.log( width, width ) // update the stencil buffer width and height gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width , height ); }; /** -* Destroys the filter texture +* Destroys the filter texture. +* * @method destroy */ PIXI.FilterTexture.prototype.destroy = function() diff --git a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js index c73728f..3de0ec9 100644 --- a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js @@ -3,31 +3,42 @@ */ /** -* @class WebGLMaskManager +* @class WebGLBlendModeManager * @constructor * @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLBlendModeManager = function() { + /** + * @property currentBlendMode + * @type Number + */ this.currentBlendMode = 99999; }; +PIXI.WebGLBlendModeManager.prototype.constructor = PIXI.WebGLBlendModeManager; + +/** + * 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 +* 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]; @@ -36,7 +47,12 @@ return true; }; +/** +* Destroys this object. +* +* @method destroy +*/ PIXI.WebGLBlendModeManager.prototype.destroy = function() { this.gl = null; -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js index 0d08e47..0bdbbe4 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -8,27 +8,66 @@ * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java */ +/** +* @class WebGLFastSpriteBatch +* @constructor +*/ PIXI.WebGLFastSpriteBatch = function() { - - + /** + * @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) @@ -41,21 +80,58 @@ 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; @@ -66,7 +142,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); @@ -75,6 +150,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; @@ -85,15 +165,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]; @@ -119,6 +204,10 @@ this.flush(); }; +/** + * @method renderSprite + * @param sprite {Sprite} + */ PIXI.WebGLFastSpriteBatch.prototype.renderSprite = function(sprite) { //sprite = children[i]; @@ -137,7 +226,6 @@ uvs = sprite.texture._uvs; - width = sprite.texture.frame.width; height = sprite.texture.frame.height; @@ -257,9 +345,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; @@ -272,7 +362,6 @@ gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); // upload the verts to the buffer - if(this.currentBatchSize > ( this.size * 0.5 ) ) { @@ -285,7 +374,6 @@ gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, this.currentBatchSize * 6, gl.UNSIGNED_SHORT, 0); @@ -297,11 +385,17 @@ }; +/** + * @method stop + */ PIXI.WebGLFastSpriteBatch.prototype.stop = function() { this.flush(); }; +/** + * @method start + */ PIXI.WebGLFastSpriteBatch.prototype.start = function() { var gl = this.gl; @@ -329,8 +423,5 @@ 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); - }; - - diff --git a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js index 9bb9195..359a834 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js @@ -5,22 +5,33 @@ /** * @class WebGLFilterManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLFilterManager = function() { + /** + * @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 */ @@ -33,7 +44,6 @@ }; /** -* * @method begin * @param renderSession {RenderSession} * @param buffer {ArrayBuffer} @@ -44,14 +54,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 */ @@ -64,7 +74,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); @@ -126,9 +135,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() @@ -211,7 +220,6 @@ this.offsetX -= filterArea.x; this.offsetY -= filterArea.y; - var sizeX = this.width; var sizeY = this.height; @@ -239,9 +247,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; @@ -280,10 +286,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 @@ -300,9 +302,9 @@ this.applyFilterPass(filter, filterArea, sizeX, sizeY); // 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); + // 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); @@ -311,7 +313,8 @@ /** -* 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 @@ -351,7 +354,6 @@ filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; } - // console.log(this.uvArray ) shader.syncUniforms(); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); @@ -372,7 +374,8 @@ }; /** -* Initialises the shader buffers +* Initialises the shader buffers. +* * @method initShaderBuffers */ PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() @@ -385,7 +388,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, @@ -394,11 +396,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, @@ -407,10 +405,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, @@ -418,21 +413,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() diff --git a/src/pixi/renderers/webgl/utils/WebGLGraphics.js b/src/pixi/renderers/webgl/utils/WebGLGraphics.js index 4de401d..9ea5a53 100644 --- a/src/pixi/renderers/webgl/utils/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/utils/WebGLGraphics.js @@ -11,7 +11,6 @@ */ PIXI.WebGLGraphics = function() { - }; /** @@ -120,7 +119,6 @@ webGL.data = []; webGL.lastIndex = 0; } - var webGLData; @@ -131,8 +129,6 @@ { var data = graphics.graphicsData[i]; - - if(data.type === PIXI.Graphics.POLY) { // need to add the points the the graphics object.. @@ -189,7 +185,6 @@ } } - webGL.lastIndex++; } @@ -201,7 +196,13 @@ } }; - +/** + * @static + * @private + * @method switchMode + * @param webGL {WebGLContext} + * @param type {Number} + */ PIXI.WebGLGraphics.switchMode = function(webGL, type) { var webGLData; @@ -308,7 +309,6 @@ */ PIXI.WebGLGraphics.buildRoundedRectangle = function(graphicsData, webGLData) { - var points = graphicsData.points; var x = points[0]; var y = points[1]; @@ -316,7 +316,6 @@ 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)); @@ -324,7 +323,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; @@ -368,8 +366,8 @@ }; /** - * 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 * * @static * @private @@ -383,6 +381,7 @@ * @return {Array} */ PIXI.WebGLGraphics.quadraticBezierCurve = function(fromX, fromY, cpX, cpY, toX, toY) { + var xa, ya, xb, @@ -718,13 +717,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; @@ -776,6 +774,15 @@ }; +/** + * 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; @@ -818,6 +825,11 @@ PIXI.WebGLGraphics.graphicsDataPool = []; +/** + * @class WebGLGraphicsData + * @private + * @static + */ PIXI.WebGLGraphicsData = function(gl) { this.gl = gl; @@ -834,6 +846,9 @@ this.dirty = true; }; +/** + * @method reset + */ PIXI.WebGLGraphicsData.prototype.reset = function() { this.points = []; @@ -841,6 +856,9 @@ this.lastIndex = 0; }; +/** + * @method upload + */ PIXI.WebGLGraphicsData.prototype.upload = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js index 181f560..607d5dd 100644 --- a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js @@ -5,16 +5,17 @@ /** * @class WebGLMaskManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLMaskManager = function() { - //this.setContext(gl); }; +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 */ @@ -24,10 +25,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) { @@ -44,10 +46,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) { @@ -55,9 +58,9 @@ 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() diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js index b597698..a15974e 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js @@ -5,38 +5,54 @@ /** * @class WebGLShaderManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLShaderManager = function() { - + /** + * @property maxAttibs + * @type Number + */ this.maxAttibs = 10; + + /** + * @property attribState + * @type Array + */ this.attribState = []; + + /** + * @property tempAttribState + * @type Array + */ this.tempAttribState = []; - for (var i = 0; i < this.maxAttibs; i++) { + for (var i = 0; i < this.maxAttibs; i++) + { this.attribState[i] = false; } + /** + * @property stack + * @type Array + */ this.stack = []; - - //this.setContext(gl); - // the final one is used for the rendering strips + }; +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 @@ -53,16 +69,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++) @@ -97,6 +112,12 @@ } }; +/** +* Sets the current shader. +* +* @method setShader +* @param shader {Any} +*/ PIXI.WebGLShaderManager.prototype.setShader = function(shader) { if(this._currentId === shader._UID)return false; @@ -112,7 +133,8 @@ }; /** -* Destroys +* Destroys this object. +* * @method destroy */ PIXI.WebGLShaderManager.prototype.destroy = function() @@ -133,4 +155,3 @@ this.gl = null; }; - diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js index f6cc024..995aa9b 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js @@ -2,27 +2,44 @@ * @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 +* @private +*/ PIXI.initDefaultShaders = function() { - - // PIXI.stripShader = new PIXI.StripShader(); -// PIXI.stripShader.init(); - }; +/** +* @method CompileVertexShader +* @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 +* @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 +* @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"); @@ -30,7 +47,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; } @@ -38,6 +56,13 @@ return shader; }; +/** +* @method compileProgram +* @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); @@ -49,7 +74,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"); } diff --git a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js index 4d59c80..f8a4bd7 100755 --- a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js @@ -13,15 +13,10 @@ * @class WebGLSpriteBatch * @private * @constructor - * @param gl {WebGLContext} the current WebGL drawing context - * */ PIXI.WebGLSpriteBatch = function() { - /** - * - * * @property vertSize * @type Number */ @@ -47,7 +42,6 @@ */ this.vertices = new Float32Array(numVerts); - //index data /** * Holds the indices * @@ -56,6 +50,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) @@ -68,20 +66,58 @@ 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;', @@ -94,9 +130,7 @@ }; /** -* * @method setContext -* * @param gl {WebGLContext} the current WebGL drawing context */ PIXI.WebGLSpriteBatch.prototype.setContext = function(gl) @@ -109,7 +143,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); @@ -125,15 +158,12 @@ 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) { @@ -144,9 +174,7 @@ }; /** -* * @method end -* */ PIXI.WebGLSpriteBatch.prototype.end = function() { @@ -154,16 +182,13 @@ }; /** -* * @method render -* * @param sprite {Sprite} the sprite to render when using this spritebatch */ PIXI.WebGLSpriteBatch.prototype.render = function(sprite) { var texture = sprite.texture; - //TODO set blend modes.. // check texture.. if(this.currentBatchSize >= this.size) @@ -270,9 +295,9 @@ }; /** -* 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) @@ -390,12 +415,10 @@ 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() { @@ -516,6 +539,12 @@ 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; @@ -532,7 +561,6 @@ // bind the current texture gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, size * 6, gl.UNSIGNED_SHORT, startIndex * 6 * 2); @@ -541,11 +569,8 @@ this.renderSession.drawCount++; }; - /** -* * @method stop -* */ PIXI.WebGLSpriteBatch.prototype.stop = function() { @@ -554,9 +579,7 @@ }; /** -* * @method start -* */ PIXI.WebGLSpriteBatch.prototype.start = function() { @@ -564,12 +587,12 @@ }; /** -* Destroys the SpriteBatch +* Destroys the SpriteBatch. +* * @method destroy */ PIXI.WebGLSpriteBatch.prototype.destroy = function() { - this.vertices = null; this.indices = null; diff --git a/src/pixi/renderers/webgl/utils/WebGLStencilManager.js b/src/pixi/renderers/webgl/utils/WebGLStencilManager.js index f841e6f..367d7dc 100644 --- a/src/pixi/renderers/webgl/utils/WebGLStencilManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLStencilManager.js @@ -5,21 +5,18 @@ /** * @class WebGLStencilManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ 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 */ @@ -29,10 +26,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) { @@ -60,7 +59,6 @@ if(webGLData.mode === 1) { - gl.drawElements(gl.TRIANGLE_FAN, webGLData.indices.length - 4, gl.UNSIGNED_SHORT, 0 ); if(this.reverse) @@ -119,7 +117,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; @@ -182,6 +187,12 @@ } }; +/** + * @method popStencil + * @param graphics {Graphics} + * @param webGLData {Array} + * @param renderSession {Object} + */ PIXI.WebGLStencilManager.prototype.popStencil = function(graphics, webGLData, renderSession) { var gl = this.gl; @@ -272,7 +283,8 @@ }; /** -* Destroys the mask stack +* Destroys the mask stack. +* * @method destroy */ PIXI.WebGLStencilManager.prototype.destroy = function() diff --git a/src/pixi/text/BitmapText.js b/src/pixi/text/BitmapText.js index cd84a6b..a1d20af 100644 --- a/src/pixi/text/BitmapText.js +++ b/src/pixi/text/BitmapText.js @@ -3,7 +3,7 @@ */ /** - * 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. @@ -20,11 +20,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; }; @@ -33,10 +64,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) { @@ -47,7 +78,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 @@ -82,11 +113,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); @@ -100,12 +131,14 @@ } var charData = data.chars[charCode]; + if(!charData) continue; 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; @@ -116,6 +149,7 @@ maxLineWidth = Math.max(maxLineWidth, pos.x); var lineAlignOffsets = []; + for(i = 0; i <= line; i++) { var alignOffset = 0; @@ -133,6 +167,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. @@ -156,23 +191,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; }; diff --git a/src/pixi/text/Text.js b/src/pixi/text/Text.js index ba05f6e..e25f082 100644 --- a/src/pixi/text/Text.js +++ b/src/pixi/text/Text.js @@ -1,12 +1,11 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * - Modified by Tom Slezakowski http://www.tomslezakowski.com @TomSlezakowski (24/03/2014) - Added dropShadowColor. + * Modified by Tom Slezakowski http://www.tomslezakowski.com @TomSlezakowski (24/03/2014) - Added dropShadowColor. */ /** - * A Text Object will create a line(s) of text. To split a line you can use '\n' - * or add a wordWrap property set to true and and wordWrapWidth property with a value - * in the style object + * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string, + * or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object. * * @class Text * @extends Sprite @@ -38,29 +37,30 @@ /** * The canvas 2d context that everything is drawn with * @property context - * @type HTMLCanvasElement 2d Context + * @type HTMLCanvasElement */ this.context = this.canvas.getContext('2d'); - + /** + * The resolution of the canvas. + * @property resolution + * @type Number + */ this.resolution = 1; - PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); this.setText(text); this.setStyle(style); - }; // constructor PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); PIXI.Text.prototype.constructor = PIXI.Text; - /** - * The width of the sprite, setting this will actually modify the scale to achieve the value set + * The width of the Text, setting this will actually modify the scale to achieve the value set * * @property width * @type Number @@ -107,7 +107,6 @@ } }); - /** * Set the style of the text * @@ -146,16 +145,15 @@ }; /** - * Set the copy for the text object. To split a line you can use '\n' + * Set the copy for the text object. To split a line you can use '\n'. * * @method setText - * @param {String} text The copy that you would like the text to display + * @param text {String} The copy that you would like the text to display */ PIXI.Text.prototype.setText = function(text) { this.text = text.toString() || ' '; this.dirty = true; - }; /** @@ -213,7 +211,6 @@ var linePositionX; var linePositionY; - if(this.style.dropShadow) { this.context.fillStyle = this.style.dropShadowColor; @@ -275,7 +272,6 @@ // if(dropShadow) } - this.updateTexture(); }; @@ -297,7 +293,6 @@ // update the dirty base textures this.texture.baseTexture.dirty(); - }; /** @@ -315,18 +310,15 @@ this.updateText(); this.dirty = false; - - } PIXI.Sprite.prototype._renderWebGL.call(this, renderSession); }; - /** -* Renders the object using the WebGL renderer +* Renders the object using the Canvas renderer * -* @method _renderWebGL +* @method _renderCanvas * @param renderSession {RenderSession} * @private */ @@ -344,9 +336,9 @@ }; /* - * http://stackoverflow.com/users/34441/ellisbben - * great solution to the problem! - * returns the height of the given font + * Determine the font height. Based on http://stackoverflow.com/users/34441/ellisbben - a great solution to the problem! + * Returns the height of the given font. + * Warning: This creates DOM elements each time it is called. * * @method determineFontHeight * @param fontStyle {Object} @@ -425,7 +417,7 @@ }; /** - * Destroys this text object + * Destroys this text object. * * @method destroy * @param destroyBaseTexture {Boolean} whether to destroy the base texture as well diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js index daa8b64..79d038a 100644 --- a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -9,7 +9,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -17,18 +23,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;', @@ -38,6 +46,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -65,14 +74,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); @@ -84,7 +94,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'); @@ -98,9 +107,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiFastShader.js b/src/pixi/renderers/webgl/shaders/PixiFastShader.js index 4fb3fe2..bb46419 100644 --- a/src/pixi/renderers/webgl/shaders/PixiFastShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiFastShader.js @@ -1,6 +1,5 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -10,6 +9,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -19,12 +23,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;', @@ -37,8 +45,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -69,24 +79,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); @@ -111,8 +122,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? @@ -128,14 +137,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiShader.js b/src/pixi/renderers/webgl/shaders/PixiShader.js index d76ec03..725dce2 100644 --- a/src/pixi/renderers/webgl/shaders/PixiShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiShader.js @@ -6,9 +6,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++; /** @@ -18,13 +24,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;', @@ -36,21 +46,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() { @@ -71,12 +104,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) { @@ -101,6 +133,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 * @@ -316,7 +349,8 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy */ PIXI.PixiShader.prototype.destroy = function() @@ -329,7 +363,8 @@ }; /** -* The Default Vertex shader source +* The Default Vertex shader source. +* * @property defaultVertexSrc * @type String */ diff --git a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js index 3a82be2..0f6854c 100644 --- a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js @@ -9,6 +9,11 @@ */ PIXI.PrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -18,11 +23,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 */ @@ -36,6 +44,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -60,14 +69,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); @@ -78,7 +88,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'); @@ -92,9 +101,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/StripShader.js b/src/pixi/renderers/webgl/shaders/StripShader.js index 11f13ad..8fefe51 100644 --- a/src/pixi/renderers/webgl/shaders/StripShader.js +++ b/src/pixi/renderers/webgl/shaders/StripShader.js @@ -2,20 +2,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;', @@ -30,9 +47,11 @@ '}' ]; - /** - * @property {array} fragmentSrc - The fragment shader. - */ + /** + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -56,10 +75,12 @@ this.init(); }; +PIXI.StripShader.prototype.constructor = PIXI.StripShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.StripShader.prototype.init = function() { @@ -88,9 +109,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.StripShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/utils/FilterTexture.js b/src/pixi/renderers/webgl/utils/FilterTexture.js index 9dada23..389acbe 100644 --- a/src/pixi/renderers/webgl/utils/FilterTexture.js +++ b/src/pixi/renderers/webgl/utils/FilterTexture.js @@ -9,7 +9,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) { @@ -19,11 +18,24 @@ */ 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); @@ -44,9 +56,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() @@ -75,14 +89,14 @@ gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width , height , 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - // console.log( width, width ) // update the stencil buffer width and height gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width , height ); }; /** -* Destroys the filter texture +* Destroys the filter texture. +* * @method destroy */ PIXI.FilterTexture.prototype.destroy = function() diff --git a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js index c73728f..3de0ec9 100644 --- a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js @@ -3,31 +3,42 @@ */ /** -* @class WebGLMaskManager +* @class WebGLBlendModeManager * @constructor * @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLBlendModeManager = function() { + /** + * @property currentBlendMode + * @type Number + */ this.currentBlendMode = 99999; }; +PIXI.WebGLBlendModeManager.prototype.constructor = PIXI.WebGLBlendModeManager; + +/** + * 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 +* 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]; @@ -36,7 +47,12 @@ return true; }; +/** +* Destroys this object. +* +* @method destroy +*/ PIXI.WebGLBlendModeManager.prototype.destroy = function() { this.gl = null; -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js index 0d08e47..0bdbbe4 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -8,27 +8,66 @@ * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java */ +/** +* @class WebGLFastSpriteBatch +* @constructor +*/ PIXI.WebGLFastSpriteBatch = function() { - - + /** + * @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) @@ -41,21 +80,58 @@ 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; @@ -66,7 +142,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); @@ -75,6 +150,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; @@ -85,15 +165,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]; @@ -119,6 +204,10 @@ this.flush(); }; +/** + * @method renderSprite + * @param sprite {Sprite} + */ PIXI.WebGLFastSpriteBatch.prototype.renderSprite = function(sprite) { //sprite = children[i]; @@ -137,7 +226,6 @@ uvs = sprite.texture._uvs; - width = sprite.texture.frame.width; height = sprite.texture.frame.height; @@ -257,9 +345,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; @@ -272,7 +362,6 @@ gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); // upload the verts to the buffer - if(this.currentBatchSize > ( this.size * 0.5 ) ) { @@ -285,7 +374,6 @@ gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, this.currentBatchSize * 6, gl.UNSIGNED_SHORT, 0); @@ -297,11 +385,17 @@ }; +/** + * @method stop + */ PIXI.WebGLFastSpriteBatch.prototype.stop = function() { this.flush(); }; +/** + * @method start + */ PIXI.WebGLFastSpriteBatch.prototype.start = function() { var gl = this.gl; @@ -329,8 +423,5 @@ 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); - }; - - diff --git a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js index 9bb9195..359a834 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js @@ -5,22 +5,33 @@ /** * @class WebGLFilterManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLFilterManager = function() { + /** + * @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 */ @@ -33,7 +44,6 @@ }; /** -* * @method begin * @param renderSession {RenderSession} * @param buffer {ArrayBuffer} @@ -44,14 +54,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 */ @@ -64,7 +74,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); @@ -126,9 +135,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() @@ -211,7 +220,6 @@ this.offsetX -= filterArea.x; this.offsetY -= filterArea.y; - var sizeX = this.width; var sizeY = this.height; @@ -239,9 +247,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; @@ -280,10 +286,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 @@ -300,9 +302,9 @@ this.applyFilterPass(filter, filterArea, sizeX, sizeY); // 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); + // 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); @@ -311,7 +313,8 @@ /** -* 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 @@ -351,7 +354,6 @@ filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; } - // console.log(this.uvArray ) shader.syncUniforms(); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); @@ -372,7 +374,8 @@ }; /** -* Initialises the shader buffers +* Initialises the shader buffers. +* * @method initShaderBuffers */ PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() @@ -385,7 +388,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, @@ -394,11 +396,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, @@ -407,10 +405,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, @@ -418,21 +413,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() diff --git a/src/pixi/renderers/webgl/utils/WebGLGraphics.js b/src/pixi/renderers/webgl/utils/WebGLGraphics.js index 4de401d..9ea5a53 100644 --- a/src/pixi/renderers/webgl/utils/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/utils/WebGLGraphics.js @@ -11,7 +11,6 @@ */ PIXI.WebGLGraphics = function() { - }; /** @@ -120,7 +119,6 @@ webGL.data = []; webGL.lastIndex = 0; } - var webGLData; @@ -131,8 +129,6 @@ { var data = graphics.graphicsData[i]; - - if(data.type === PIXI.Graphics.POLY) { // need to add the points the the graphics object.. @@ -189,7 +185,6 @@ } } - webGL.lastIndex++; } @@ -201,7 +196,13 @@ } }; - +/** + * @static + * @private + * @method switchMode + * @param webGL {WebGLContext} + * @param type {Number} + */ PIXI.WebGLGraphics.switchMode = function(webGL, type) { var webGLData; @@ -308,7 +309,6 @@ */ PIXI.WebGLGraphics.buildRoundedRectangle = function(graphicsData, webGLData) { - var points = graphicsData.points; var x = points[0]; var y = points[1]; @@ -316,7 +316,6 @@ 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)); @@ -324,7 +323,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; @@ -368,8 +366,8 @@ }; /** - * 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 * * @static * @private @@ -383,6 +381,7 @@ * @return {Array} */ PIXI.WebGLGraphics.quadraticBezierCurve = function(fromX, fromY, cpX, cpY, toX, toY) { + var xa, ya, xb, @@ -718,13 +717,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; @@ -776,6 +774,15 @@ }; +/** + * 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; @@ -818,6 +825,11 @@ PIXI.WebGLGraphics.graphicsDataPool = []; +/** + * @class WebGLGraphicsData + * @private + * @static + */ PIXI.WebGLGraphicsData = function(gl) { this.gl = gl; @@ -834,6 +846,9 @@ this.dirty = true; }; +/** + * @method reset + */ PIXI.WebGLGraphicsData.prototype.reset = function() { this.points = []; @@ -841,6 +856,9 @@ this.lastIndex = 0; }; +/** + * @method upload + */ PIXI.WebGLGraphicsData.prototype.upload = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js index 181f560..607d5dd 100644 --- a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js @@ -5,16 +5,17 @@ /** * @class WebGLMaskManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLMaskManager = function() { - //this.setContext(gl); }; +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 */ @@ -24,10 +25,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) { @@ -44,10 +46,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) { @@ -55,9 +58,9 @@ 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() diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js index b597698..a15974e 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js @@ -5,38 +5,54 @@ /** * @class WebGLShaderManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLShaderManager = function() { - + /** + * @property maxAttibs + * @type Number + */ this.maxAttibs = 10; + + /** + * @property attribState + * @type Array + */ this.attribState = []; + + /** + * @property tempAttribState + * @type Array + */ this.tempAttribState = []; - for (var i = 0; i < this.maxAttibs; i++) { + for (var i = 0; i < this.maxAttibs; i++) + { this.attribState[i] = false; } + /** + * @property stack + * @type Array + */ this.stack = []; - - //this.setContext(gl); - // the final one is used for the rendering strips + }; +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 @@ -53,16 +69,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++) @@ -97,6 +112,12 @@ } }; +/** +* Sets the current shader. +* +* @method setShader +* @param shader {Any} +*/ PIXI.WebGLShaderManager.prototype.setShader = function(shader) { if(this._currentId === shader._UID)return false; @@ -112,7 +133,8 @@ }; /** -* Destroys +* Destroys this object. +* * @method destroy */ PIXI.WebGLShaderManager.prototype.destroy = function() @@ -133,4 +155,3 @@ this.gl = null; }; - diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js index f6cc024..995aa9b 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js @@ -2,27 +2,44 @@ * @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 +* @private +*/ PIXI.initDefaultShaders = function() { - - // PIXI.stripShader = new PIXI.StripShader(); -// PIXI.stripShader.init(); - }; +/** +* @method CompileVertexShader +* @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 +* @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 +* @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"); @@ -30,7 +47,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; } @@ -38,6 +56,13 @@ return shader; }; +/** +* @method compileProgram +* @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); @@ -49,7 +74,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"); } diff --git a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js index 4d59c80..f8a4bd7 100755 --- a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js @@ -13,15 +13,10 @@ * @class WebGLSpriteBatch * @private * @constructor - * @param gl {WebGLContext} the current WebGL drawing context - * */ PIXI.WebGLSpriteBatch = function() { - /** - * - * * @property vertSize * @type Number */ @@ -47,7 +42,6 @@ */ this.vertices = new Float32Array(numVerts); - //index data /** * Holds the indices * @@ -56,6 +50,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) @@ -68,20 +66,58 @@ 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;', @@ -94,9 +130,7 @@ }; /** -* * @method setContext -* * @param gl {WebGLContext} the current WebGL drawing context */ PIXI.WebGLSpriteBatch.prototype.setContext = function(gl) @@ -109,7 +143,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); @@ -125,15 +158,12 @@ 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) { @@ -144,9 +174,7 @@ }; /** -* * @method end -* */ PIXI.WebGLSpriteBatch.prototype.end = function() { @@ -154,16 +182,13 @@ }; /** -* * @method render -* * @param sprite {Sprite} the sprite to render when using this spritebatch */ PIXI.WebGLSpriteBatch.prototype.render = function(sprite) { var texture = sprite.texture; - //TODO set blend modes.. // check texture.. if(this.currentBatchSize >= this.size) @@ -270,9 +295,9 @@ }; /** -* 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) @@ -390,12 +415,10 @@ 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() { @@ -516,6 +539,12 @@ 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; @@ -532,7 +561,6 @@ // bind the current texture gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, size * 6, gl.UNSIGNED_SHORT, startIndex * 6 * 2); @@ -541,11 +569,8 @@ this.renderSession.drawCount++; }; - /** -* * @method stop -* */ PIXI.WebGLSpriteBatch.prototype.stop = function() { @@ -554,9 +579,7 @@ }; /** -* * @method start -* */ PIXI.WebGLSpriteBatch.prototype.start = function() { @@ -564,12 +587,12 @@ }; /** -* Destroys the SpriteBatch +* Destroys the SpriteBatch. +* * @method destroy */ PIXI.WebGLSpriteBatch.prototype.destroy = function() { - this.vertices = null; this.indices = null; diff --git a/src/pixi/renderers/webgl/utils/WebGLStencilManager.js b/src/pixi/renderers/webgl/utils/WebGLStencilManager.js index f841e6f..367d7dc 100644 --- a/src/pixi/renderers/webgl/utils/WebGLStencilManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLStencilManager.js @@ -5,21 +5,18 @@ /** * @class WebGLStencilManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ 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 */ @@ -29,10 +26,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) { @@ -60,7 +59,6 @@ if(webGLData.mode === 1) { - gl.drawElements(gl.TRIANGLE_FAN, webGLData.indices.length - 4, gl.UNSIGNED_SHORT, 0 ); if(this.reverse) @@ -119,7 +117,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; @@ -182,6 +187,12 @@ } }; +/** + * @method popStencil + * @param graphics {Graphics} + * @param webGLData {Array} + * @param renderSession {Object} + */ PIXI.WebGLStencilManager.prototype.popStencil = function(graphics, webGLData, renderSession) { var gl = this.gl; @@ -272,7 +283,8 @@ }; /** -* Destroys the mask stack +* Destroys the mask stack. +* * @method destroy */ PIXI.WebGLStencilManager.prototype.destroy = function() diff --git a/src/pixi/text/BitmapText.js b/src/pixi/text/BitmapText.js index cd84a6b..a1d20af 100644 --- a/src/pixi/text/BitmapText.js +++ b/src/pixi/text/BitmapText.js @@ -3,7 +3,7 @@ */ /** - * 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. @@ -20,11 +20,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; }; @@ -33,10 +64,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) { @@ -47,7 +78,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 @@ -82,11 +113,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); @@ -100,12 +131,14 @@ } var charData = data.chars[charCode]; + if(!charData) continue; 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; @@ -116,6 +149,7 @@ maxLineWidth = Math.max(maxLineWidth, pos.x); var lineAlignOffsets = []; + for(i = 0; i <= line; i++) { var alignOffset = 0; @@ -133,6 +167,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. @@ -156,23 +191,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; }; diff --git a/src/pixi/text/Text.js b/src/pixi/text/Text.js index ba05f6e..e25f082 100644 --- a/src/pixi/text/Text.js +++ b/src/pixi/text/Text.js @@ -1,12 +1,11 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * - Modified by Tom Slezakowski http://www.tomslezakowski.com @TomSlezakowski (24/03/2014) - Added dropShadowColor. + * Modified by Tom Slezakowski http://www.tomslezakowski.com @TomSlezakowski (24/03/2014) - Added dropShadowColor. */ /** - * A Text Object will create a line(s) of text. To split a line you can use '\n' - * or add a wordWrap property set to true and and wordWrapWidth property with a value - * in the style object + * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string, + * or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object. * * @class Text * @extends Sprite @@ -38,29 +37,30 @@ /** * The canvas 2d context that everything is drawn with * @property context - * @type HTMLCanvasElement 2d Context + * @type HTMLCanvasElement */ this.context = this.canvas.getContext('2d'); - + /** + * The resolution of the canvas. + * @property resolution + * @type Number + */ this.resolution = 1; - PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); this.setText(text); this.setStyle(style); - }; // constructor PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); PIXI.Text.prototype.constructor = PIXI.Text; - /** - * The width of the sprite, setting this will actually modify the scale to achieve the value set + * The width of the Text, setting this will actually modify the scale to achieve the value set * * @property width * @type Number @@ -107,7 +107,6 @@ } }); - /** * Set the style of the text * @@ -146,16 +145,15 @@ }; /** - * Set the copy for the text object. To split a line you can use '\n' + * Set the copy for the text object. To split a line you can use '\n'. * * @method setText - * @param {String} text The copy that you would like the text to display + * @param text {String} The copy that you would like the text to display */ PIXI.Text.prototype.setText = function(text) { this.text = text.toString() || ' '; this.dirty = true; - }; /** @@ -213,7 +211,6 @@ var linePositionX; var linePositionY; - if(this.style.dropShadow) { this.context.fillStyle = this.style.dropShadowColor; @@ -275,7 +272,6 @@ // if(dropShadow) } - this.updateTexture(); }; @@ -297,7 +293,6 @@ // update the dirty base textures this.texture.baseTexture.dirty(); - }; /** @@ -315,18 +310,15 @@ this.updateText(); this.dirty = false; - - } PIXI.Sprite.prototype._renderWebGL.call(this, renderSession); }; - /** -* Renders the object using the WebGL renderer +* Renders the object using the Canvas renderer * -* @method _renderWebGL +* @method _renderCanvas * @param renderSession {RenderSession} * @private */ @@ -344,9 +336,9 @@ }; /* - * http://stackoverflow.com/users/34441/ellisbben - * great solution to the problem! - * returns the height of the given font + * Determine the font height. Based on http://stackoverflow.com/users/34441/ellisbben - a great solution to the problem! + * Returns the height of the given font. + * Warning: This creates DOM elements each time it is called. * * @method determineFontHeight * @param fontStyle {Object} @@ -425,7 +417,7 @@ }; /** - * Destroys this text object + * Destroys this text object. * * @method destroy * @param destroyBaseTexture {Boolean} whether to destroy the base texture as well diff --git a/src/pixi/textures/BaseTexture.js b/src/pixi/textures/BaseTexture.js index 71763c6..4535f3e 100644 --- a/src/pixi/textures/BaseTexture.js +++ b/src/pixi/textures/BaseTexture.js @@ -7,7 +7,7 @@ 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 @@ -45,6 +45,7 @@ /** * The scale mode to apply when scaling this texture + * * @property scaleMode * @type PIXI.scaleModes * @default PIXI.scaleModes.LINEAR @@ -52,7 +53,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 @@ -61,34 +62,42 @@ 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._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 texture updating... // TODO - this needs to be addressed - this._dirty = [true, true, true, true]; + /** + * @property _dirty + * @type Array + * @private + */ + this._dirty = [true, true, true, true]; if(!source)return; @@ -101,8 +110,8 @@ } else { - var scope = this; + this.source.onload = function() { scope.hasLoaded = true; @@ -114,19 +123,29 @@ // 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; + + /** + * @property _powerOf2 + * @type Boolean + * @private + */ this._powerOf2 = false; - - }; PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture; + PIXI.EventTarget.mixin(PIXI.BaseTexture.prototype); /** @@ -177,6 +196,11 @@ this.source.src = newSrc; }; +/** + * Sets all glTextures to be dirty. + * + * @method dirty + */ PIXI.BaseTexture.prototype.dirty = function() { for (var i = 0; i < this._glTextures.length; i++) @@ -186,8 +210,8 @@ }; /** - * 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 + * 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 @@ -204,7 +228,6 @@ if(!baseTexture) { - // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 var image = new Image();//document.createElement('img'); @@ -229,8 +252,7 @@ }; /** - * 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 @@ -255,5 +277,3 @@ return baseTexture; }; - - diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js index daa8b64..79d038a 100644 --- a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -9,7 +9,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -17,18 +23,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;', @@ -38,6 +46,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -65,14 +74,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); @@ -84,7 +94,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'); @@ -98,9 +107,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiFastShader.js b/src/pixi/renderers/webgl/shaders/PixiFastShader.js index 4fb3fe2..bb46419 100644 --- a/src/pixi/renderers/webgl/shaders/PixiFastShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiFastShader.js @@ -1,6 +1,5 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -10,6 +9,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -19,12 +23,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;', @@ -37,8 +45,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -69,24 +79,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); @@ -111,8 +122,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? @@ -128,14 +137,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiShader.js b/src/pixi/renderers/webgl/shaders/PixiShader.js index d76ec03..725dce2 100644 --- a/src/pixi/renderers/webgl/shaders/PixiShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiShader.js @@ -6,9 +6,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++; /** @@ -18,13 +24,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;', @@ -36,21 +46,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() { @@ -71,12 +104,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) { @@ -101,6 +133,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 * @@ -316,7 +349,8 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy */ PIXI.PixiShader.prototype.destroy = function() @@ -329,7 +363,8 @@ }; /** -* The Default Vertex shader source +* The Default Vertex shader source. +* * @property defaultVertexSrc * @type String */ diff --git a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js index 3a82be2..0f6854c 100644 --- a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js @@ -9,6 +9,11 @@ */ PIXI.PrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -18,11 +23,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 */ @@ -36,6 +44,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -60,14 +69,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); @@ -78,7 +88,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'); @@ -92,9 +101,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/StripShader.js b/src/pixi/renderers/webgl/shaders/StripShader.js index 11f13ad..8fefe51 100644 --- a/src/pixi/renderers/webgl/shaders/StripShader.js +++ b/src/pixi/renderers/webgl/shaders/StripShader.js @@ -2,20 +2,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;', @@ -30,9 +47,11 @@ '}' ]; - /** - * @property {array} fragmentSrc - The fragment shader. - */ + /** + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -56,10 +75,12 @@ this.init(); }; +PIXI.StripShader.prototype.constructor = PIXI.StripShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.StripShader.prototype.init = function() { @@ -88,9 +109,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.StripShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/utils/FilterTexture.js b/src/pixi/renderers/webgl/utils/FilterTexture.js index 9dada23..389acbe 100644 --- a/src/pixi/renderers/webgl/utils/FilterTexture.js +++ b/src/pixi/renderers/webgl/utils/FilterTexture.js @@ -9,7 +9,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) { @@ -19,11 +18,24 @@ */ 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); @@ -44,9 +56,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() @@ -75,14 +89,14 @@ gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width , height , 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - // console.log( width, width ) // update the stencil buffer width and height gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width , height ); }; /** -* Destroys the filter texture +* Destroys the filter texture. +* * @method destroy */ PIXI.FilterTexture.prototype.destroy = function() diff --git a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js index c73728f..3de0ec9 100644 --- a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js @@ -3,31 +3,42 @@ */ /** -* @class WebGLMaskManager +* @class WebGLBlendModeManager * @constructor * @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLBlendModeManager = function() { + /** + * @property currentBlendMode + * @type Number + */ this.currentBlendMode = 99999; }; +PIXI.WebGLBlendModeManager.prototype.constructor = PIXI.WebGLBlendModeManager; + +/** + * 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 +* 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]; @@ -36,7 +47,12 @@ return true; }; +/** +* Destroys this object. +* +* @method destroy +*/ PIXI.WebGLBlendModeManager.prototype.destroy = function() { this.gl = null; -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js index 0d08e47..0bdbbe4 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -8,27 +8,66 @@ * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java */ +/** +* @class WebGLFastSpriteBatch +* @constructor +*/ PIXI.WebGLFastSpriteBatch = function() { - - + /** + * @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) @@ -41,21 +80,58 @@ 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; @@ -66,7 +142,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); @@ -75,6 +150,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; @@ -85,15 +165,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]; @@ -119,6 +204,10 @@ this.flush(); }; +/** + * @method renderSprite + * @param sprite {Sprite} + */ PIXI.WebGLFastSpriteBatch.prototype.renderSprite = function(sprite) { //sprite = children[i]; @@ -137,7 +226,6 @@ uvs = sprite.texture._uvs; - width = sprite.texture.frame.width; height = sprite.texture.frame.height; @@ -257,9 +345,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; @@ -272,7 +362,6 @@ gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); // upload the verts to the buffer - if(this.currentBatchSize > ( this.size * 0.5 ) ) { @@ -285,7 +374,6 @@ gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, this.currentBatchSize * 6, gl.UNSIGNED_SHORT, 0); @@ -297,11 +385,17 @@ }; +/** + * @method stop + */ PIXI.WebGLFastSpriteBatch.prototype.stop = function() { this.flush(); }; +/** + * @method start + */ PIXI.WebGLFastSpriteBatch.prototype.start = function() { var gl = this.gl; @@ -329,8 +423,5 @@ 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); - }; - - diff --git a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js index 9bb9195..359a834 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js @@ -5,22 +5,33 @@ /** * @class WebGLFilterManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLFilterManager = function() { + /** + * @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 */ @@ -33,7 +44,6 @@ }; /** -* * @method begin * @param renderSession {RenderSession} * @param buffer {ArrayBuffer} @@ -44,14 +54,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 */ @@ -64,7 +74,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); @@ -126,9 +135,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() @@ -211,7 +220,6 @@ this.offsetX -= filterArea.x; this.offsetY -= filterArea.y; - var sizeX = this.width; var sizeY = this.height; @@ -239,9 +247,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; @@ -280,10 +286,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 @@ -300,9 +302,9 @@ this.applyFilterPass(filter, filterArea, sizeX, sizeY); // 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); + // 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); @@ -311,7 +313,8 @@ /** -* 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 @@ -351,7 +354,6 @@ filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; } - // console.log(this.uvArray ) shader.syncUniforms(); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); @@ -372,7 +374,8 @@ }; /** -* Initialises the shader buffers +* Initialises the shader buffers. +* * @method initShaderBuffers */ PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() @@ -385,7 +388,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, @@ -394,11 +396,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, @@ -407,10 +405,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, @@ -418,21 +413,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() diff --git a/src/pixi/renderers/webgl/utils/WebGLGraphics.js b/src/pixi/renderers/webgl/utils/WebGLGraphics.js index 4de401d..9ea5a53 100644 --- a/src/pixi/renderers/webgl/utils/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/utils/WebGLGraphics.js @@ -11,7 +11,6 @@ */ PIXI.WebGLGraphics = function() { - }; /** @@ -120,7 +119,6 @@ webGL.data = []; webGL.lastIndex = 0; } - var webGLData; @@ -131,8 +129,6 @@ { var data = graphics.graphicsData[i]; - - if(data.type === PIXI.Graphics.POLY) { // need to add the points the the graphics object.. @@ -189,7 +185,6 @@ } } - webGL.lastIndex++; } @@ -201,7 +196,13 @@ } }; - +/** + * @static + * @private + * @method switchMode + * @param webGL {WebGLContext} + * @param type {Number} + */ PIXI.WebGLGraphics.switchMode = function(webGL, type) { var webGLData; @@ -308,7 +309,6 @@ */ PIXI.WebGLGraphics.buildRoundedRectangle = function(graphicsData, webGLData) { - var points = graphicsData.points; var x = points[0]; var y = points[1]; @@ -316,7 +316,6 @@ 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)); @@ -324,7 +323,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; @@ -368,8 +366,8 @@ }; /** - * 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 * * @static * @private @@ -383,6 +381,7 @@ * @return {Array} */ PIXI.WebGLGraphics.quadraticBezierCurve = function(fromX, fromY, cpX, cpY, toX, toY) { + var xa, ya, xb, @@ -718,13 +717,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; @@ -776,6 +774,15 @@ }; +/** + * 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; @@ -818,6 +825,11 @@ PIXI.WebGLGraphics.graphicsDataPool = []; +/** + * @class WebGLGraphicsData + * @private + * @static + */ PIXI.WebGLGraphicsData = function(gl) { this.gl = gl; @@ -834,6 +846,9 @@ this.dirty = true; }; +/** + * @method reset + */ PIXI.WebGLGraphicsData.prototype.reset = function() { this.points = []; @@ -841,6 +856,9 @@ this.lastIndex = 0; }; +/** + * @method upload + */ PIXI.WebGLGraphicsData.prototype.upload = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js index 181f560..607d5dd 100644 --- a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js @@ -5,16 +5,17 @@ /** * @class WebGLMaskManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLMaskManager = function() { - //this.setContext(gl); }; +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 */ @@ -24,10 +25,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) { @@ -44,10 +46,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) { @@ -55,9 +58,9 @@ 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() diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js index b597698..a15974e 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js @@ -5,38 +5,54 @@ /** * @class WebGLShaderManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLShaderManager = function() { - + /** + * @property maxAttibs + * @type Number + */ this.maxAttibs = 10; + + /** + * @property attribState + * @type Array + */ this.attribState = []; + + /** + * @property tempAttribState + * @type Array + */ this.tempAttribState = []; - for (var i = 0; i < this.maxAttibs; i++) { + for (var i = 0; i < this.maxAttibs; i++) + { this.attribState[i] = false; } + /** + * @property stack + * @type Array + */ this.stack = []; - - //this.setContext(gl); - // the final one is used for the rendering strips + }; +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 @@ -53,16 +69,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++) @@ -97,6 +112,12 @@ } }; +/** +* Sets the current shader. +* +* @method setShader +* @param shader {Any} +*/ PIXI.WebGLShaderManager.prototype.setShader = function(shader) { if(this._currentId === shader._UID)return false; @@ -112,7 +133,8 @@ }; /** -* Destroys +* Destroys this object. +* * @method destroy */ PIXI.WebGLShaderManager.prototype.destroy = function() @@ -133,4 +155,3 @@ this.gl = null; }; - diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js index f6cc024..995aa9b 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js @@ -2,27 +2,44 @@ * @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 +* @private +*/ PIXI.initDefaultShaders = function() { - - // PIXI.stripShader = new PIXI.StripShader(); -// PIXI.stripShader.init(); - }; +/** +* @method CompileVertexShader +* @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 +* @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 +* @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"); @@ -30,7 +47,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; } @@ -38,6 +56,13 @@ return shader; }; +/** +* @method compileProgram +* @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); @@ -49,7 +74,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"); } diff --git a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js index 4d59c80..f8a4bd7 100755 --- a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js @@ -13,15 +13,10 @@ * @class WebGLSpriteBatch * @private * @constructor - * @param gl {WebGLContext} the current WebGL drawing context - * */ PIXI.WebGLSpriteBatch = function() { - /** - * - * * @property vertSize * @type Number */ @@ -47,7 +42,6 @@ */ this.vertices = new Float32Array(numVerts); - //index data /** * Holds the indices * @@ -56,6 +50,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) @@ -68,20 +66,58 @@ 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;', @@ -94,9 +130,7 @@ }; /** -* * @method setContext -* * @param gl {WebGLContext} the current WebGL drawing context */ PIXI.WebGLSpriteBatch.prototype.setContext = function(gl) @@ -109,7 +143,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); @@ -125,15 +158,12 @@ 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) { @@ -144,9 +174,7 @@ }; /** -* * @method end -* */ PIXI.WebGLSpriteBatch.prototype.end = function() { @@ -154,16 +182,13 @@ }; /** -* * @method render -* * @param sprite {Sprite} the sprite to render when using this spritebatch */ PIXI.WebGLSpriteBatch.prototype.render = function(sprite) { var texture = sprite.texture; - //TODO set blend modes.. // check texture.. if(this.currentBatchSize >= this.size) @@ -270,9 +295,9 @@ }; /** -* 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) @@ -390,12 +415,10 @@ 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() { @@ -516,6 +539,12 @@ 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; @@ -532,7 +561,6 @@ // bind the current texture gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, size * 6, gl.UNSIGNED_SHORT, startIndex * 6 * 2); @@ -541,11 +569,8 @@ this.renderSession.drawCount++; }; - /** -* * @method stop -* */ PIXI.WebGLSpriteBatch.prototype.stop = function() { @@ -554,9 +579,7 @@ }; /** -* * @method start -* */ PIXI.WebGLSpriteBatch.prototype.start = function() { @@ -564,12 +587,12 @@ }; /** -* Destroys the SpriteBatch +* Destroys the SpriteBatch. +* * @method destroy */ PIXI.WebGLSpriteBatch.prototype.destroy = function() { - this.vertices = null; this.indices = null; diff --git a/src/pixi/renderers/webgl/utils/WebGLStencilManager.js b/src/pixi/renderers/webgl/utils/WebGLStencilManager.js index f841e6f..367d7dc 100644 --- a/src/pixi/renderers/webgl/utils/WebGLStencilManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLStencilManager.js @@ -5,21 +5,18 @@ /** * @class WebGLStencilManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ 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 */ @@ -29,10 +26,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) { @@ -60,7 +59,6 @@ if(webGLData.mode === 1) { - gl.drawElements(gl.TRIANGLE_FAN, webGLData.indices.length - 4, gl.UNSIGNED_SHORT, 0 ); if(this.reverse) @@ -119,7 +117,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; @@ -182,6 +187,12 @@ } }; +/** + * @method popStencil + * @param graphics {Graphics} + * @param webGLData {Array} + * @param renderSession {Object} + */ PIXI.WebGLStencilManager.prototype.popStencil = function(graphics, webGLData, renderSession) { var gl = this.gl; @@ -272,7 +283,8 @@ }; /** -* Destroys the mask stack +* Destroys the mask stack. +* * @method destroy */ PIXI.WebGLStencilManager.prototype.destroy = function() diff --git a/src/pixi/text/BitmapText.js b/src/pixi/text/BitmapText.js index cd84a6b..a1d20af 100644 --- a/src/pixi/text/BitmapText.js +++ b/src/pixi/text/BitmapText.js @@ -3,7 +3,7 @@ */ /** - * 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. @@ -20,11 +20,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; }; @@ -33,10 +64,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) { @@ -47,7 +78,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 @@ -82,11 +113,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); @@ -100,12 +131,14 @@ } var charData = data.chars[charCode]; + if(!charData) continue; 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; @@ -116,6 +149,7 @@ maxLineWidth = Math.max(maxLineWidth, pos.x); var lineAlignOffsets = []; + for(i = 0; i <= line; i++) { var alignOffset = 0; @@ -133,6 +167,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. @@ -156,23 +191,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; }; diff --git a/src/pixi/text/Text.js b/src/pixi/text/Text.js index ba05f6e..e25f082 100644 --- a/src/pixi/text/Text.js +++ b/src/pixi/text/Text.js @@ -1,12 +1,11 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * - Modified by Tom Slezakowski http://www.tomslezakowski.com @TomSlezakowski (24/03/2014) - Added dropShadowColor. + * Modified by Tom Slezakowski http://www.tomslezakowski.com @TomSlezakowski (24/03/2014) - Added dropShadowColor. */ /** - * A Text Object will create a line(s) of text. To split a line you can use '\n' - * or add a wordWrap property set to true and and wordWrapWidth property with a value - * in the style object + * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string, + * or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object. * * @class Text * @extends Sprite @@ -38,29 +37,30 @@ /** * The canvas 2d context that everything is drawn with * @property context - * @type HTMLCanvasElement 2d Context + * @type HTMLCanvasElement */ this.context = this.canvas.getContext('2d'); - + /** + * The resolution of the canvas. + * @property resolution + * @type Number + */ this.resolution = 1; - PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); this.setText(text); this.setStyle(style); - }; // constructor PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); PIXI.Text.prototype.constructor = PIXI.Text; - /** - * The width of the sprite, setting this will actually modify the scale to achieve the value set + * The width of the Text, setting this will actually modify the scale to achieve the value set * * @property width * @type Number @@ -107,7 +107,6 @@ } }); - /** * Set the style of the text * @@ -146,16 +145,15 @@ }; /** - * Set the copy for the text object. To split a line you can use '\n' + * Set the copy for the text object. To split a line you can use '\n'. * * @method setText - * @param {String} text The copy that you would like the text to display + * @param text {String} The copy that you would like the text to display */ PIXI.Text.prototype.setText = function(text) { this.text = text.toString() || ' '; this.dirty = true; - }; /** @@ -213,7 +211,6 @@ var linePositionX; var linePositionY; - if(this.style.dropShadow) { this.context.fillStyle = this.style.dropShadowColor; @@ -275,7 +272,6 @@ // if(dropShadow) } - this.updateTexture(); }; @@ -297,7 +293,6 @@ // update the dirty base textures this.texture.baseTexture.dirty(); - }; /** @@ -315,18 +310,15 @@ this.updateText(); this.dirty = false; - - } PIXI.Sprite.prototype._renderWebGL.call(this, renderSession); }; - /** -* Renders the object using the WebGL renderer +* Renders the object using the Canvas renderer * -* @method _renderWebGL +* @method _renderCanvas * @param renderSession {RenderSession} * @private */ @@ -344,9 +336,9 @@ }; /* - * http://stackoverflow.com/users/34441/ellisbben - * great solution to the problem! - * returns the height of the given font + * Determine the font height. Based on http://stackoverflow.com/users/34441/ellisbben - a great solution to the problem! + * Returns the height of the given font. + * Warning: This creates DOM elements each time it is called. * * @method determineFontHeight * @param fontStyle {Object} @@ -425,7 +417,7 @@ }; /** - * Destroys this text object + * Destroys this text object. * * @method destroy * @param destroyBaseTexture {Boolean} whether to destroy the base texture as well diff --git a/src/pixi/textures/BaseTexture.js b/src/pixi/textures/BaseTexture.js index 71763c6..4535f3e 100644 --- a/src/pixi/textures/BaseTexture.js +++ b/src/pixi/textures/BaseTexture.js @@ -7,7 +7,7 @@ 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 @@ -45,6 +45,7 @@ /** * The scale mode to apply when scaling this texture + * * @property scaleMode * @type PIXI.scaleModes * @default PIXI.scaleModes.LINEAR @@ -52,7 +53,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 @@ -61,34 +62,42 @@ 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._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 texture updating... // TODO - this needs to be addressed - this._dirty = [true, true, true, true]; + /** + * @property _dirty + * @type Array + * @private + */ + this._dirty = [true, true, true, true]; if(!source)return; @@ -101,8 +110,8 @@ } else { - var scope = this; + this.source.onload = function() { scope.hasLoaded = true; @@ -114,19 +123,29 @@ // 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; + + /** + * @property _powerOf2 + * @type Boolean + * @private + */ this._powerOf2 = false; - - }; PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture; + PIXI.EventTarget.mixin(PIXI.BaseTexture.prototype); /** @@ -177,6 +196,11 @@ this.source.src = newSrc; }; +/** + * Sets all glTextures to be dirty. + * + * @method dirty + */ PIXI.BaseTexture.prototype.dirty = function() { for (var i = 0; i < this._glTextures.length; i++) @@ -186,8 +210,8 @@ }; /** - * 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 + * 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 @@ -204,7 +228,6 @@ if(!baseTexture) { - // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 var image = new Image();//document.createElement('img'); @@ -229,8 +252,7 @@ }; /** - * 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 @@ -255,5 +277,3 @@ return baseTexture; }; - - diff --git a/src/pixi/textures/RenderTexture.js b/src/pixi/textures/RenderTexture.js index a38283c..2f02ff3 100644 --- a/src/pixi/textures/RenderTexture.js +++ b/src/pixi/textures/RenderTexture.js @@ -3,12 +3,11 @@ */ /** - * A RenderTexture is a special texture that allows any pixi displayObject to be rendered to it. + * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. * - * __Hint__: All DisplayObjects (exmpl. Sprites) that render on RenderTexture should be preloaded. - * Otherwise black rectangles will be drawn instead. + * __Hint__: All DisplayObjects (i.e. Sprites) that render to a 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: + * 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"); @@ -18,7 +17,7 @@ * 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: + * 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); @@ -29,6 +28,7 @@ * @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 */ @@ -96,7 +96,12 @@ new PIXI.Rectangle(0, 0, this.width, this.height) ); - // each render texture can only belong to one renderer at the moment if its webGL + /** + * 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) @@ -117,6 +122,10 @@ this.baseTexture.source = this.textureBuffer.canvas; } + /** + * @property valid + * @type Boolean + */ this.valid = true; this._updateUvs(); @@ -126,7 +135,7 @@ PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture; /** - * Resize the RenderTexture. + * Resizes the RenderTexture. * * @method resize * @param width {Number} The width to resize to. @@ -139,7 +148,6 @@ this.valid = (width > 0 && height > 0); - this.width = this.frame.width = this.crop.width = width; this.height = this.frame.height = this.crop.height = height; @@ -182,7 +190,8 @@ * * @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, matrix, clear) @@ -230,7 +239,8 @@ * * @method renderCanvas * @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.renderCanvas = function(displayObject, matrix, clear) @@ -266,6 +276,7 @@ * Will return a HTML Image of the texture * * @method getImage + * @return {HTMLImage} */ PIXI.RenderTexture.prototype.getImage = function() { @@ -275,15 +286,22 @@ }; /** - * Will return a a base64 string of the texture + * Will return a a base64 encoded string of this texture. It works by calling RenderTexture.getCanvas and then running toDataURL on that. * - * @method getImage + * @method getBase64 + * @return {String} A base64 encoded string of the texture. */ PIXI.RenderTexture.prototype.getBase64 = function() { return this.getCanvas().toDataURL(); }; +/** + * Creates a Canvas element, renders this RenderTexture to it and then returns it. + * + * @method getCanvas + * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. + */ PIXI.RenderTexture.prototype.getCanvas = function() { if (this.renderer.type === PIXI.WEBGL_RENDERER) @@ -322,4 +340,3 @@ }; PIXI.RenderTexture.tempMatrix = new PIXI.Matrix(); - diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js index daa8b64..79d038a 100644 --- a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -9,7 +9,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -17,18 +23,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;', @@ -38,6 +46,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -65,14 +74,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); @@ -84,7 +94,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'); @@ -98,9 +107,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiFastShader.js b/src/pixi/renderers/webgl/shaders/PixiFastShader.js index 4fb3fe2..bb46419 100644 --- a/src/pixi/renderers/webgl/shaders/PixiFastShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiFastShader.js @@ -1,6 +1,5 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -10,6 +9,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -19,12 +23,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;', @@ -37,8 +45,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -69,24 +79,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); @@ -111,8 +122,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? @@ -128,14 +137,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiShader.js b/src/pixi/renderers/webgl/shaders/PixiShader.js index d76ec03..725dce2 100644 --- a/src/pixi/renderers/webgl/shaders/PixiShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiShader.js @@ -6,9 +6,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++; /** @@ -18,13 +24,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;', @@ -36,21 +46,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() { @@ -71,12 +104,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) { @@ -101,6 +133,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 * @@ -316,7 +349,8 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy */ PIXI.PixiShader.prototype.destroy = function() @@ -329,7 +363,8 @@ }; /** -* The Default Vertex shader source +* The Default Vertex shader source. +* * @property defaultVertexSrc * @type String */ diff --git a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js index 3a82be2..0f6854c 100644 --- a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js @@ -9,6 +9,11 @@ */ PIXI.PrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -18,11 +23,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 */ @@ -36,6 +44,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -60,14 +69,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); @@ -78,7 +88,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'); @@ -92,9 +101,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/StripShader.js b/src/pixi/renderers/webgl/shaders/StripShader.js index 11f13ad..8fefe51 100644 --- a/src/pixi/renderers/webgl/shaders/StripShader.js +++ b/src/pixi/renderers/webgl/shaders/StripShader.js @@ -2,20 +2,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;', @@ -30,9 +47,11 @@ '}' ]; - /** - * @property {array} fragmentSrc - The fragment shader. - */ + /** + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -56,10 +75,12 @@ this.init(); }; +PIXI.StripShader.prototype.constructor = PIXI.StripShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.StripShader.prototype.init = function() { @@ -88,9 +109,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.StripShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/utils/FilterTexture.js b/src/pixi/renderers/webgl/utils/FilterTexture.js index 9dada23..389acbe 100644 --- a/src/pixi/renderers/webgl/utils/FilterTexture.js +++ b/src/pixi/renderers/webgl/utils/FilterTexture.js @@ -9,7 +9,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) { @@ -19,11 +18,24 @@ */ 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); @@ -44,9 +56,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() @@ -75,14 +89,14 @@ gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width , height , 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - // console.log( width, width ) // update the stencil buffer width and height gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width , height ); }; /** -* Destroys the filter texture +* Destroys the filter texture. +* * @method destroy */ PIXI.FilterTexture.prototype.destroy = function() diff --git a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js index c73728f..3de0ec9 100644 --- a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js @@ -3,31 +3,42 @@ */ /** -* @class WebGLMaskManager +* @class WebGLBlendModeManager * @constructor * @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLBlendModeManager = function() { + /** + * @property currentBlendMode + * @type Number + */ this.currentBlendMode = 99999; }; +PIXI.WebGLBlendModeManager.prototype.constructor = PIXI.WebGLBlendModeManager; + +/** + * 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 +* 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]; @@ -36,7 +47,12 @@ return true; }; +/** +* Destroys this object. +* +* @method destroy +*/ PIXI.WebGLBlendModeManager.prototype.destroy = function() { this.gl = null; -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js index 0d08e47..0bdbbe4 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -8,27 +8,66 @@ * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java */ +/** +* @class WebGLFastSpriteBatch +* @constructor +*/ PIXI.WebGLFastSpriteBatch = function() { - - + /** + * @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) @@ -41,21 +80,58 @@ 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; @@ -66,7 +142,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); @@ -75,6 +150,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; @@ -85,15 +165,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]; @@ -119,6 +204,10 @@ this.flush(); }; +/** + * @method renderSprite + * @param sprite {Sprite} + */ PIXI.WebGLFastSpriteBatch.prototype.renderSprite = function(sprite) { //sprite = children[i]; @@ -137,7 +226,6 @@ uvs = sprite.texture._uvs; - width = sprite.texture.frame.width; height = sprite.texture.frame.height; @@ -257,9 +345,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; @@ -272,7 +362,6 @@ gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); // upload the verts to the buffer - if(this.currentBatchSize > ( this.size * 0.5 ) ) { @@ -285,7 +374,6 @@ gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, this.currentBatchSize * 6, gl.UNSIGNED_SHORT, 0); @@ -297,11 +385,17 @@ }; +/** + * @method stop + */ PIXI.WebGLFastSpriteBatch.prototype.stop = function() { this.flush(); }; +/** + * @method start + */ PIXI.WebGLFastSpriteBatch.prototype.start = function() { var gl = this.gl; @@ -329,8 +423,5 @@ 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); - }; - - diff --git a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js index 9bb9195..359a834 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js @@ -5,22 +5,33 @@ /** * @class WebGLFilterManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLFilterManager = function() { + /** + * @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 */ @@ -33,7 +44,6 @@ }; /** -* * @method begin * @param renderSession {RenderSession} * @param buffer {ArrayBuffer} @@ -44,14 +54,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 */ @@ -64,7 +74,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); @@ -126,9 +135,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() @@ -211,7 +220,6 @@ this.offsetX -= filterArea.x; this.offsetY -= filterArea.y; - var sizeX = this.width; var sizeY = this.height; @@ -239,9 +247,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; @@ -280,10 +286,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 @@ -300,9 +302,9 @@ this.applyFilterPass(filter, filterArea, sizeX, sizeY); // 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); + // 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); @@ -311,7 +313,8 @@ /** -* 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 @@ -351,7 +354,6 @@ filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; } - // console.log(this.uvArray ) shader.syncUniforms(); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); @@ -372,7 +374,8 @@ }; /** -* Initialises the shader buffers +* Initialises the shader buffers. +* * @method initShaderBuffers */ PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() @@ -385,7 +388,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, @@ -394,11 +396,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, @@ -407,10 +405,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, @@ -418,21 +413,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() diff --git a/src/pixi/renderers/webgl/utils/WebGLGraphics.js b/src/pixi/renderers/webgl/utils/WebGLGraphics.js index 4de401d..9ea5a53 100644 --- a/src/pixi/renderers/webgl/utils/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/utils/WebGLGraphics.js @@ -11,7 +11,6 @@ */ PIXI.WebGLGraphics = function() { - }; /** @@ -120,7 +119,6 @@ webGL.data = []; webGL.lastIndex = 0; } - var webGLData; @@ -131,8 +129,6 @@ { var data = graphics.graphicsData[i]; - - if(data.type === PIXI.Graphics.POLY) { // need to add the points the the graphics object.. @@ -189,7 +185,6 @@ } } - webGL.lastIndex++; } @@ -201,7 +196,13 @@ } }; - +/** + * @static + * @private + * @method switchMode + * @param webGL {WebGLContext} + * @param type {Number} + */ PIXI.WebGLGraphics.switchMode = function(webGL, type) { var webGLData; @@ -308,7 +309,6 @@ */ PIXI.WebGLGraphics.buildRoundedRectangle = function(graphicsData, webGLData) { - var points = graphicsData.points; var x = points[0]; var y = points[1]; @@ -316,7 +316,6 @@ 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)); @@ -324,7 +323,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; @@ -368,8 +366,8 @@ }; /** - * 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 * * @static * @private @@ -383,6 +381,7 @@ * @return {Array} */ PIXI.WebGLGraphics.quadraticBezierCurve = function(fromX, fromY, cpX, cpY, toX, toY) { + var xa, ya, xb, @@ -718,13 +717,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; @@ -776,6 +774,15 @@ }; +/** + * 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; @@ -818,6 +825,11 @@ PIXI.WebGLGraphics.graphicsDataPool = []; +/** + * @class WebGLGraphicsData + * @private + * @static + */ PIXI.WebGLGraphicsData = function(gl) { this.gl = gl; @@ -834,6 +846,9 @@ this.dirty = true; }; +/** + * @method reset + */ PIXI.WebGLGraphicsData.prototype.reset = function() { this.points = []; @@ -841,6 +856,9 @@ this.lastIndex = 0; }; +/** + * @method upload + */ PIXI.WebGLGraphicsData.prototype.upload = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js index 181f560..607d5dd 100644 --- a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js @@ -5,16 +5,17 @@ /** * @class WebGLMaskManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLMaskManager = function() { - //this.setContext(gl); }; +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 */ @@ -24,10 +25,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) { @@ -44,10 +46,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) { @@ -55,9 +58,9 @@ 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() diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js index b597698..a15974e 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js @@ -5,38 +5,54 @@ /** * @class WebGLShaderManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLShaderManager = function() { - + /** + * @property maxAttibs + * @type Number + */ this.maxAttibs = 10; + + /** + * @property attribState + * @type Array + */ this.attribState = []; + + /** + * @property tempAttribState + * @type Array + */ this.tempAttribState = []; - for (var i = 0; i < this.maxAttibs; i++) { + for (var i = 0; i < this.maxAttibs; i++) + { this.attribState[i] = false; } + /** + * @property stack + * @type Array + */ this.stack = []; - - //this.setContext(gl); - // the final one is used for the rendering strips + }; +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 @@ -53,16 +69,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++) @@ -97,6 +112,12 @@ } }; +/** +* Sets the current shader. +* +* @method setShader +* @param shader {Any} +*/ PIXI.WebGLShaderManager.prototype.setShader = function(shader) { if(this._currentId === shader._UID)return false; @@ -112,7 +133,8 @@ }; /** -* Destroys +* Destroys this object. +* * @method destroy */ PIXI.WebGLShaderManager.prototype.destroy = function() @@ -133,4 +155,3 @@ this.gl = null; }; - diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js index f6cc024..995aa9b 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js @@ -2,27 +2,44 @@ * @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 +* @private +*/ PIXI.initDefaultShaders = function() { - - // PIXI.stripShader = new PIXI.StripShader(); -// PIXI.stripShader.init(); - }; +/** +* @method CompileVertexShader +* @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 +* @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 +* @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"); @@ -30,7 +47,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; } @@ -38,6 +56,13 @@ return shader; }; +/** +* @method compileProgram +* @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); @@ -49,7 +74,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"); } diff --git a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js index 4d59c80..f8a4bd7 100755 --- a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js @@ -13,15 +13,10 @@ * @class WebGLSpriteBatch * @private * @constructor - * @param gl {WebGLContext} the current WebGL drawing context - * */ PIXI.WebGLSpriteBatch = function() { - /** - * - * * @property vertSize * @type Number */ @@ -47,7 +42,6 @@ */ this.vertices = new Float32Array(numVerts); - //index data /** * Holds the indices * @@ -56,6 +50,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) @@ -68,20 +66,58 @@ 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;', @@ -94,9 +130,7 @@ }; /** -* * @method setContext -* * @param gl {WebGLContext} the current WebGL drawing context */ PIXI.WebGLSpriteBatch.prototype.setContext = function(gl) @@ -109,7 +143,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); @@ -125,15 +158,12 @@ 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) { @@ -144,9 +174,7 @@ }; /** -* * @method end -* */ PIXI.WebGLSpriteBatch.prototype.end = function() { @@ -154,16 +182,13 @@ }; /** -* * @method render -* * @param sprite {Sprite} the sprite to render when using this spritebatch */ PIXI.WebGLSpriteBatch.prototype.render = function(sprite) { var texture = sprite.texture; - //TODO set blend modes.. // check texture.. if(this.currentBatchSize >= this.size) @@ -270,9 +295,9 @@ }; /** -* 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) @@ -390,12 +415,10 @@ 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() { @@ -516,6 +539,12 @@ 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; @@ -532,7 +561,6 @@ // bind the current texture gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, size * 6, gl.UNSIGNED_SHORT, startIndex * 6 * 2); @@ -541,11 +569,8 @@ this.renderSession.drawCount++; }; - /** -* * @method stop -* */ PIXI.WebGLSpriteBatch.prototype.stop = function() { @@ -554,9 +579,7 @@ }; /** -* * @method start -* */ PIXI.WebGLSpriteBatch.prototype.start = function() { @@ -564,12 +587,12 @@ }; /** -* Destroys the SpriteBatch +* Destroys the SpriteBatch. +* * @method destroy */ PIXI.WebGLSpriteBatch.prototype.destroy = function() { - this.vertices = null; this.indices = null; diff --git a/src/pixi/renderers/webgl/utils/WebGLStencilManager.js b/src/pixi/renderers/webgl/utils/WebGLStencilManager.js index f841e6f..367d7dc 100644 --- a/src/pixi/renderers/webgl/utils/WebGLStencilManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLStencilManager.js @@ -5,21 +5,18 @@ /** * @class WebGLStencilManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ 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 */ @@ -29,10 +26,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) { @@ -60,7 +59,6 @@ if(webGLData.mode === 1) { - gl.drawElements(gl.TRIANGLE_FAN, webGLData.indices.length - 4, gl.UNSIGNED_SHORT, 0 ); if(this.reverse) @@ -119,7 +117,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; @@ -182,6 +187,12 @@ } }; +/** + * @method popStencil + * @param graphics {Graphics} + * @param webGLData {Array} + * @param renderSession {Object} + */ PIXI.WebGLStencilManager.prototype.popStencil = function(graphics, webGLData, renderSession) { var gl = this.gl; @@ -272,7 +283,8 @@ }; /** -* Destroys the mask stack +* Destroys the mask stack. +* * @method destroy */ PIXI.WebGLStencilManager.prototype.destroy = function() diff --git a/src/pixi/text/BitmapText.js b/src/pixi/text/BitmapText.js index cd84a6b..a1d20af 100644 --- a/src/pixi/text/BitmapText.js +++ b/src/pixi/text/BitmapText.js @@ -3,7 +3,7 @@ */ /** - * 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. @@ -20,11 +20,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; }; @@ -33,10 +64,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) { @@ -47,7 +78,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 @@ -82,11 +113,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); @@ -100,12 +131,14 @@ } var charData = data.chars[charCode]; + if(!charData) continue; 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; @@ -116,6 +149,7 @@ maxLineWidth = Math.max(maxLineWidth, pos.x); var lineAlignOffsets = []; + for(i = 0; i <= line; i++) { var alignOffset = 0; @@ -133,6 +167,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. @@ -156,23 +191,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; }; diff --git a/src/pixi/text/Text.js b/src/pixi/text/Text.js index ba05f6e..e25f082 100644 --- a/src/pixi/text/Text.js +++ b/src/pixi/text/Text.js @@ -1,12 +1,11 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * - Modified by Tom Slezakowski http://www.tomslezakowski.com @TomSlezakowski (24/03/2014) - Added dropShadowColor. + * Modified by Tom Slezakowski http://www.tomslezakowski.com @TomSlezakowski (24/03/2014) - Added dropShadowColor. */ /** - * A Text Object will create a line(s) of text. To split a line you can use '\n' - * or add a wordWrap property set to true and and wordWrapWidth property with a value - * in the style object + * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string, + * or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object. * * @class Text * @extends Sprite @@ -38,29 +37,30 @@ /** * The canvas 2d context that everything is drawn with * @property context - * @type HTMLCanvasElement 2d Context + * @type HTMLCanvasElement */ this.context = this.canvas.getContext('2d'); - + /** + * The resolution of the canvas. + * @property resolution + * @type Number + */ this.resolution = 1; - PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); this.setText(text); this.setStyle(style); - }; // constructor PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); PIXI.Text.prototype.constructor = PIXI.Text; - /** - * The width of the sprite, setting this will actually modify the scale to achieve the value set + * The width of the Text, setting this will actually modify the scale to achieve the value set * * @property width * @type Number @@ -107,7 +107,6 @@ } }); - /** * Set the style of the text * @@ -146,16 +145,15 @@ }; /** - * Set the copy for the text object. To split a line you can use '\n' + * Set the copy for the text object. To split a line you can use '\n'. * * @method setText - * @param {String} text The copy that you would like the text to display + * @param text {String} The copy that you would like the text to display */ PIXI.Text.prototype.setText = function(text) { this.text = text.toString() || ' '; this.dirty = true; - }; /** @@ -213,7 +211,6 @@ var linePositionX; var linePositionY; - if(this.style.dropShadow) { this.context.fillStyle = this.style.dropShadowColor; @@ -275,7 +272,6 @@ // if(dropShadow) } - this.updateTexture(); }; @@ -297,7 +293,6 @@ // update the dirty base textures this.texture.baseTexture.dirty(); - }; /** @@ -315,18 +310,15 @@ this.updateText(); this.dirty = false; - - } PIXI.Sprite.prototype._renderWebGL.call(this, renderSession); }; - /** -* Renders the object using the WebGL renderer +* Renders the object using the Canvas renderer * -* @method _renderWebGL +* @method _renderCanvas * @param renderSession {RenderSession} * @private */ @@ -344,9 +336,9 @@ }; /* - * http://stackoverflow.com/users/34441/ellisbben - * great solution to the problem! - * returns the height of the given font + * Determine the font height. Based on http://stackoverflow.com/users/34441/ellisbben - a great solution to the problem! + * Returns the height of the given font. + * Warning: This creates DOM elements each time it is called. * * @method determineFontHeight * @param fontStyle {Object} @@ -425,7 +417,7 @@ }; /** - * Destroys this text object + * Destroys this text object. * * @method destroy * @param destroyBaseTexture {Boolean} whether to destroy the base texture as well diff --git a/src/pixi/textures/BaseTexture.js b/src/pixi/textures/BaseTexture.js index 71763c6..4535f3e 100644 --- a/src/pixi/textures/BaseTexture.js +++ b/src/pixi/textures/BaseTexture.js @@ -7,7 +7,7 @@ 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 @@ -45,6 +45,7 @@ /** * The scale mode to apply when scaling this texture + * * @property scaleMode * @type PIXI.scaleModes * @default PIXI.scaleModes.LINEAR @@ -52,7 +53,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 @@ -61,34 +62,42 @@ 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._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 texture updating... // TODO - this needs to be addressed - this._dirty = [true, true, true, true]; + /** + * @property _dirty + * @type Array + * @private + */ + this._dirty = [true, true, true, true]; if(!source)return; @@ -101,8 +110,8 @@ } else { - var scope = this; + this.source.onload = function() { scope.hasLoaded = true; @@ -114,19 +123,29 @@ // 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; + + /** + * @property _powerOf2 + * @type Boolean + * @private + */ this._powerOf2 = false; - - }; PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture; + PIXI.EventTarget.mixin(PIXI.BaseTexture.prototype); /** @@ -177,6 +196,11 @@ this.source.src = newSrc; }; +/** + * Sets all glTextures to be dirty. + * + * @method dirty + */ PIXI.BaseTexture.prototype.dirty = function() { for (var i = 0; i < this._glTextures.length; i++) @@ -186,8 +210,8 @@ }; /** - * 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 + * 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 @@ -204,7 +228,6 @@ if(!baseTexture) { - // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 var image = new Image();//document.createElement('img'); @@ -229,8 +252,7 @@ }; /** - * 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 @@ -255,5 +277,3 @@ return baseTexture; }; - - diff --git a/src/pixi/textures/RenderTexture.js b/src/pixi/textures/RenderTexture.js index a38283c..2f02ff3 100644 --- a/src/pixi/textures/RenderTexture.js +++ b/src/pixi/textures/RenderTexture.js @@ -3,12 +3,11 @@ */ /** - * A RenderTexture is a special texture that allows any pixi displayObject to be rendered to it. + * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. * - * __Hint__: All DisplayObjects (exmpl. Sprites) that render on RenderTexture should be preloaded. - * Otherwise black rectangles will be drawn instead. + * __Hint__: All DisplayObjects (i.e. Sprites) that render to a 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: + * 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"); @@ -18,7 +17,7 @@ * 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: + * 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); @@ -29,6 +28,7 @@ * @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 */ @@ -96,7 +96,12 @@ new PIXI.Rectangle(0, 0, this.width, this.height) ); - // each render texture can only belong to one renderer at the moment if its webGL + /** + * 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) @@ -117,6 +122,10 @@ this.baseTexture.source = this.textureBuffer.canvas; } + /** + * @property valid + * @type Boolean + */ this.valid = true; this._updateUvs(); @@ -126,7 +135,7 @@ PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture; /** - * Resize the RenderTexture. + * Resizes the RenderTexture. * * @method resize * @param width {Number} The width to resize to. @@ -139,7 +148,6 @@ this.valid = (width > 0 && height > 0); - this.width = this.frame.width = this.crop.width = width; this.height = this.frame.height = this.crop.height = height; @@ -182,7 +190,8 @@ * * @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, matrix, clear) @@ -230,7 +239,8 @@ * * @method renderCanvas * @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.renderCanvas = function(displayObject, matrix, clear) @@ -266,6 +276,7 @@ * Will return a HTML Image of the texture * * @method getImage + * @return {HTMLImage} */ PIXI.RenderTexture.prototype.getImage = function() { @@ -275,15 +286,22 @@ }; /** - * Will return a a base64 string of the texture + * Will return a a base64 encoded string of this texture. It works by calling RenderTexture.getCanvas and then running toDataURL on that. * - * @method getImage + * @method getBase64 + * @return {String} A base64 encoded string of the texture. */ PIXI.RenderTexture.prototype.getBase64 = function() { return this.getCanvas().toDataURL(); }; +/** + * Creates a Canvas element, renders this RenderTexture to it and then returns it. + * + * @method getCanvas + * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. + */ PIXI.RenderTexture.prototype.getCanvas = function() { if (this.renderer.type === PIXI.WEBGL_RENDERER) @@ -322,4 +340,3 @@ }; PIXI.RenderTexture.tempMatrix = new PIXI.Matrix(); - diff --git a/src/pixi/textures/Texture.js b/src/pixi/textures/Texture.js index 6b40986..02b6513 100644 --- a/src/pixi/textures/Texture.js +++ b/src/pixi/textures/Texture.js @@ -9,7 +9,7 @@ /** * 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 @@ -57,7 +57,7 @@ this.frame = frame; /** - * The trim point + * The texture trim data. * * @property trim * @type Rectangle @@ -65,7 +65,7 @@ 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 @@ -83,9 +83,9 @@ /** * The WebGL UV data cache. * - * @private * @property _uvs * @type Object + * @private */ this._uvs = null; @@ -132,7 +132,6 @@ * Called when the base texture is loaded * * @method onBaseTextureLoaded - * @param event * @private */ PIXI.Texture.prototype.onBaseTextureLoaded = function() @@ -201,7 +200,7 @@ /** * Updates the internal WebGL UV cache. * - * @method _updateWebGLuvs + * @method _updateUvs * @private */ PIXI.Texture.prototype._updateUvs = function() @@ -223,12 +222,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 @@ -251,8 +249,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 @@ -267,8 +265,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 @@ -284,14 +281,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) { @@ -299,12 +295,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) { @@ -314,7 +310,6 @@ return texture; }; - PIXI.TextureUvs = function() { this.x0 = 0; diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js index daa8b64..79d038a 100644 --- a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -9,7 +9,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -17,18 +23,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;', @@ -38,6 +46,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -65,14 +74,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); @@ -84,7 +94,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'); @@ -98,9 +107,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiFastShader.js b/src/pixi/renderers/webgl/shaders/PixiFastShader.js index 4fb3fe2..bb46419 100644 --- a/src/pixi/renderers/webgl/shaders/PixiFastShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiFastShader.js @@ -1,6 +1,5 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -10,6 +9,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -19,12 +23,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;', @@ -37,8 +45,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -69,24 +79,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); @@ -111,8 +122,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? @@ -128,14 +137,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiShader.js b/src/pixi/renderers/webgl/shaders/PixiShader.js index d76ec03..725dce2 100644 --- a/src/pixi/renderers/webgl/shaders/PixiShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiShader.js @@ -6,9 +6,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++; /** @@ -18,13 +24,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;', @@ -36,21 +46,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() { @@ -71,12 +104,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) { @@ -101,6 +133,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 * @@ -316,7 +349,8 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy */ PIXI.PixiShader.prototype.destroy = function() @@ -329,7 +363,8 @@ }; /** -* The Default Vertex shader source +* The Default Vertex shader source. +* * @property defaultVertexSrc * @type String */ diff --git a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js index 3a82be2..0f6854c 100644 --- a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js @@ -9,6 +9,11 @@ */ PIXI.PrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -18,11 +23,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 */ @@ -36,6 +44,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -60,14 +69,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); @@ -78,7 +88,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'); @@ -92,9 +101,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/StripShader.js b/src/pixi/renderers/webgl/shaders/StripShader.js index 11f13ad..8fefe51 100644 --- a/src/pixi/renderers/webgl/shaders/StripShader.js +++ b/src/pixi/renderers/webgl/shaders/StripShader.js @@ -2,20 +2,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;', @@ -30,9 +47,11 @@ '}' ]; - /** - * @property {array} fragmentSrc - The fragment shader. - */ + /** + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -56,10 +75,12 @@ this.init(); }; +PIXI.StripShader.prototype.constructor = PIXI.StripShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.StripShader.prototype.init = function() { @@ -88,9 +109,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.StripShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/utils/FilterTexture.js b/src/pixi/renderers/webgl/utils/FilterTexture.js index 9dada23..389acbe 100644 --- a/src/pixi/renderers/webgl/utils/FilterTexture.js +++ b/src/pixi/renderers/webgl/utils/FilterTexture.js @@ -9,7 +9,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) { @@ -19,11 +18,24 @@ */ 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); @@ -44,9 +56,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() @@ -75,14 +89,14 @@ gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width , height , 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - // console.log( width, width ) // update the stencil buffer width and height gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width , height ); }; /** -* Destroys the filter texture +* Destroys the filter texture. +* * @method destroy */ PIXI.FilterTexture.prototype.destroy = function() diff --git a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js index c73728f..3de0ec9 100644 --- a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js @@ -3,31 +3,42 @@ */ /** -* @class WebGLMaskManager +* @class WebGLBlendModeManager * @constructor * @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLBlendModeManager = function() { + /** + * @property currentBlendMode + * @type Number + */ this.currentBlendMode = 99999; }; +PIXI.WebGLBlendModeManager.prototype.constructor = PIXI.WebGLBlendModeManager; + +/** + * 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 +* 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]; @@ -36,7 +47,12 @@ return true; }; +/** +* Destroys this object. +* +* @method destroy +*/ PIXI.WebGLBlendModeManager.prototype.destroy = function() { this.gl = null; -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js index 0d08e47..0bdbbe4 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -8,27 +8,66 @@ * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java */ +/** +* @class WebGLFastSpriteBatch +* @constructor +*/ PIXI.WebGLFastSpriteBatch = function() { - - + /** + * @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) @@ -41,21 +80,58 @@ 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; @@ -66,7 +142,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); @@ -75,6 +150,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; @@ -85,15 +165,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]; @@ -119,6 +204,10 @@ this.flush(); }; +/** + * @method renderSprite + * @param sprite {Sprite} + */ PIXI.WebGLFastSpriteBatch.prototype.renderSprite = function(sprite) { //sprite = children[i]; @@ -137,7 +226,6 @@ uvs = sprite.texture._uvs; - width = sprite.texture.frame.width; height = sprite.texture.frame.height; @@ -257,9 +345,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; @@ -272,7 +362,6 @@ gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); // upload the verts to the buffer - if(this.currentBatchSize > ( this.size * 0.5 ) ) { @@ -285,7 +374,6 @@ gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, this.currentBatchSize * 6, gl.UNSIGNED_SHORT, 0); @@ -297,11 +385,17 @@ }; +/** + * @method stop + */ PIXI.WebGLFastSpriteBatch.prototype.stop = function() { this.flush(); }; +/** + * @method start + */ PIXI.WebGLFastSpriteBatch.prototype.start = function() { var gl = this.gl; @@ -329,8 +423,5 @@ 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); - }; - - diff --git a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js index 9bb9195..359a834 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js @@ -5,22 +5,33 @@ /** * @class WebGLFilterManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLFilterManager = function() { + /** + * @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 */ @@ -33,7 +44,6 @@ }; /** -* * @method begin * @param renderSession {RenderSession} * @param buffer {ArrayBuffer} @@ -44,14 +54,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 */ @@ -64,7 +74,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); @@ -126,9 +135,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() @@ -211,7 +220,6 @@ this.offsetX -= filterArea.x; this.offsetY -= filterArea.y; - var sizeX = this.width; var sizeY = this.height; @@ -239,9 +247,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; @@ -280,10 +286,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 @@ -300,9 +302,9 @@ this.applyFilterPass(filter, filterArea, sizeX, sizeY); // 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); + // 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); @@ -311,7 +313,8 @@ /** -* 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 @@ -351,7 +354,6 @@ filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; } - // console.log(this.uvArray ) shader.syncUniforms(); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); @@ -372,7 +374,8 @@ }; /** -* Initialises the shader buffers +* Initialises the shader buffers. +* * @method initShaderBuffers */ PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() @@ -385,7 +388,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, @@ -394,11 +396,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, @@ -407,10 +405,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, @@ -418,21 +413,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() diff --git a/src/pixi/renderers/webgl/utils/WebGLGraphics.js b/src/pixi/renderers/webgl/utils/WebGLGraphics.js index 4de401d..9ea5a53 100644 --- a/src/pixi/renderers/webgl/utils/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/utils/WebGLGraphics.js @@ -11,7 +11,6 @@ */ PIXI.WebGLGraphics = function() { - }; /** @@ -120,7 +119,6 @@ webGL.data = []; webGL.lastIndex = 0; } - var webGLData; @@ -131,8 +129,6 @@ { var data = graphics.graphicsData[i]; - - if(data.type === PIXI.Graphics.POLY) { // need to add the points the the graphics object.. @@ -189,7 +185,6 @@ } } - webGL.lastIndex++; } @@ -201,7 +196,13 @@ } }; - +/** + * @static + * @private + * @method switchMode + * @param webGL {WebGLContext} + * @param type {Number} + */ PIXI.WebGLGraphics.switchMode = function(webGL, type) { var webGLData; @@ -308,7 +309,6 @@ */ PIXI.WebGLGraphics.buildRoundedRectangle = function(graphicsData, webGLData) { - var points = graphicsData.points; var x = points[0]; var y = points[1]; @@ -316,7 +316,6 @@ 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)); @@ -324,7 +323,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; @@ -368,8 +366,8 @@ }; /** - * 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 * * @static * @private @@ -383,6 +381,7 @@ * @return {Array} */ PIXI.WebGLGraphics.quadraticBezierCurve = function(fromX, fromY, cpX, cpY, toX, toY) { + var xa, ya, xb, @@ -718,13 +717,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; @@ -776,6 +774,15 @@ }; +/** + * 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; @@ -818,6 +825,11 @@ PIXI.WebGLGraphics.graphicsDataPool = []; +/** + * @class WebGLGraphicsData + * @private + * @static + */ PIXI.WebGLGraphicsData = function(gl) { this.gl = gl; @@ -834,6 +846,9 @@ this.dirty = true; }; +/** + * @method reset + */ PIXI.WebGLGraphicsData.prototype.reset = function() { this.points = []; @@ -841,6 +856,9 @@ this.lastIndex = 0; }; +/** + * @method upload + */ PIXI.WebGLGraphicsData.prototype.upload = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js index 181f560..607d5dd 100644 --- a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js @@ -5,16 +5,17 @@ /** * @class WebGLMaskManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLMaskManager = function() { - //this.setContext(gl); }; +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 */ @@ -24,10 +25,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) { @@ -44,10 +46,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) { @@ -55,9 +58,9 @@ 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() diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js index b597698..a15974e 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js @@ -5,38 +5,54 @@ /** * @class WebGLShaderManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLShaderManager = function() { - + /** + * @property maxAttibs + * @type Number + */ this.maxAttibs = 10; + + /** + * @property attribState + * @type Array + */ this.attribState = []; + + /** + * @property tempAttribState + * @type Array + */ this.tempAttribState = []; - for (var i = 0; i < this.maxAttibs; i++) { + for (var i = 0; i < this.maxAttibs; i++) + { this.attribState[i] = false; } + /** + * @property stack + * @type Array + */ this.stack = []; - - //this.setContext(gl); - // the final one is used for the rendering strips + }; +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 @@ -53,16 +69,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++) @@ -97,6 +112,12 @@ } }; +/** +* Sets the current shader. +* +* @method setShader +* @param shader {Any} +*/ PIXI.WebGLShaderManager.prototype.setShader = function(shader) { if(this._currentId === shader._UID)return false; @@ -112,7 +133,8 @@ }; /** -* Destroys +* Destroys this object. +* * @method destroy */ PIXI.WebGLShaderManager.prototype.destroy = function() @@ -133,4 +155,3 @@ this.gl = null; }; - diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js index f6cc024..995aa9b 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js @@ -2,27 +2,44 @@ * @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 +* @private +*/ PIXI.initDefaultShaders = function() { - - // PIXI.stripShader = new PIXI.StripShader(); -// PIXI.stripShader.init(); - }; +/** +* @method CompileVertexShader +* @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 +* @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 +* @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"); @@ -30,7 +47,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; } @@ -38,6 +56,13 @@ return shader; }; +/** +* @method compileProgram +* @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); @@ -49,7 +74,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"); } diff --git a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js index 4d59c80..f8a4bd7 100755 --- a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js @@ -13,15 +13,10 @@ * @class WebGLSpriteBatch * @private * @constructor - * @param gl {WebGLContext} the current WebGL drawing context - * */ PIXI.WebGLSpriteBatch = function() { - /** - * - * * @property vertSize * @type Number */ @@ -47,7 +42,6 @@ */ this.vertices = new Float32Array(numVerts); - //index data /** * Holds the indices * @@ -56,6 +50,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) @@ -68,20 +66,58 @@ 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;', @@ -94,9 +130,7 @@ }; /** -* * @method setContext -* * @param gl {WebGLContext} the current WebGL drawing context */ PIXI.WebGLSpriteBatch.prototype.setContext = function(gl) @@ -109,7 +143,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); @@ -125,15 +158,12 @@ 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) { @@ -144,9 +174,7 @@ }; /** -* * @method end -* */ PIXI.WebGLSpriteBatch.prototype.end = function() { @@ -154,16 +182,13 @@ }; /** -* * @method render -* * @param sprite {Sprite} the sprite to render when using this spritebatch */ PIXI.WebGLSpriteBatch.prototype.render = function(sprite) { var texture = sprite.texture; - //TODO set blend modes.. // check texture.. if(this.currentBatchSize >= this.size) @@ -270,9 +295,9 @@ }; /** -* 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) @@ -390,12 +415,10 @@ 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() { @@ -516,6 +539,12 @@ 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; @@ -532,7 +561,6 @@ // bind the current texture gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, size * 6, gl.UNSIGNED_SHORT, startIndex * 6 * 2); @@ -541,11 +569,8 @@ this.renderSession.drawCount++; }; - /** -* * @method stop -* */ PIXI.WebGLSpriteBatch.prototype.stop = function() { @@ -554,9 +579,7 @@ }; /** -* * @method start -* */ PIXI.WebGLSpriteBatch.prototype.start = function() { @@ -564,12 +587,12 @@ }; /** -* Destroys the SpriteBatch +* Destroys the SpriteBatch. +* * @method destroy */ PIXI.WebGLSpriteBatch.prototype.destroy = function() { - this.vertices = null; this.indices = null; diff --git a/src/pixi/renderers/webgl/utils/WebGLStencilManager.js b/src/pixi/renderers/webgl/utils/WebGLStencilManager.js index f841e6f..367d7dc 100644 --- a/src/pixi/renderers/webgl/utils/WebGLStencilManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLStencilManager.js @@ -5,21 +5,18 @@ /** * @class WebGLStencilManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ 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 */ @@ -29,10 +26,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) { @@ -60,7 +59,6 @@ if(webGLData.mode === 1) { - gl.drawElements(gl.TRIANGLE_FAN, webGLData.indices.length - 4, gl.UNSIGNED_SHORT, 0 ); if(this.reverse) @@ -119,7 +117,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; @@ -182,6 +187,12 @@ } }; +/** + * @method popStencil + * @param graphics {Graphics} + * @param webGLData {Array} + * @param renderSession {Object} + */ PIXI.WebGLStencilManager.prototype.popStencil = function(graphics, webGLData, renderSession) { var gl = this.gl; @@ -272,7 +283,8 @@ }; /** -* Destroys the mask stack +* Destroys the mask stack. +* * @method destroy */ PIXI.WebGLStencilManager.prototype.destroy = function() diff --git a/src/pixi/text/BitmapText.js b/src/pixi/text/BitmapText.js index cd84a6b..a1d20af 100644 --- a/src/pixi/text/BitmapText.js +++ b/src/pixi/text/BitmapText.js @@ -3,7 +3,7 @@ */ /** - * 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. @@ -20,11 +20,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; }; @@ -33,10 +64,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) { @@ -47,7 +78,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 @@ -82,11 +113,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); @@ -100,12 +131,14 @@ } var charData = data.chars[charCode]; + if(!charData) continue; 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; @@ -116,6 +149,7 @@ maxLineWidth = Math.max(maxLineWidth, pos.x); var lineAlignOffsets = []; + for(i = 0; i <= line; i++) { var alignOffset = 0; @@ -133,6 +167,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. @@ -156,23 +191,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; }; diff --git a/src/pixi/text/Text.js b/src/pixi/text/Text.js index ba05f6e..e25f082 100644 --- a/src/pixi/text/Text.js +++ b/src/pixi/text/Text.js @@ -1,12 +1,11 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * - Modified by Tom Slezakowski http://www.tomslezakowski.com @TomSlezakowski (24/03/2014) - Added dropShadowColor. + * Modified by Tom Slezakowski http://www.tomslezakowski.com @TomSlezakowski (24/03/2014) - Added dropShadowColor. */ /** - * A Text Object will create a line(s) of text. To split a line you can use '\n' - * or add a wordWrap property set to true and and wordWrapWidth property with a value - * in the style object + * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string, + * or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object. * * @class Text * @extends Sprite @@ -38,29 +37,30 @@ /** * The canvas 2d context that everything is drawn with * @property context - * @type HTMLCanvasElement 2d Context + * @type HTMLCanvasElement */ this.context = this.canvas.getContext('2d'); - + /** + * The resolution of the canvas. + * @property resolution + * @type Number + */ this.resolution = 1; - PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); this.setText(text); this.setStyle(style); - }; // constructor PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); PIXI.Text.prototype.constructor = PIXI.Text; - /** - * The width of the sprite, setting this will actually modify the scale to achieve the value set + * The width of the Text, setting this will actually modify the scale to achieve the value set * * @property width * @type Number @@ -107,7 +107,6 @@ } }); - /** * Set the style of the text * @@ -146,16 +145,15 @@ }; /** - * Set the copy for the text object. To split a line you can use '\n' + * Set the copy for the text object. To split a line you can use '\n'. * * @method setText - * @param {String} text The copy that you would like the text to display + * @param text {String} The copy that you would like the text to display */ PIXI.Text.prototype.setText = function(text) { this.text = text.toString() || ' '; this.dirty = true; - }; /** @@ -213,7 +211,6 @@ var linePositionX; var linePositionY; - if(this.style.dropShadow) { this.context.fillStyle = this.style.dropShadowColor; @@ -275,7 +272,6 @@ // if(dropShadow) } - this.updateTexture(); }; @@ -297,7 +293,6 @@ // update the dirty base textures this.texture.baseTexture.dirty(); - }; /** @@ -315,18 +310,15 @@ this.updateText(); this.dirty = false; - - } PIXI.Sprite.prototype._renderWebGL.call(this, renderSession); }; - /** -* Renders the object using the WebGL renderer +* Renders the object using the Canvas renderer * -* @method _renderWebGL +* @method _renderCanvas * @param renderSession {RenderSession} * @private */ @@ -344,9 +336,9 @@ }; /* - * http://stackoverflow.com/users/34441/ellisbben - * great solution to the problem! - * returns the height of the given font + * Determine the font height. Based on http://stackoverflow.com/users/34441/ellisbben - a great solution to the problem! + * Returns the height of the given font. + * Warning: This creates DOM elements each time it is called. * * @method determineFontHeight * @param fontStyle {Object} @@ -425,7 +417,7 @@ }; /** - * Destroys this text object + * Destroys this text object. * * @method destroy * @param destroyBaseTexture {Boolean} whether to destroy the base texture as well diff --git a/src/pixi/textures/BaseTexture.js b/src/pixi/textures/BaseTexture.js index 71763c6..4535f3e 100644 --- a/src/pixi/textures/BaseTexture.js +++ b/src/pixi/textures/BaseTexture.js @@ -7,7 +7,7 @@ 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 @@ -45,6 +45,7 @@ /** * The scale mode to apply when scaling this texture + * * @property scaleMode * @type PIXI.scaleModes * @default PIXI.scaleModes.LINEAR @@ -52,7 +53,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 @@ -61,34 +62,42 @@ 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._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 texture updating... // TODO - this needs to be addressed - this._dirty = [true, true, true, true]; + /** + * @property _dirty + * @type Array + * @private + */ + this._dirty = [true, true, true, true]; if(!source)return; @@ -101,8 +110,8 @@ } else { - var scope = this; + this.source.onload = function() { scope.hasLoaded = true; @@ -114,19 +123,29 @@ // 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; + + /** + * @property _powerOf2 + * @type Boolean + * @private + */ this._powerOf2 = false; - - }; PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture; + PIXI.EventTarget.mixin(PIXI.BaseTexture.prototype); /** @@ -177,6 +196,11 @@ this.source.src = newSrc; }; +/** + * Sets all glTextures to be dirty. + * + * @method dirty + */ PIXI.BaseTexture.prototype.dirty = function() { for (var i = 0; i < this._glTextures.length; i++) @@ -186,8 +210,8 @@ }; /** - * 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 + * 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 @@ -204,7 +228,6 @@ if(!baseTexture) { - // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 var image = new Image();//document.createElement('img'); @@ -229,8 +252,7 @@ }; /** - * 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 @@ -255,5 +277,3 @@ return baseTexture; }; - - diff --git a/src/pixi/textures/RenderTexture.js b/src/pixi/textures/RenderTexture.js index a38283c..2f02ff3 100644 --- a/src/pixi/textures/RenderTexture.js +++ b/src/pixi/textures/RenderTexture.js @@ -3,12 +3,11 @@ */ /** - * A RenderTexture is a special texture that allows any pixi displayObject to be rendered to it. + * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. * - * __Hint__: All DisplayObjects (exmpl. Sprites) that render on RenderTexture should be preloaded. - * Otherwise black rectangles will be drawn instead. + * __Hint__: All DisplayObjects (i.e. Sprites) that render to a 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: + * 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"); @@ -18,7 +17,7 @@ * 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: + * 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); @@ -29,6 +28,7 @@ * @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 */ @@ -96,7 +96,12 @@ new PIXI.Rectangle(0, 0, this.width, this.height) ); - // each render texture can only belong to one renderer at the moment if its webGL + /** + * 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) @@ -117,6 +122,10 @@ this.baseTexture.source = this.textureBuffer.canvas; } + /** + * @property valid + * @type Boolean + */ this.valid = true; this._updateUvs(); @@ -126,7 +135,7 @@ PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture; /** - * Resize the RenderTexture. + * Resizes the RenderTexture. * * @method resize * @param width {Number} The width to resize to. @@ -139,7 +148,6 @@ this.valid = (width > 0 && height > 0); - this.width = this.frame.width = this.crop.width = width; this.height = this.frame.height = this.crop.height = height; @@ -182,7 +190,8 @@ * * @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, matrix, clear) @@ -230,7 +239,8 @@ * * @method renderCanvas * @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.renderCanvas = function(displayObject, matrix, clear) @@ -266,6 +276,7 @@ * Will return a HTML Image of the texture * * @method getImage + * @return {HTMLImage} */ PIXI.RenderTexture.prototype.getImage = function() { @@ -275,15 +286,22 @@ }; /** - * Will return a a base64 string of the texture + * Will return a a base64 encoded string of this texture. It works by calling RenderTexture.getCanvas and then running toDataURL on that. * - * @method getImage + * @method getBase64 + * @return {String} A base64 encoded string of the texture. */ PIXI.RenderTexture.prototype.getBase64 = function() { return this.getCanvas().toDataURL(); }; +/** + * Creates a Canvas element, renders this RenderTexture to it and then returns it. + * + * @method getCanvas + * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. + */ PIXI.RenderTexture.prototype.getCanvas = function() { if (this.renderer.type === PIXI.WEBGL_RENDERER) @@ -322,4 +340,3 @@ }; PIXI.RenderTexture.tempMatrix = new PIXI.Matrix(); - diff --git a/src/pixi/textures/Texture.js b/src/pixi/textures/Texture.js index 6b40986..02b6513 100644 --- a/src/pixi/textures/Texture.js +++ b/src/pixi/textures/Texture.js @@ -9,7 +9,7 @@ /** * 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 @@ -57,7 +57,7 @@ this.frame = frame; /** - * The trim point + * The texture trim data. * * @property trim * @type Rectangle @@ -65,7 +65,7 @@ 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 @@ -83,9 +83,9 @@ /** * The WebGL UV data cache. * - * @private * @property _uvs * @type Object + * @private */ this._uvs = null; @@ -132,7 +132,6 @@ * Called when the base texture is loaded * * @method onBaseTextureLoaded - * @param event * @private */ PIXI.Texture.prototype.onBaseTextureLoaded = function() @@ -201,7 +200,7 @@ /** * Updates the internal WebGL UV cache. * - * @method _updateWebGLuvs + * @method _updateUvs * @private */ PIXI.Texture.prototype._updateUvs = function() @@ -223,12 +222,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 @@ -251,8 +249,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 @@ -267,8 +265,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 @@ -284,14 +281,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) { @@ -299,12 +295,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) { @@ -314,7 +310,6 @@ return texture; }; - PIXI.TextureUvs = function() { this.x0 = 0; diff --git a/src/pixi/utils/Detector.js b/src/pixi/utils/Detector.js index c0bd1ed..33a97a9 100644 --- a/src/pixi/utils/Detector.js +++ b/src/pixi/utils/Detector.js @@ -44,9 +44,10 @@ /** * 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 diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js index daa8b64..79d038a 100644 --- a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -9,7 +9,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -17,18 +23,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;', @@ -38,6 +46,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -65,14 +74,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); @@ -84,7 +94,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'); @@ -98,9 +107,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiFastShader.js b/src/pixi/renderers/webgl/shaders/PixiFastShader.js index 4fb3fe2..bb46419 100644 --- a/src/pixi/renderers/webgl/shaders/PixiFastShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiFastShader.js @@ -1,6 +1,5 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -10,6 +9,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -19,12 +23,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;', @@ -37,8 +45,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -69,24 +79,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); @@ -111,8 +122,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? @@ -128,14 +137,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiShader.js b/src/pixi/renderers/webgl/shaders/PixiShader.js index d76ec03..725dce2 100644 --- a/src/pixi/renderers/webgl/shaders/PixiShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiShader.js @@ -6,9 +6,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++; /** @@ -18,13 +24,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;', @@ -36,21 +46,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() { @@ -71,12 +104,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) { @@ -101,6 +133,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 * @@ -316,7 +349,8 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy */ PIXI.PixiShader.prototype.destroy = function() @@ -329,7 +363,8 @@ }; /** -* The Default Vertex shader source +* The Default Vertex shader source. +* * @property defaultVertexSrc * @type String */ diff --git a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js index 3a82be2..0f6854c 100644 --- a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js @@ -9,6 +9,11 @@ */ PIXI.PrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -18,11 +23,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 */ @@ -36,6 +44,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -60,14 +69,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); @@ -78,7 +88,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'); @@ -92,9 +101,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/StripShader.js b/src/pixi/renderers/webgl/shaders/StripShader.js index 11f13ad..8fefe51 100644 --- a/src/pixi/renderers/webgl/shaders/StripShader.js +++ b/src/pixi/renderers/webgl/shaders/StripShader.js @@ -2,20 +2,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;', @@ -30,9 +47,11 @@ '}' ]; - /** - * @property {array} fragmentSrc - The fragment shader. - */ + /** + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -56,10 +75,12 @@ this.init(); }; +PIXI.StripShader.prototype.constructor = PIXI.StripShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.StripShader.prototype.init = function() { @@ -88,9 +109,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.StripShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/utils/FilterTexture.js b/src/pixi/renderers/webgl/utils/FilterTexture.js index 9dada23..389acbe 100644 --- a/src/pixi/renderers/webgl/utils/FilterTexture.js +++ b/src/pixi/renderers/webgl/utils/FilterTexture.js @@ -9,7 +9,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) { @@ -19,11 +18,24 @@ */ 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); @@ -44,9 +56,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() @@ -75,14 +89,14 @@ gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width , height , 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - // console.log( width, width ) // update the stencil buffer width and height gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width , height ); }; /** -* Destroys the filter texture +* Destroys the filter texture. +* * @method destroy */ PIXI.FilterTexture.prototype.destroy = function() diff --git a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js index c73728f..3de0ec9 100644 --- a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js @@ -3,31 +3,42 @@ */ /** -* @class WebGLMaskManager +* @class WebGLBlendModeManager * @constructor * @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLBlendModeManager = function() { + /** + * @property currentBlendMode + * @type Number + */ this.currentBlendMode = 99999; }; +PIXI.WebGLBlendModeManager.prototype.constructor = PIXI.WebGLBlendModeManager; + +/** + * 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 +* 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]; @@ -36,7 +47,12 @@ return true; }; +/** +* Destroys this object. +* +* @method destroy +*/ PIXI.WebGLBlendModeManager.prototype.destroy = function() { this.gl = null; -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js index 0d08e47..0bdbbe4 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -8,27 +8,66 @@ * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java */ +/** +* @class WebGLFastSpriteBatch +* @constructor +*/ PIXI.WebGLFastSpriteBatch = function() { - - + /** + * @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) @@ -41,21 +80,58 @@ 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; @@ -66,7 +142,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); @@ -75,6 +150,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; @@ -85,15 +165,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]; @@ -119,6 +204,10 @@ this.flush(); }; +/** + * @method renderSprite + * @param sprite {Sprite} + */ PIXI.WebGLFastSpriteBatch.prototype.renderSprite = function(sprite) { //sprite = children[i]; @@ -137,7 +226,6 @@ uvs = sprite.texture._uvs; - width = sprite.texture.frame.width; height = sprite.texture.frame.height; @@ -257,9 +345,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; @@ -272,7 +362,6 @@ gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); // upload the verts to the buffer - if(this.currentBatchSize > ( this.size * 0.5 ) ) { @@ -285,7 +374,6 @@ gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, this.currentBatchSize * 6, gl.UNSIGNED_SHORT, 0); @@ -297,11 +385,17 @@ }; +/** + * @method stop + */ PIXI.WebGLFastSpriteBatch.prototype.stop = function() { this.flush(); }; +/** + * @method start + */ PIXI.WebGLFastSpriteBatch.prototype.start = function() { var gl = this.gl; @@ -329,8 +423,5 @@ 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); - }; - - diff --git a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js index 9bb9195..359a834 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js @@ -5,22 +5,33 @@ /** * @class WebGLFilterManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLFilterManager = function() { + /** + * @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 */ @@ -33,7 +44,6 @@ }; /** -* * @method begin * @param renderSession {RenderSession} * @param buffer {ArrayBuffer} @@ -44,14 +54,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 */ @@ -64,7 +74,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); @@ -126,9 +135,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() @@ -211,7 +220,6 @@ this.offsetX -= filterArea.x; this.offsetY -= filterArea.y; - var sizeX = this.width; var sizeY = this.height; @@ -239,9 +247,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; @@ -280,10 +286,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 @@ -300,9 +302,9 @@ this.applyFilterPass(filter, filterArea, sizeX, sizeY); // 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); + // 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); @@ -311,7 +313,8 @@ /** -* 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 @@ -351,7 +354,6 @@ filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; } - // console.log(this.uvArray ) shader.syncUniforms(); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); @@ -372,7 +374,8 @@ }; /** -* Initialises the shader buffers +* Initialises the shader buffers. +* * @method initShaderBuffers */ PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() @@ -385,7 +388,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, @@ -394,11 +396,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, @@ -407,10 +405,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, @@ -418,21 +413,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() diff --git a/src/pixi/renderers/webgl/utils/WebGLGraphics.js b/src/pixi/renderers/webgl/utils/WebGLGraphics.js index 4de401d..9ea5a53 100644 --- a/src/pixi/renderers/webgl/utils/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/utils/WebGLGraphics.js @@ -11,7 +11,6 @@ */ PIXI.WebGLGraphics = function() { - }; /** @@ -120,7 +119,6 @@ webGL.data = []; webGL.lastIndex = 0; } - var webGLData; @@ -131,8 +129,6 @@ { var data = graphics.graphicsData[i]; - - if(data.type === PIXI.Graphics.POLY) { // need to add the points the the graphics object.. @@ -189,7 +185,6 @@ } } - webGL.lastIndex++; } @@ -201,7 +196,13 @@ } }; - +/** + * @static + * @private + * @method switchMode + * @param webGL {WebGLContext} + * @param type {Number} + */ PIXI.WebGLGraphics.switchMode = function(webGL, type) { var webGLData; @@ -308,7 +309,6 @@ */ PIXI.WebGLGraphics.buildRoundedRectangle = function(graphicsData, webGLData) { - var points = graphicsData.points; var x = points[0]; var y = points[1]; @@ -316,7 +316,6 @@ 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)); @@ -324,7 +323,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; @@ -368,8 +366,8 @@ }; /** - * 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 * * @static * @private @@ -383,6 +381,7 @@ * @return {Array} */ PIXI.WebGLGraphics.quadraticBezierCurve = function(fromX, fromY, cpX, cpY, toX, toY) { + var xa, ya, xb, @@ -718,13 +717,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; @@ -776,6 +774,15 @@ }; +/** + * 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; @@ -818,6 +825,11 @@ PIXI.WebGLGraphics.graphicsDataPool = []; +/** + * @class WebGLGraphicsData + * @private + * @static + */ PIXI.WebGLGraphicsData = function(gl) { this.gl = gl; @@ -834,6 +846,9 @@ this.dirty = true; }; +/** + * @method reset + */ PIXI.WebGLGraphicsData.prototype.reset = function() { this.points = []; @@ -841,6 +856,9 @@ this.lastIndex = 0; }; +/** + * @method upload + */ PIXI.WebGLGraphicsData.prototype.upload = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js index 181f560..607d5dd 100644 --- a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js @@ -5,16 +5,17 @@ /** * @class WebGLMaskManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLMaskManager = function() { - //this.setContext(gl); }; +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 */ @@ -24,10 +25,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) { @@ -44,10 +46,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) { @@ -55,9 +58,9 @@ 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() diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js index b597698..a15974e 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js @@ -5,38 +5,54 @@ /** * @class WebGLShaderManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLShaderManager = function() { - + /** + * @property maxAttibs + * @type Number + */ this.maxAttibs = 10; + + /** + * @property attribState + * @type Array + */ this.attribState = []; + + /** + * @property tempAttribState + * @type Array + */ this.tempAttribState = []; - for (var i = 0; i < this.maxAttibs; i++) { + for (var i = 0; i < this.maxAttibs; i++) + { this.attribState[i] = false; } + /** + * @property stack + * @type Array + */ this.stack = []; - - //this.setContext(gl); - // the final one is used for the rendering strips + }; +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 @@ -53,16 +69,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++) @@ -97,6 +112,12 @@ } }; +/** +* Sets the current shader. +* +* @method setShader +* @param shader {Any} +*/ PIXI.WebGLShaderManager.prototype.setShader = function(shader) { if(this._currentId === shader._UID)return false; @@ -112,7 +133,8 @@ }; /** -* Destroys +* Destroys this object. +* * @method destroy */ PIXI.WebGLShaderManager.prototype.destroy = function() @@ -133,4 +155,3 @@ this.gl = null; }; - diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js index f6cc024..995aa9b 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js @@ -2,27 +2,44 @@ * @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 +* @private +*/ PIXI.initDefaultShaders = function() { - - // PIXI.stripShader = new PIXI.StripShader(); -// PIXI.stripShader.init(); - }; +/** +* @method CompileVertexShader +* @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 +* @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 +* @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"); @@ -30,7 +47,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; } @@ -38,6 +56,13 @@ return shader; }; +/** +* @method compileProgram +* @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); @@ -49,7 +74,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"); } diff --git a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js index 4d59c80..f8a4bd7 100755 --- a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js @@ -13,15 +13,10 @@ * @class WebGLSpriteBatch * @private * @constructor - * @param gl {WebGLContext} the current WebGL drawing context - * */ PIXI.WebGLSpriteBatch = function() { - /** - * - * * @property vertSize * @type Number */ @@ -47,7 +42,6 @@ */ this.vertices = new Float32Array(numVerts); - //index data /** * Holds the indices * @@ -56,6 +50,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) @@ -68,20 +66,58 @@ 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;', @@ -94,9 +130,7 @@ }; /** -* * @method setContext -* * @param gl {WebGLContext} the current WebGL drawing context */ PIXI.WebGLSpriteBatch.prototype.setContext = function(gl) @@ -109,7 +143,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); @@ -125,15 +158,12 @@ 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) { @@ -144,9 +174,7 @@ }; /** -* * @method end -* */ PIXI.WebGLSpriteBatch.prototype.end = function() { @@ -154,16 +182,13 @@ }; /** -* * @method render -* * @param sprite {Sprite} the sprite to render when using this spritebatch */ PIXI.WebGLSpriteBatch.prototype.render = function(sprite) { var texture = sprite.texture; - //TODO set blend modes.. // check texture.. if(this.currentBatchSize >= this.size) @@ -270,9 +295,9 @@ }; /** -* 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) @@ -390,12 +415,10 @@ 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() { @@ -516,6 +539,12 @@ 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; @@ -532,7 +561,6 @@ // bind the current texture gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, size * 6, gl.UNSIGNED_SHORT, startIndex * 6 * 2); @@ -541,11 +569,8 @@ this.renderSession.drawCount++; }; - /** -* * @method stop -* */ PIXI.WebGLSpriteBatch.prototype.stop = function() { @@ -554,9 +579,7 @@ }; /** -* * @method start -* */ PIXI.WebGLSpriteBatch.prototype.start = function() { @@ -564,12 +587,12 @@ }; /** -* Destroys the SpriteBatch +* Destroys the SpriteBatch. +* * @method destroy */ PIXI.WebGLSpriteBatch.prototype.destroy = function() { - this.vertices = null; this.indices = null; diff --git a/src/pixi/renderers/webgl/utils/WebGLStencilManager.js b/src/pixi/renderers/webgl/utils/WebGLStencilManager.js index f841e6f..367d7dc 100644 --- a/src/pixi/renderers/webgl/utils/WebGLStencilManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLStencilManager.js @@ -5,21 +5,18 @@ /** * @class WebGLStencilManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ 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 */ @@ -29,10 +26,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) { @@ -60,7 +59,6 @@ if(webGLData.mode === 1) { - gl.drawElements(gl.TRIANGLE_FAN, webGLData.indices.length - 4, gl.UNSIGNED_SHORT, 0 ); if(this.reverse) @@ -119,7 +117,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; @@ -182,6 +187,12 @@ } }; +/** + * @method popStencil + * @param graphics {Graphics} + * @param webGLData {Array} + * @param renderSession {Object} + */ PIXI.WebGLStencilManager.prototype.popStencil = function(graphics, webGLData, renderSession) { var gl = this.gl; @@ -272,7 +283,8 @@ }; /** -* Destroys the mask stack +* Destroys the mask stack. +* * @method destroy */ PIXI.WebGLStencilManager.prototype.destroy = function() diff --git a/src/pixi/text/BitmapText.js b/src/pixi/text/BitmapText.js index cd84a6b..a1d20af 100644 --- a/src/pixi/text/BitmapText.js +++ b/src/pixi/text/BitmapText.js @@ -3,7 +3,7 @@ */ /** - * 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. @@ -20,11 +20,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; }; @@ -33,10 +64,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) { @@ -47,7 +78,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 @@ -82,11 +113,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); @@ -100,12 +131,14 @@ } var charData = data.chars[charCode]; + if(!charData) continue; 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; @@ -116,6 +149,7 @@ maxLineWidth = Math.max(maxLineWidth, pos.x); var lineAlignOffsets = []; + for(i = 0; i <= line; i++) { var alignOffset = 0; @@ -133,6 +167,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. @@ -156,23 +191,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; }; diff --git a/src/pixi/text/Text.js b/src/pixi/text/Text.js index ba05f6e..e25f082 100644 --- a/src/pixi/text/Text.js +++ b/src/pixi/text/Text.js @@ -1,12 +1,11 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * - Modified by Tom Slezakowski http://www.tomslezakowski.com @TomSlezakowski (24/03/2014) - Added dropShadowColor. + * Modified by Tom Slezakowski http://www.tomslezakowski.com @TomSlezakowski (24/03/2014) - Added dropShadowColor. */ /** - * A Text Object will create a line(s) of text. To split a line you can use '\n' - * or add a wordWrap property set to true and and wordWrapWidth property with a value - * in the style object + * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string, + * or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object. * * @class Text * @extends Sprite @@ -38,29 +37,30 @@ /** * The canvas 2d context that everything is drawn with * @property context - * @type HTMLCanvasElement 2d Context + * @type HTMLCanvasElement */ this.context = this.canvas.getContext('2d'); - + /** + * The resolution of the canvas. + * @property resolution + * @type Number + */ this.resolution = 1; - PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); this.setText(text); this.setStyle(style); - }; // constructor PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); PIXI.Text.prototype.constructor = PIXI.Text; - /** - * The width of the sprite, setting this will actually modify the scale to achieve the value set + * The width of the Text, setting this will actually modify the scale to achieve the value set * * @property width * @type Number @@ -107,7 +107,6 @@ } }); - /** * Set the style of the text * @@ -146,16 +145,15 @@ }; /** - * Set the copy for the text object. To split a line you can use '\n' + * Set the copy for the text object. To split a line you can use '\n'. * * @method setText - * @param {String} text The copy that you would like the text to display + * @param text {String} The copy that you would like the text to display */ PIXI.Text.prototype.setText = function(text) { this.text = text.toString() || ' '; this.dirty = true; - }; /** @@ -213,7 +211,6 @@ var linePositionX; var linePositionY; - if(this.style.dropShadow) { this.context.fillStyle = this.style.dropShadowColor; @@ -275,7 +272,6 @@ // if(dropShadow) } - this.updateTexture(); }; @@ -297,7 +293,6 @@ // update the dirty base textures this.texture.baseTexture.dirty(); - }; /** @@ -315,18 +310,15 @@ this.updateText(); this.dirty = false; - - } PIXI.Sprite.prototype._renderWebGL.call(this, renderSession); }; - /** -* Renders the object using the WebGL renderer +* Renders the object using the Canvas renderer * -* @method _renderWebGL +* @method _renderCanvas * @param renderSession {RenderSession} * @private */ @@ -344,9 +336,9 @@ }; /* - * http://stackoverflow.com/users/34441/ellisbben - * great solution to the problem! - * returns the height of the given font + * Determine the font height. Based on http://stackoverflow.com/users/34441/ellisbben - a great solution to the problem! + * Returns the height of the given font. + * Warning: This creates DOM elements each time it is called. * * @method determineFontHeight * @param fontStyle {Object} @@ -425,7 +417,7 @@ }; /** - * Destroys this text object + * Destroys this text object. * * @method destroy * @param destroyBaseTexture {Boolean} whether to destroy the base texture as well diff --git a/src/pixi/textures/BaseTexture.js b/src/pixi/textures/BaseTexture.js index 71763c6..4535f3e 100644 --- a/src/pixi/textures/BaseTexture.js +++ b/src/pixi/textures/BaseTexture.js @@ -7,7 +7,7 @@ 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 @@ -45,6 +45,7 @@ /** * The scale mode to apply when scaling this texture + * * @property scaleMode * @type PIXI.scaleModes * @default PIXI.scaleModes.LINEAR @@ -52,7 +53,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 @@ -61,34 +62,42 @@ 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._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 texture updating... // TODO - this needs to be addressed - this._dirty = [true, true, true, true]; + /** + * @property _dirty + * @type Array + * @private + */ + this._dirty = [true, true, true, true]; if(!source)return; @@ -101,8 +110,8 @@ } else { - var scope = this; + this.source.onload = function() { scope.hasLoaded = true; @@ -114,19 +123,29 @@ // 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; + + /** + * @property _powerOf2 + * @type Boolean + * @private + */ this._powerOf2 = false; - - }; PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture; + PIXI.EventTarget.mixin(PIXI.BaseTexture.prototype); /** @@ -177,6 +196,11 @@ this.source.src = newSrc; }; +/** + * Sets all glTextures to be dirty. + * + * @method dirty + */ PIXI.BaseTexture.prototype.dirty = function() { for (var i = 0; i < this._glTextures.length; i++) @@ -186,8 +210,8 @@ }; /** - * 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 + * 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 @@ -204,7 +228,6 @@ if(!baseTexture) { - // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 var image = new Image();//document.createElement('img'); @@ -229,8 +252,7 @@ }; /** - * 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 @@ -255,5 +277,3 @@ return baseTexture; }; - - diff --git a/src/pixi/textures/RenderTexture.js b/src/pixi/textures/RenderTexture.js index a38283c..2f02ff3 100644 --- a/src/pixi/textures/RenderTexture.js +++ b/src/pixi/textures/RenderTexture.js @@ -3,12 +3,11 @@ */ /** - * A RenderTexture is a special texture that allows any pixi displayObject to be rendered to it. + * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. * - * __Hint__: All DisplayObjects (exmpl. Sprites) that render on RenderTexture should be preloaded. - * Otherwise black rectangles will be drawn instead. + * __Hint__: All DisplayObjects (i.e. Sprites) that render to a 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: + * 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"); @@ -18,7 +17,7 @@ * 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: + * 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); @@ -29,6 +28,7 @@ * @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 */ @@ -96,7 +96,12 @@ new PIXI.Rectangle(0, 0, this.width, this.height) ); - // each render texture can only belong to one renderer at the moment if its webGL + /** + * 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) @@ -117,6 +122,10 @@ this.baseTexture.source = this.textureBuffer.canvas; } + /** + * @property valid + * @type Boolean + */ this.valid = true; this._updateUvs(); @@ -126,7 +135,7 @@ PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture; /** - * Resize the RenderTexture. + * Resizes the RenderTexture. * * @method resize * @param width {Number} The width to resize to. @@ -139,7 +148,6 @@ this.valid = (width > 0 && height > 0); - this.width = this.frame.width = this.crop.width = width; this.height = this.frame.height = this.crop.height = height; @@ -182,7 +190,8 @@ * * @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, matrix, clear) @@ -230,7 +239,8 @@ * * @method renderCanvas * @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.renderCanvas = function(displayObject, matrix, clear) @@ -266,6 +276,7 @@ * Will return a HTML Image of the texture * * @method getImage + * @return {HTMLImage} */ PIXI.RenderTexture.prototype.getImage = function() { @@ -275,15 +286,22 @@ }; /** - * Will return a a base64 string of the texture + * Will return a a base64 encoded string of this texture. It works by calling RenderTexture.getCanvas and then running toDataURL on that. * - * @method getImage + * @method getBase64 + * @return {String} A base64 encoded string of the texture. */ PIXI.RenderTexture.prototype.getBase64 = function() { return this.getCanvas().toDataURL(); }; +/** + * Creates a Canvas element, renders this RenderTexture to it and then returns it. + * + * @method getCanvas + * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. + */ PIXI.RenderTexture.prototype.getCanvas = function() { if (this.renderer.type === PIXI.WEBGL_RENDERER) @@ -322,4 +340,3 @@ }; PIXI.RenderTexture.tempMatrix = new PIXI.Matrix(); - diff --git a/src/pixi/textures/Texture.js b/src/pixi/textures/Texture.js index 6b40986..02b6513 100644 --- a/src/pixi/textures/Texture.js +++ b/src/pixi/textures/Texture.js @@ -9,7 +9,7 @@ /** * 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 @@ -57,7 +57,7 @@ this.frame = frame; /** - * The trim point + * The texture trim data. * * @property trim * @type Rectangle @@ -65,7 +65,7 @@ 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 @@ -83,9 +83,9 @@ /** * The WebGL UV data cache. * - * @private * @property _uvs * @type Object + * @private */ this._uvs = null; @@ -132,7 +132,6 @@ * Called when the base texture is loaded * * @method onBaseTextureLoaded - * @param event * @private */ PIXI.Texture.prototype.onBaseTextureLoaded = function() @@ -201,7 +200,7 @@ /** * Updates the internal WebGL UV cache. * - * @method _updateWebGLuvs + * @method _updateUvs * @private */ PIXI.Texture.prototype._updateUvs = function() @@ -223,12 +222,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 @@ -251,8 +249,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 @@ -267,8 +265,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 @@ -284,14 +281,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) { @@ -299,12 +295,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) { @@ -314,7 +310,6 @@ return texture; }; - PIXI.TextureUvs = function() { this.x0 = 0; diff --git a/src/pixi/utils/Detector.js b/src/pixi/utils/Detector.js index c0bd1ed..33a97a9 100644 --- a/src/pixi/utils/Detector.js +++ b/src/pixi/utils/Detector.js @@ -44,9 +44,10 @@ /** * 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 diff --git a/src/pixi/utils/EventTarget.js b/src/pixi/utils/EventTarget.js index 4e701d9..32536e3 100644 --- a/src/pixi/utils/EventTarget.js +++ b/src/pixi/utils/EventTarget.js @@ -4,7 +4,7 @@ */ /** - * Originally based on https://github.com/mrdoob/eventtarget.js/ from mr DOob. + * Originally based on https://github.com/mrdoob/eventtarget.js/ from mr Doob. * Currently takes inspiration from the nodejs EventEmitter, EventEmitter3, and smokesignals */ @@ -18,7 +18,7 @@ * PIXI.EventTarget.mixin(MyEmitter.prototype); * * var em = new MyEmitter(); - * em.emit('eventName', 'some data', 'some moar data', {}, null, ...); + * em.emit('eventName', 'some data', 'some more data', {}, null, ...); */ PIXI.EventTarget = { /** diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js index daa8b64..79d038a 100644 --- a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -9,7 +9,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -17,18 +23,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;', @@ -38,6 +46,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -65,14 +74,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); @@ -84,7 +94,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'); @@ -98,9 +107,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiFastShader.js b/src/pixi/renderers/webgl/shaders/PixiFastShader.js index 4fb3fe2..bb46419 100644 --- a/src/pixi/renderers/webgl/shaders/PixiFastShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiFastShader.js @@ -1,6 +1,5 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -10,6 +9,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -19,12 +23,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;', @@ -37,8 +45,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -69,24 +79,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); @@ -111,8 +122,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? @@ -128,14 +137,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiShader.js b/src/pixi/renderers/webgl/shaders/PixiShader.js index d76ec03..725dce2 100644 --- a/src/pixi/renderers/webgl/shaders/PixiShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiShader.js @@ -6,9 +6,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++; /** @@ -18,13 +24,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;', @@ -36,21 +46,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() { @@ -71,12 +104,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) { @@ -101,6 +133,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 * @@ -316,7 +349,8 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy */ PIXI.PixiShader.prototype.destroy = function() @@ -329,7 +363,8 @@ }; /** -* The Default Vertex shader source +* The Default Vertex shader source. +* * @property defaultVertexSrc * @type String */ diff --git a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js index 3a82be2..0f6854c 100644 --- a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js @@ -9,6 +9,11 @@ */ PIXI.PrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -18,11 +23,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 */ @@ -36,6 +44,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -60,14 +69,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); @@ -78,7 +88,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'); @@ -92,9 +101,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/StripShader.js b/src/pixi/renderers/webgl/shaders/StripShader.js index 11f13ad..8fefe51 100644 --- a/src/pixi/renderers/webgl/shaders/StripShader.js +++ b/src/pixi/renderers/webgl/shaders/StripShader.js @@ -2,20 +2,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;', @@ -30,9 +47,11 @@ '}' ]; - /** - * @property {array} fragmentSrc - The fragment shader. - */ + /** + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -56,10 +75,12 @@ this.init(); }; +PIXI.StripShader.prototype.constructor = PIXI.StripShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.StripShader.prototype.init = function() { @@ -88,9 +109,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.StripShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/utils/FilterTexture.js b/src/pixi/renderers/webgl/utils/FilterTexture.js index 9dada23..389acbe 100644 --- a/src/pixi/renderers/webgl/utils/FilterTexture.js +++ b/src/pixi/renderers/webgl/utils/FilterTexture.js @@ -9,7 +9,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) { @@ -19,11 +18,24 @@ */ 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); @@ -44,9 +56,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() @@ -75,14 +89,14 @@ gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width , height , 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - // console.log( width, width ) // update the stencil buffer width and height gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width , height ); }; /** -* Destroys the filter texture +* Destroys the filter texture. +* * @method destroy */ PIXI.FilterTexture.prototype.destroy = function() diff --git a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js index c73728f..3de0ec9 100644 --- a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js @@ -3,31 +3,42 @@ */ /** -* @class WebGLMaskManager +* @class WebGLBlendModeManager * @constructor * @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLBlendModeManager = function() { + /** + * @property currentBlendMode + * @type Number + */ this.currentBlendMode = 99999; }; +PIXI.WebGLBlendModeManager.prototype.constructor = PIXI.WebGLBlendModeManager; + +/** + * 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 +* 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]; @@ -36,7 +47,12 @@ return true; }; +/** +* Destroys this object. +* +* @method destroy +*/ PIXI.WebGLBlendModeManager.prototype.destroy = function() { this.gl = null; -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js index 0d08e47..0bdbbe4 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -8,27 +8,66 @@ * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java */ +/** +* @class WebGLFastSpriteBatch +* @constructor +*/ PIXI.WebGLFastSpriteBatch = function() { - - + /** + * @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) @@ -41,21 +80,58 @@ 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; @@ -66,7 +142,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); @@ -75,6 +150,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; @@ -85,15 +165,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]; @@ -119,6 +204,10 @@ this.flush(); }; +/** + * @method renderSprite + * @param sprite {Sprite} + */ PIXI.WebGLFastSpriteBatch.prototype.renderSprite = function(sprite) { //sprite = children[i]; @@ -137,7 +226,6 @@ uvs = sprite.texture._uvs; - width = sprite.texture.frame.width; height = sprite.texture.frame.height; @@ -257,9 +345,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; @@ -272,7 +362,6 @@ gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); // upload the verts to the buffer - if(this.currentBatchSize > ( this.size * 0.5 ) ) { @@ -285,7 +374,6 @@ gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, this.currentBatchSize * 6, gl.UNSIGNED_SHORT, 0); @@ -297,11 +385,17 @@ }; +/** + * @method stop + */ PIXI.WebGLFastSpriteBatch.prototype.stop = function() { this.flush(); }; +/** + * @method start + */ PIXI.WebGLFastSpriteBatch.prototype.start = function() { var gl = this.gl; @@ -329,8 +423,5 @@ 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); - }; - - diff --git a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js index 9bb9195..359a834 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js @@ -5,22 +5,33 @@ /** * @class WebGLFilterManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLFilterManager = function() { + /** + * @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 */ @@ -33,7 +44,6 @@ }; /** -* * @method begin * @param renderSession {RenderSession} * @param buffer {ArrayBuffer} @@ -44,14 +54,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 */ @@ -64,7 +74,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); @@ -126,9 +135,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() @@ -211,7 +220,6 @@ this.offsetX -= filterArea.x; this.offsetY -= filterArea.y; - var sizeX = this.width; var sizeY = this.height; @@ -239,9 +247,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; @@ -280,10 +286,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 @@ -300,9 +302,9 @@ this.applyFilterPass(filter, filterArea, sizeX, sizeY); // 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); + // 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); @@ -311,7 +313,8 @@ /** -* 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 @@ -351,7 +354,6 @@ filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; } - // console.log(this.uvArray ) shader.syncUniforms(); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); @@ -372,7 +374,8 @@ }; /** -* Initialises the shader buffers +* Initialises the shader buffers. +* * @method initShaderBuffers */ PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() @@ -385,7 +388,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, @@ -394,11 +396,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, @@ -407,10 +405,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, @@ -418,21 +413,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() diff --git a/src/pixi/renderers/webgl/utils/WebGLGraphics.js b/src/pixi/renderers/webgl/utils/WebGLGraphics.js index 4de401d..9ea5a53 100644 --- a/src/pixi/renderers/webgl/utils/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/utils/WebGLGraphics.js @@ -11,7 +11,6 @@ */ PIXI.WebGLGraphics = function() { - }; /** @@ -120,7 +119,6 @@ webGL.data = []; webGL.lastIndex = 0; } - var webGLData; @@ -131,8 +129,6 @@ { var data = graphics.graphicsData[i]; - - if(data.type === PIXI.Graphics.POLY) { // need to add the points the the graphics object.. @@ -189,7 +185,6 @@ } } - webGL.lastIndex++; } @@ -201,7 +196,13 @@ } }; - +/** + * @static + * @private + * @method switchMode + * @param webGL {WebGLContext} + * @param type {Number} + */ PIXI.WebGLGraphics.switchMode = function(webGL, type) { var webGLData; @@ -308,7 +309,6 @@ */ PIXI.WebGLGraphics.buildRoundedRectangle = function(graphicsData, webGLData) { - var points = graphicsData.points; var x = points[0]; var y = points[1]; @@ -316,7 +316,6 @@ 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)); @@ -324,7 +323,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; @@ -368,8 +366,8 @@ }; /** - * 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 * * @static * @private @@ -383,6 +381,7 @@ * @return {Array} */ PIXI.WebGLGraphics.quadraticBezierCurve = function(fromX, fromY, cpX, cpY, toX, toY) { + var xa, ya, xb, @@ -718,13 +717,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; @@ -776,6 +774,15 @@ }; +/** + * 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; @@ -818,6 +825,11 @@ PIXI.WebGLGraphics.graphicsDataPool = []; +/** + * @class WebGLGraphicsData + * @private + * @static + */ PIXI.WebGLGraphicsData = function(gl) { this.gl = gl; @@ -834,6 +846,9 @@ this.dirty = true; }; +/** + * @method reset + */ PIXI.WebGLGraphicsData.prototype.reset = function() { this.points = []; @@ -841,6 +856,9 @@ this.lastIndex = 0; }; +/** + * @method upload + */ PIXI.WebGLGraphicsData.prototype.upload = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js index 181f560..607d5dd 100644 --- a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js @@ -5,16 +5,17 @@ /** * @class WebGLMaskManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLMaskManager = function() { - //this.setContext(gl); }; +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 */ @@ -24,10 +25,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) { @@ -44,10 +46,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) { @@ -55,9 +58,9 @@ 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() diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js index b597698..a15974e 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js @@ -5,38 +5,54 @@ /** * @class WebGLShaderManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLShaderManager = function() { - + /** + * @property maxAttibs + * @type Number + */ this.maxAttibs = 10; + + /** + * @property attribState + * @type Array + */ this.attribState = []; + + /** + * @property tempAttribState + * @type Array + */ this.tempAttribState = []; - for (var i = 0; i < this.maxAttibs; i++) { + for (var i = 0; i < this.maxAttibs; i++) + { this.attribState[i] = false; } + /** + * @property stack + * @type Array + */ this.stack = []; - - //this.setContext(gl); - // the final one is used for the rendering strips + }; +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 @@ -53,16 +69,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++) @@ -97,6 +112,12 @@ } }; +/** +* Sets the current shader. +* +* @method setShader +* @param shader {Any} +*/ PIXI.WebGLShaderManager.prototype.setShader = function(shader) { if(this._currentId === shader._UID)return false; @@ -112,7 +133,8 @@ }; /** -* Destroys +* Destroys this object. +* * @method destroy */ PIXI.WebGLShaderManager.prototype.destroy = function() @@ -133,4 +155,3 @@ this.gl = null; }; - diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js index f6cc024..995aa9b 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js @@ -2,27 +2,44 @@ * @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 +* @private +*/ PIXI.initDefaultShaders = function() { - - // PIXI.stripShader = new PIXI.StripShader(); -// PIXI.stripShader.init(); - }; +/** +* @method CompileVertexShader +* @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 +* @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 +* @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"); @@ -30,7 +47,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; } @@ -38,6 +56,13 @@ return shader; }; +/** +* @method compileProgram +* @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); @@ -49,7 +74,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"); } diff --git a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js index 4d59c80..f8a4bd7 100755 --- a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js @@ -13,15 +13,10 @@ * @class WebGLSpriteBatch * @private * @constructor - * @param gl {WebGLContext} the current WebGL drawing context - * */ PIXI.WebGLSpriteBatch = function() { - /** - * - * * @property vertSize * @type Number */ @@ -47,7 +42,6 @@ */ this.vertices = new Float32Array(numVerts); - //index data /** * Holds the indices * @@ -56,6 +50,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) @@ -68,20 +66,58 @@ 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;', @@ -94,9 +130,7 @@ }; /** -* * @method setContext -* * @param gl {WebGLContext} the current WebGL drawing context */ PIXI.WebGLSpriteBatch.prototype.setContext = function(gl) @@ -109,7 +143,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); @@ -125,15 +158,12 @@ 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) { @@ -144,9 +174,7 @@ }; /** -* * @method end -* */ PIXI.WebGLSpriteBatch.prototype.end = function() { @@ -154,16 +182,13 @@ }; /** -* * @method render -* * @param sprite {Sprite} the sprite to render when using this spritebatch */ PIXI.WebGLSpriteBatch.prototype.render = function(sprite) { var texture = sprite.texture; - //TODO set blend modes.. // check texture.. if(this.currentBatchSize >= this.size) @@ -270,9 +295,9 @@ }; /** -* 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) @@ -390,12 +415,10 @@ 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() { @@ -516,6 +539,12 @@ 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; @@ -532,7 +561,6 @@ // bind the current texture gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, size * 6, gl.UNSIGNED_SHORT, startIndex * 6 * 2); @@ -541,11 +569,8 @@ this.renderSession.drawCount++; }; - /** -* * @method stop -* */ PIXI.WebGLSpriteBatch.prototype.stop = function() { @@ -554,9 +579,7 @@ }; /** -* * @method start -* */ PIXI.WebGLSpriteBatch.prototype.start = function() { @@ -564,12 +587,12 @@ }; /** -* Destroys the SpriteBatch +* Destroys the SpriteBatch. +* * @method destroy */ PIXI.WebGLSpriteBatch.prototype.destroy = function() { - this.vertices = null; this.indices = null; diff --git a/src/pixi/renderers/webgl/utils/WebGLStencilManager.js b/src/pixi/renderers/webgl/utils/WebGLStencilManager.js index f841e6f..367d7dc 100644 --- a/src/pixi/renderers/webgl/utils/WebGLStencilManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLStencilManager.js @@ -5,21 +5,18 @@ /** * @class WebGLStencilManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ 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 */ @@ -29,10 +26,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) { @@ -60,7 +59,6 @@ if(webGLData.mode === 1) { - gl.drawElements(gl.TRIANGLE_FAN, webGLData.indices.length - 4, gl.UNSIGNED_SHORT, 0 ); if(this.reverse) @@ -119,7 +117,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; @@ -182,6 +187,12 @@ } }; +/** + * @method popStencil + * @param graphics {Graphics} + * @param webGLData {Array} + * @param renderSession {Object} + */ PIXI.WebGLStencilManager.prototype.popStencil = function(graphics, webGLData, renderSession) { var gl = this.gl; @@ -272,7 +283,8 @@ }; /** -* Destroys the mask stack +* Destroys the mask stack. +* * @method destroy */ PIXI.WebGLStencilManager.prototype.destroy = function() diff --git a/src/pixi/text/BitmapText.js b/src/pixi/text/BitmapText.js index cd84a6b..a1d20af 100644 --- a/src/pixi/text/BitmapText.js +++ b/src/pixi/text/BitmapText.js @@ -3,7 +3,7 @@ */ /** - * 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. @@ -20,11 +20,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; }; @@ -33,10 +64,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) { @@ -47,7 +78,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 @@ -82,11 +113,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); @@ -100,12 +131,14 @@ } var charData = data.chars[charCode]; + if(!charData) continue; 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; @@ -116,6 +149,7 @@ maxLineWidth = Math.max(maxLineWidth, pos.x); var lineAlignOffsets = []; + for(i = 0; i <= line; i++) { var alignOffset = 0; @@ -133,6 +167,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. @@ -156,23 +191,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; }; diff --git a/src/pixi/text/Text.js b/src/pixi/text/Text.js index ba05f6e..e25f082 100644 --- a/src/pixi/text/Text.js +++ b/src/pixi/text/Text.js @@ -1,12 +1,11 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * - Modified by Tom Slezakowski http://www.tomslezakowski.com @TomSlezakowski (24/03/2014) - Added dropShadowColor. + * Modified by Tom Slezakowski http://www.tomslezakowski.com @TomSlezakowski (24/03/2014) - Added dropShadowColor. */ /** - * A Text Object will create a line(s) of text. To split a line you can use '\n' - * or add a wordWrap property set to true and and wordWrapWidth property with a value - * in the style object + * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string, + * or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object. * * @class Text * @extends Sprite @@ -38,29 +37,30 @@ /** * The canvas 2d context that everything is drawn with * @property context - * @type HTMLCanvasElement 2d Context + * @type HTMLCanvasElement */ this.context = this.canvas.getContext('2d'); - + /** + * The resolution of the canvas. + * @property resolution + * @type Number + */ this.resolution = 1; - PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); this.setText(text); this.setStyle(style); - }; // constructor PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); PIXI.Text.prototype.constructor = PIXI.Text; - /** - * The width of the sprite, setting this will actually modify the scale to achieve the value set + * The width of the Text, setting this will actually modify the scale to achieve the value set * * @property width * @type Number @@ -107,7 +107,6 @@ } }); - /** * Set the style of the text * @@ -146,16 +145,15 @@ }; /** - * Set the copy for the text object. To split a line you can use '\n' + * Set the copy for the text object. To split a line you can use '\n'. * * @method setText - * @param {String} text The copy that you would like the text to display + * @param text {String} The copy that you would like the text to display */ PIXI.Text.prototype.setText = function(text) { this.text = text.toString() || ' '; this.dirty = true; - }; /** @@ -213,7 +211,6 @@ var linePositionX; var linePositionY; - if(this.style.dropShadow) { this.context.fillStyle = this.style.dropShadowColor; @@ -275,7 +272,6 @@ // if(dropShadow) } - this.updateTexture(); }; @@ -297,7 +293,6 @@ // update the dirty base textures this.texture.baseTexture.dirty(); - }; /** @@ -315,18 +310,15 @@ this.updateText(); this.dirty = false; - - } PIXI.Sprite.prototype._renderWebGL.call(this, renderSession); }; - /** -* Renders the object using the WebGL renderer +* Renders the object using the Canvas renderer * -* @method _renderWebGL +* @method _renderCanvas * @param renderSession {RenderSession} * @private */ @@ -344,9 +336,9 @@ }; /* - * http://stackoverflow.com/users/34441/ellisbben - * great solution to the problem! - * returns the height of the given font + * Determine the font height. Based on http://stackoverflow.com/users/34441/ellisbben - a great solution to the problem! + * Returns the height of the given font. + * Warning: This creates DOM elements each time it is called. * * @method determineFontHeight * @param fontStyle {Object} @@ -425,7 +417,7 @@ }; /** - * Destroys this text object + * Destroys this text object. * * @method destroy * @param destroyBaseTexture {Boolean} whether to destroy the base texture as well diff --git a/src/pixi/textures/BaseTexture.js b/src/pixi/textures/BaseTexture.js index 71763c6..4535f3e 100644 --- a/src/pixi/textures/BaseTexture.js +++ b/src/pixi/textures/BaseTexture.js @@ -7,7 +7,7 @@ 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 @@ -45,6 +45,7 @@ /** * The scale mode to apply when scaling this texture + * * @property scaleMode * @type PIXI.scaleModes * @default PIXI.scaleModes.LINEAR @@ -52,7 +53,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 @@ -61,34 +62,42 @@ 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._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 texture updating... // TODO - this needs to be addressed - this._dirty = [true, true, true, true]; + /** + * @property _dirty + * @type Array + * @private + */ + this._dirty = [true, true, true, true]; if(!source)return; @@ -101,8 +110,8 @@ } else { - var scope = this; + this.source.onload = function() { scope.hasLoaded = true; @@ -114,19 +123,29 @@ // 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; + + /** + * @property _powerOf2 + * @type Boolean + * @private + */ this._powerOf2 = false; - - }; PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture; + PIXI.EventTarget.mixin(PIXI.BaseTexture.prototype); /** @@ -177,6 +196,11 @@ this.source.src = newSrc; }; +/** + * Sets all glTextures to be dirty. + * + * @method dirty + */ PIXI.BaseTexture.prototype.dirty = function() { for (var i = 0; i < this._glTextures.length; i++) @@ -186,8 +210,8 @@ }; /** - * 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 + * 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 @@ -204,7 +228,6 @@ if(!baseTexture) { - // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 var image = new Image();//document.createElement('img'); @@ -229,8 +252,7 @@ }; /** - * 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 @@ -255,5 +277,3 @@ return baseTexture; }; - - diff --git a/src/pixi/textures/RenderTexture.js b/src/pixi/textures/RenderTexture.js index a38283c..2f02ff3 100644 --- a/src/pixi/textures/RenderTexture.js +++ b/src/pixi/textures/RenderTexture.js @@ -3,12 +3,11 @@ */ /** - * A RenderTexture is a special texture that allows any pixi displayObject to be rendered to it. + * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. * - * __Hint__: All DisplayObjects (exmpl. Sprites) that render on RenderTexture should be preloaded. - * Otherwise black rectangles will be drawn instead. + * __Hint__: All DisplayObjects (i.e. Sprites) that render to a 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: + * 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"); @@ -18,7 +17,7 @@ * 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: + * 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); @@ -29,6 +28,7 @@ * @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 */ @@ -96,7 +96,12 @@ new PIXI.Rectangle(0, 0, this.width, this.height) ); - // each render texture can only belong to one renderer at the moment if its webGL + /** + * 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) @@ -117,6 +122,10 @@ this.baseTexture.source = this.textureBuffer.canvas; } + /** + * @property valid + * @type Boolean + */ this.valid = true; this._updateUvs(); @@ -126,7 +135,7 @@ PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture; /** - * Resize the RenderTexture. + * Resizes the RenderTexture. * * @method resize * @param width {Number} The width to resize to. @@ -139,7 +148,6 @@ this.valid = (width > 0 && height > 0); - this.width = this.frame.width = this.crop.width = width; this.height = this.frame.height = this.crop.height = height; @@ -182,7 +190,8 @@ * * @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, matrix, clear) @@ -230,7 +239,8 @@ * * @method renderCanvas * @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.renderCanvas = function(displayObject, matrix, clear) @@ -266,6 +276,7 @@ * Will return a HTML Image of the texture * * @method getImage + * @return {HTMLImage} */ PIXI.RenderTexture.prototype.getImage = function() { @@ -275,15 +286,22 @@ }; /** - * Will return a a base64 string of the texture + * Will return a a base64 encoded string of this texture. It works by calling RenderTexture.getCanvas and then running toDataURL on that. * - * @method getImage + * @method getBase64 + * @return {String} A base64 encoded string of the texture. */ PIXI.RenderTexture.prototype.getBase64 = function() { return this.getCanvas().toDataURL(); }; +/** + * Creates a Canvas element, renders this RenderTexture to it and then returns it. + * + * @method getCanvas + * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. + */ PIXI.RenderTexture.prototype.getCanvas = function() { if (this.renderer.type === PIXI.WEBGL_RENDERER) @@ -322,4 +340,3 @@ }; PIXI.RenderTexture.tempMatrix = new PIXI.Matrix(); - diff --git a/src/pixi/textures/Texture.js b/src/pixi/textures/Texture.js index 6b40986..02b6513 100644 --- a/src/pixi/textures/Texture.js +++ b/src/pixi/textures/Texture.js @@ -9,7 +9,7 @@ /** * 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 @@ -57,7 +57,7 @@ this.frame = frame; /** - * The trim point + * The texture trim data. * * @property trim * @type Rectangle @@ -65,7 +65,7 @@ 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 @@ -83,9 +83,9 @@ /** * The WebGL UV data cache. * - * @private * @property _uvs * @type Object + * @private */ this._uvs = null; @@ -132,7 +132,6 @@ * Called when the base texture is loaded * * @method onBaseTextureLoaded - * @param event * @private */ PIXI.Texture.prototype.onBaseTextureLoaded = function() @@ -201,7 +200,7 @@ /** * Updates the internal WebGL UV cache. * - * @method _updateWebGLuvs + * @method _updateUvs * @private */ PIXI.Texture.prototype._updateUvs = function() @@ -223,12 +222,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 @@ -251,8 +249,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 @@ -267,8 +265,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 @@ -284,14 +281,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) { @@ -299,12 +295,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) { @@ -314,7 +310,6 @@ return texture; }; - PIXI.TextureUvs = function() { this.x0 = 0; diff --git a/src/pixi/utils/Detector.js b/src/pixi/utils/Detector.js index c0bd1ed..33a97a9 100644 --- a/src/pixi/utils/Detector.js +++ b/src/pixi/utils/Detector.js @@ -44,9 +44,10 @@ /** * 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 diff --git a/src/pixi/utils/EventTarget.js b/src/pixi/utils/EventTarget.js index 4e701d9..32536e3 100644 --- a/src/pixi/utils/EventTarget.js +++ b/src/pixi/utils/EventTarget.js @@ -4,7 +4,7 @@ */ /** - * Originally based on https://github.com/mrdoob/eventtarget.js/ from mr DOob. + * Originally based on https://github.com/mrdoob/eventtarget.js/ from mr Doob. * Currently takes inspiration from the nodejs EventEmitter, EventEmitter3, and smokesignals */ @@ -18,7 +18,7 @@ * PIXI.EventTarget.mixin(MyEmitter.prototype); * * var em = new MyEmitter(); - * em.emit('eventName', 'some data', 'some moar data', {}, null, ...); + * em.emit('eventName', 'some data', 'some more data', {}, null, ...); */ PIXI.EventTarget = { /** diff --git a/src/pixi/utils/Polyk.js b/src/pixi/utils/Polyk.js index aaf3bdb..0e150b2 100644 --- a/src/pixi/utils/Polyk.js +++ b/src/pixi/utils/Polyk.js @@ -28,23 +28,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) { @@ -132,6 +130,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) { @@ -160,8 +159,8 @@ * Checks whether a shape is convex * * @method _convex - * * @private + * @return {Boolean} */ PIXI.PolyK._convex = function(ax, ay, bx, by, cx, cy, sign) { diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js index daa8b64..79d038a 100644 --- a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -9,7 +9,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -17,18 +23,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;', @@ -38,6 +46,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -65,14 +74,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); @@ -84,7 +94,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'); @@ -98,9 +107,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiFastShader.js b/src/pixi/renderers/webgl/shaders/PixiFastShader.js index 4fb3fe2..bb46419 100644 --- a/src/pixi/renderers/webgl/shaders/PixiFastShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiFastShader.js @@ -1,6 +1,5 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -10,6 +9,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -19,12 +23,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;', @@ -37,8 +45,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -69,24 +79,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); @@ -111,8 +122,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? @@ -128,14 +137,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiShader.js b/src/pixi/renderers/webgl/shaders/PixiShader.js index d76ec03..725dce2 100644 --- a/src/pixi/renderers/webgl/shaders/PixiShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiShader.js @@ -6,9 +6,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++; /** @@ -18,13 +24,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;', @@ -36,21 +46,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() { @@ -71,12 +104,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) { @@ -101,6 +133,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 * @@ -316,7 +349,8 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy */ PIXI.PixiShader.prototype.destroy = function() @@ -329,7 +363,8 @@ }; /** -* The Default Vertex shader source +* The Default Vertex shader source. +* * @property defaultVertexSrc * @type String */ diff --git a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js index 3a82be2..0f6854c 100644 --- a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js @@ -9,6 +9,11 @@ */ PIXI.PrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -18,11 +23,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 */ @@ -36,6 +44,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -60,14 +69,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); @@ -78,7 +88,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'); @@ -92,9 +101,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/StripShader.js b/src/pixi/renderers/webgl/shaders/StripShader.js index 11f13ad..8fefe51 100644 --- a/src/pixi/renderers/webgl/shaders/StripShader.js +++ b/src/pixi/renderers/webgl/shaders/StripShader.js @@ -2,20 +2,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;', @@ -30,9 +47,11 @@ '}' ]; - /** - * @property {array} fragmentSrc - The fragment shader. - */ + /** + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -56,10 +75,12 @@ this.init(); }; +PIXI.StripShader.prototype.constructor = PIXI.StripShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.StripShader.prototype.init = function() { @@ -88,9 +109,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.StripShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/utils/FilterTexture.js b/src/pixi/renderers/webgl/utils/FilterTexture.js index 9dada23..389acbe 100644 --- a/src/pixi/renderers/webgl/utils/FilterTexture.js +++ b/src/pixi/renderers/webgl/utils/FilterTexture.js @@ -9,7 +9,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) { @@ -19,11 +18,24 @@ */ 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); @@ -44,9 +56,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() @@ -75,14 +89,14 @@ gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width , height , 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - // console.log( width, width ) // update the stencil buffer width and height gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width , height ); }; /** -* Destroys the filter texture +* Destroys the filter texture. +* * @method destroy */ PIXI.FilterTexture.prototype.destroy = function() diff --git a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js index c73728f..3de0ec9 100644 --- a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js @@ -3,31 +3,42 @@ */ /** -* @class WebGLMaskManager +* @class WebGLBlendModeManager * @constructor * @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLBlendModeManager = function() { + /** + * @property currentBlendMode + * @type Number + */ this.currentBlendMode = 99999; }; +PIXI.WebGLBlendModeManager.prototype.constructor = PIXI.WebGLBlendModeManager; + +/** + * 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 +* 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]; @@ -36,7 +47,12 @@ return true; }; +/** +* Destroys this object. +* +* @method destroy +*/ PIXI.WebGLBlendModeManager.prototype.destroy = function() { this.gl = null; -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js index 0d08e47..0bdbbe4 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -8,27 +8,66 @@ * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java */ +/** +* @class WebGLFastSpriteBatch +* @constructor +*/ PIXI.WebGLFastSpriteBatch = function() { - - + /** + * @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) @@ -41,21 +80,58 @@ 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; @@ -66,7 +142,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); @@ -75,6 +150,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; @@ -85,15 +165,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]; @@ -119,6 +204,10 @@ this.flush(); }; +/** + * @method renderSprite + * @param sprite {Sprite} + */ PIXI.WebGLFastSpriteBatch.prototype.renderSprite = function(sprite) { //sprite = children[i]; @@ -137,7 +226,6 @@ uvs = sprite.texture._uvs; - width = sprite.texture.frame.width; height = sprite.texture.frame.height; @@ -257,9 +345,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; @@ -272,7 +362,6 @@ gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); // upload the verts to the buffer - if(this.currentBatchSize > ( this.size * 0.5 ) ) { @@ -285,7 +374,6 @@ gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, this.currentBatchSize * 6, gl.UNSIGNED_SHORT, 0); @@ -297,11 +385,17 @@ }; +/** + * @method stop + */ PIXI.WebGLFastSpriteBatch.prototype.stop = function() { this.flush(); }; +/** + * @method start + */ PIXI.WebGLFastSpriteBatch.prototype.start = function() { var gl = this.gl; @@ -329,8 +423,5 @@ 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); - }; - - diff --git a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js index 9bb9195..359a834 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js @@ -5,22 +5,33 @@ /** * @class WebGLFilterManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLFilterManager = function() { + /** + * @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 */ @@ -33,7 +44,6 @@ }; /** -* * @method begin * @param renderSession {RenderSession} * @param buffer {ArrayBuffer} @@ -44,14 +54,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 */ @@ -64,7 +74,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); @@ -126,9 +135,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() @@ -211,7 +220,6 @@ this.offsetX -= filterArea.x; this.offsetY -= filterArea.y; - var sizeX = this.width; var sizeY = this.height; @@ -239,9 +247,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; @@ -280,10 +286,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 @@ -300,9 +302,9 @@ this.applyFilterPass(filter, filterArea, sizeX, sizeY); // 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); + // 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); @@ -311,7 +313,8 @@ /** -* 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 @@ -351,7 +354,6 @@ filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; } - // console.log(this.uvArray ) shader.syncUniforms(); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); @@ -372,7 +374,8 @@ }; /** -* Initialises the shader buffers +* Initialises the shader buffers. +* * @method initShaderBuffers */ PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() @@ -385,7 +388,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, @@ -394,11 +396,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, @@ -407,10 +405,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, @@ -418,21 +413,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() diff --git a/src/pixi/renderers/webgl/utils/WebGLGraphics.js b/src/pixi/renderers/webgl/utils/WebGLGraphics.js index 4de401d..9ea5a53 100644 --- a/src/pixi/renderers/webgl/utils/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/utils/WebGLGraphics.js @@ -11,7 +11,6 @@ */ PIXI.WebGLGraphics = function() { - }; /** @@ -120,7 +119,6 @@ webGL.data = []; webGL.lastIndex = 0; } - var webGLData; @@ -131,8 +129,6 @@ { var data = graphics.graphicsData[i]; - - if(data.type === PIXI.Graphics.POLY) { // need to add the points the the graphics object.. @@ -189,7 +185,6 @@ } } - webGL.lastIndex++; } @@ -201,7 +196,13 @@ } }; - +/** + * @static + * @private + * @method switchMode + * @param webGL {WebGLContext} + * @param type {Number} + */ PIXI.WebGLGraphics.switchMode = function(webGL, type) { var webGLData; @@ -308,7 +309,6 @@ */ PIXI.WebGLGraphics.buildRoundedRectangle = function(graphicsData, webGLData) { - var points = graphicsData.points; var x = points[0]; var y = points[1]; @@ -316,7 +316,6 @@ 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)); @@ -324,7 +323,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; @@ -368,8 +366,8 @@ }; /** - * 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 * * @static * @private @@ -383,6 +381,7 @@ * @return {Array} */ PIXI.WebGLGraphics.quadraticBezierCurve = function(fromX, fromY, cpX, cpY, toX, toY) { + var xa, ya, xb, @@ -718,13 +717,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; @@ -776,6 +774,15 @@ }; +/** + * 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; @@ -818,6 +825,11 @@ PIXI.WebGLGraphics.graphicsDataPool = []; +/** + * @class WebGLGraphicsData + * @private + * @static + */ PIXI.WebGLGraphicsData = function(gl) { this.gl = gl; @@ -834,6 +846,9 @@ this.dirty = true; }; +/** + * @method reset + */ PIXI.WebGLGraphicsData.prototype.reset = function() { this.points = []; @@ -841,6 +856,9 @@ this.lastIndex = 0; }; +/** + * @method upload + */ PIXI.WebGLGraphicsData.prototype.upload = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js index 181f560..607d5dd 100644 --- a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js @@ -5,16 +5,17 @@ /** * @class WebGLMaskManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLMaskManager = function() { - //this.setContext(gl); }; +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 */ @@ -24,10 +25,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) { @@ -44,10 +46,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) { @@ -55,9 +58,9 @@ 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() diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js index b597698..a15974e 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js @@ -5,38 +5,54 @@ /** * @class WebGLShaderManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLShaderManager = function() { - + /** + * @property maxAttibs + * @type Number + */ this.maxAttibs = 10; + + /** + * @property attribState + * @type Array + */ this.attribState = []; + + /** + * @property tempAttribState + * @type Array + */ this.tempAttribState = []; - for (var i = 0; i < this.maxAttibs; i++) { + for (var i = 0; i < this.maxAttibs; i++) + { this.attribState[i] = false; } + /** + * @property stack + * @type Array + */ this.stack = []; - - //this.setContext(gl); - // the final one is used for the rendering strips + }; +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 @@ -53,16 +69,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++) @@ -97,6 +112,12 @@ } }; +/** +* Sets the current shader. +* +* @method setShader +* @param shader {Any} +*/ PIXI.WebGLShaderManager.prototype.setShader = function(shader) { if(this._currentId === shader._UID)return false; @@ -112,7 +133,8 @@ }; /** -* Destroys +* Destroys this object. +* * @method destroy */ PIXI.WebGLShaderManager.prototype.destroy = function() @@ -133,4 +155,3 @@ this.gl = null; }; - diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js index f6cc024..995aa9b 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js @@ -2,27 +2,44 @@ * @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 +* @private +*/ PIXI.initDefaultShaders = function() { - - // PIXI.stripShader = new PIXI.StripShader(); -// PIXI.stripShader.init(); - }; +/** +* @method CompileVertexShader +* @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 +* @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 +* @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"); @@ -30,7 +47,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; } @@ -38,6 +56,13 @@ return shader; }; +/** +* @method compileProgram +* @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); @@ -49,7 +74,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"); } diff --git a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js index 4d59c80..f8a4bd7 100755 --- a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js @@ -13,15 +13,10 @@ * @class WebGLSpriteBatch * @private * @constructor - * @param gl {WebGLContext} the current WebGL drawing context - * */ PIXI.WebGLSpriteBatch = function() { - /** - * - * * @property vertSize * @type Number */ @@ -47,7 +42,6 @@ */ this.vertices = new Float32Array(numVerts); - //index data /** * Holds the indices * @@ -56,6 +50,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) @@ -68,20 +66,58 @@ 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;', @@ -94,9 +130,7 @@ }; /** -* * @method setContext -* * @param gl {WebGLContext} the current WebGL drawing context */ PIXI.WebGLSpriteBatch.prototype.setContext = function(gl) @@ -109,7 +143,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); @@ -125,15 +158,12 @@ 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) { @@ -144,9 +174,7 @@ }; /** -* * @method end -* */ PIXI.WebGLSpriteBatch.prototype.end = function() { @@ -154,16 +182,13 @@ }; /** -* * @method render -* * @param sprite {Sprite} the sprite to render when using this spritebatch */ PIXI.WebGLSpriteBatch.prototype.render = function(sprite) { var texture = sprite.texture; - //TODO set blend modes.. // check texture.. if(this.currentBatchSize >= this.size) @@ -270,9 +295,9 @@ }; /** -* 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) @@ -390,12 +415,10 @@ 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() { @@ -516,6 +539,12 @@ 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; @@ -532,7 +561,6 @@ // bind the current texture gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, size * 6, gl.UNSIGNED_SHORT, startIndex * 6 * 2); @@ -541,11 +569,8 @@ this.renderSession.drawCount++; }; - /** -* * @method stop -* */ PIXI.WebGLSpriteBatch.prototype.stop = function() { @@ -554,9 +579,7 @@ }; /** -* * @method start -* */ PIXI.WebGLSpriteBatch.prototype.start = function() { @@ -564,12 +587,12 @@ }; /** -* Destroys the SpriteBatch +* Destroys the SpriteBatch. +* * @method destroy */ PIXI.WebGLSpriteBatch.prototype.destroy = function() { - this.vertices = null; this.indices = null; diff --git a/src/pixi/renderers/webgl/utils/WebGLStencilManager.js b/src/pixi/renderers/webgl/utils/WebGLStencilManager.js index f841e6f..367d7dc 100644 --- a/src/pixi/renderers/webgl/utils/WebGLStencilManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLStencilManager.js @@ -5,21 +5,18 @@ /** * @class WebGLStencilManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ 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 */ @@ -29,10 +26,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) { @@ -60,7 +59,6 @@ if(webGLData.mode === 1) { - gl.drawElements(gl.TRIANGLE_FAN, webGLData.indices.length - 4, gl.UNSIGNED_SHORT, 0 ); if(this.reverse) @@ -119,7 +117,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; @@ -182,6 +187,12 @@ } }; +/** + * @method popStencil + * @param graphics {Graphics} + * @param webGLData {Array} + * @param renderSession {Object} + */ PIXI.WebGLStencilManager.prototype.popStencil = function(graphics, webGLData, renderSession) { var gl = this.gl; @@ -272,7 +283,8 @@ }; /** -* Destroys the mask stack +* Destroys the mask stack. +* * @method destroy */ PIXI.WebGLStencilManager.prototype.destroy = function() diff --git a/src/pixi/text/BitmapText.js b/src/pixi/text/BitmapText.js index cd84a6b..a1d20af 100644 --- a/src/pixi/text/BitmapText.js +++ b/src/pixi/text/BitmapText.js @@ -3,7 +3,7 @@ */ /** - * 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. @@ -20,11 +20,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; }; @@ -33,10 +64,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) { @@ -47,7 +78,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 @@ -82,11 +113,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); @@ -100,12 +131,14 @@ } var charData = data.chars[charCode]; + if(!charData) continue; 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; @@ -116,6 +149,7 @@ maxLineWidth = Math.max(maxLineWidth, pos.x); var lineAlignOffsets = []; + for(i = 0; i <= line; i++) { var alignOffset = 0; @@ -133,6 +167,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. @@ -156,23 +191,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; }; diff --git a/src/pixi/text/Text.js b/src/pixi/text/Text.js index ba05f6e..e25f082 100644 --- a/src/pixi/text/Text.js +++ b/src/pixi/text/Text.js @@ -1,12 +1,11 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * - Modified by Tom Slezakowski http://www.tomslezakowski.com @TomSlezakowski (24/03/2014) - Added dropShadowColor. + * Modified by Tom Slezakowski http://www.tomslezakowski.com @TomSlezakowski (24/03/2014) - Added dropShadowColor. */ /** - * A Text Object will create a line(s) of text. To split a line you can use '\n' - * or add a wordWrap property set to true and and wordWrapWidth property with a value - * in the style object + * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string, + * or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object. * * @class Text * @extends Sprite @@ -38,29 +37,30 @@ /** * The canvas 2d context that everything is drawn with * @property context - * @type HTMLCanvasElement 2d Context + * @type HTMLCanvasElement */ this.context = this.canvas.getContext('2d'); - + /** + * The resolution of the canvas. + * @property resolution + * @type Number + */ this.resolution = 1; - PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); this.setText(text); this.setStyle(style); - }; // constructor PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); PIXI.Text.prototype.constructor = PIXI.Text; - /** - * The width of the sprite, setting this will actually modify the scale to achieve the value set + * The width of the Text, setting this will actually modify the scale to achieve the value set * * @property width * @type Number @@ -107,7 +107,6 @@ } }); - /** * Set the style of the text * @@ -146,16 +145,15 @@ }; /** - * Set the copy for the text object. To split a line you can use '\n' + * Set the copy for the text object. To split a line you can use '\n'. * * @method setText - * @param {String} text The copy that you would like the text to display + * @param text {String} The copy that you would like the text to display */ PIXI.Text.prototype.setText = function(text) { this.text = text.toString() || ' '; this.dirty = true; - }; /** @@ -213,7 +211,6 @@ var linePositionX; var linePositionY; - if(this.style.dropShadow) { this.context.fillStyle = this.style.dropShadowColor; @@ -275,7 +272,6 @@ // if(dropShadow) } - this.updateTexture(); }; @@ -297,7 +293,6 @@ // update the dirty base textures this.texture.baseTexture.dirty(); - }; /** @@ -315,18 +310,15 @@ this.updateText(); this.dirty = false; - - } PIXI.Sprite.prototype._renderWebGL.call(this, renderSession); }; - /** -* Renders the object using the WebGL renderer +* Renders the object using the Canvas renderer * -* @method _renderWebGL +* @method _renderCanvas * @param renderSession {RenderSession} * @private */ @@ -344,9 +336,9 @@ }; /* - * http://stackoverflow.com/users/34441/ellisbben - * great solution to the problem! - * returns the height of the given font + * Determine the font height. Based on http://stackoverflow.com/users/34441/ellisbben - a great solution to the problem! + * Returns the height of the given font. + * Warning: This creates DOM elements each time it is called. * * @method determineFontHeight * @param fontStyle {Object} @@ -425,7 +417,7 @@ }; /** - * Destroys this text object + * Destroys this text object. * * @method destroy * @param destroyBaseTexture {Boolean} whether to destroy the base texture as well diff --git a/src/pixi/textures/BaseTexture.js b/src/pixi/textures/BaseTexture.js index 71763c6..4535f3e 100644 --- a/src/pixi/textures/BaseTexture.js +++ b/src/pixi/textures/BaseTexture.js @@ -7,7 +7,7 @@ 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 @@ -45,6 +45,7 @@ /** * The scale mode to apply when scaling this texture + * * @property scaleMode * @type PIXI.scaleModes * @default PIXI.scaleModes.LINEAR @@ -52,7 +53,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 @@ -61,34 +62,42 @@ 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._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 texture updating... // TODO - this needs to be addressed - this._dirty = [true, true, true, true]; + /** + * @property _dirty + * @type Array + * @private + */ + this._dirty = [true, true, true, true]; if(!source)return; @@ -101,8 +110,8 @@ } else { - var scope = this; + this.source.onload = function() { scope.hasLoaded = true; @@ -114,19 +123,29 @@ // 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; + + /** + * @property _powerOf2 + * @type Boolean + * @private + */ this._powerOf2 = false; - - }; PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture; + PIXI.EventTarget.mixin(PIXI.BaseTexture.prototype); /** @@ -177,6 +196,11 @@ this.source.src = newSrc; }; +/** + * Sets all glTextures to be dirty. + * + * @method dirty + */ PIXI.BaseTexture.prototype.dirty = function() { for (var i = 0; i < this._glTextures.length; i++) @@ -186,8 +210,8 @@ }; /** - * 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 + * 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 @@ -204,7 +228,6 @@ if(!baseTexture) { - // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 var image = new Image();//document.createElement('img'); @@ -229,8 +252,7 @@ }; /** - * 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 @@ -255,5 +277,3 @@ return baseTexture; }; - - diff --git a/src/pixi/textures/RenderTexture.js b/src/pixi/textures/RenderTexture.js index a38283c..2f02ff3 100644 --- a/src/pixi/textures/RenderTexture.js +++ b/src/pixi/textures/RenderTexture.js @@ -3,12 +3,11 @@ */ /** - * A RenderTexture is a special texture that allows any pixi displayObject to be rendered to it. + * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. * - * __Hint__: All DisplayObjects (exmpl. Sprites) that render on RenderTexture should be preloaded. - * Otherwise black rectangles will be drawn instead. + * __Hint__: All DisplayObjects (i.e. Sprites) that render to a 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: + * 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"); @@ -18,7 +17,7 @@ * 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: + * 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); @@ -29,6 +28,7 @@ * @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 */ @@ -96,7 +96,12 @@ new PIXI.Rectangle(0, 0, this.width, this.height) ); - // each render texture can only belong to one renderer at the moment if its webGL + /** + * 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) @@ -117,6 +122,10 @@ this.baseTexture.source = this.textureBuffer.canvas; } + /** + * @property valid + * @type Boolean + */ this.valid = true; this._updateUvs(); @@ -126,7 +135,7 @@ PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture; /** - * Resize the RenderTexture. + * Resizes the RenderTexture. * * @method resize * @param width {Number} The width to resize to. @@ -139,7 +148,6 @@ this.valid = (width > 0 && height > 0); - this.width = this.frame.width = this.crop.width = width; this.height = this.frame.height = this.crop.height = height; @@ -182,7 +190,8 @@ * * @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, matrix, clear) @@ -230,7 +239,8 @@ * * @method renderCanvas * @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.renderCanvas = function(displayObject, matrix, clear) @@ -266,6 +276,7 @@ * Will return a HTML Image of the texture * * @method getImage + * @return {HTMLImage} */ PIXI.RenderTexture.prototype.getImage = function() { @@ -275,15 +286,22 @@ }; /** - * Will return a a base64 string of the texture + * Will return a a base64 encoded string of this texture. It works by calling RenderTexture.getCanvas and then running toDataURL on that. * - * @method getImage + * @method getBase64 + * @return {String} A base64 encoded string of the texture. */ PIXI.RenderTexture.prototype.getBase64 = function() { return this.getCanvas().toDataURL(); }; +/** + * Creates a Canvas element, renders this RenderTexture to it and then returns it. + * + * @method getCanvas + * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. + */ PIXI.RenderTexture.prototype.getCanvas = function() { if (this.renderer.type === PIXI.WEBGL_RENDERER) @@ -322,4 +340,3 @@ }; PIXI.RenderTexture.tempMatrix = new PIXI.Matrix(); - diff --git a/src/pixi/textures/Texture.js b/src/pixi/textures/Texture.js index 6b40986..02b6513 100644 --- a/src/pixi/textures/Texture.js +++ b/src/pixi/textures/Texture.js @@ -9,7 +9,7 @@ /** * 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 @@ -57,7 +57,7 @@ this.frame = frame; /** - * The trim point + * The texture trim data. * * @property trim * @type Rectangle @@ -65,7 +65,7 @@ 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 @@ -83,9 +83,9 @@ /** * The WebGL UV data cache. * - * @private * @property _uvs * @type Object + * @private */ this._uvs = null; @@ -132,7 +132,6 @@ * Called when the base texture is loaded * * @method onBaseTextureLoaded - * @param event * @private */ PIXI.Texture.prototype.onBaseTextureLoaded = function() @@ -201,7 +200,7 @@ /** * Updates the internal WebGL UV cache. * - * @method _updateWebGLuvs + * @method _updateUvs * @private */ PIXI.Texture.prototype._updateUvs = function() @@ -223,12 +222,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 @@ -251,8 +249,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 @@ -267,8 +265,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 @@ -284,14 +281,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) { @@ -299,12 +295,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) { @@ -314,7 +310,6 @@ return texture; }; - PIXI.TextureUvs = function() { this.x0 = 0; diff --git a/src/pixi/utils/Detector.js b/src/pixi/utils/Detector.js index c0bd1ed..33a97a9 100644 --- a/src/pixi/utils/Detector.js +++ b/src/pixi/utils/Detector.js @@ -44,9 +44,10 @@ /** * 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 diff --git a/src/pixi/utils/EventTarget.js b/src/pixi/utils/EventTarget.js index 4e701d9..32536e3 100644 --- a/src/pixi/utils/EventTarget.js +++ b/src/pixi/utils/EventTarget.js @@ -4,7 +4,7 @@ */ /** - * Originally based on https://github.com/mrdoob/eventtarget.js/ from mr DOob. + * Originally based on https://github.com/mrdoob/eventtarget.js/ from mr Doob. * Currently takes inspiration from the nodejs EventEmitter, EventEmitter3, and smokesignals */ @@ -18,7 +18,7 @@ * PIXI.EventTarget.mixin(MyEmitter.prototype); * * var em = new MyEmitter(); - * em.emit('eventName', 'some data', 'some moar data', {}, null, ...); + * em.emit('eventName', 'some data', 'some more data', {}, null, ...); */ PIXI.EventTarget = { /** diff --git a/src/pixi/utils/Polyk.js b/src/pixi/utils/Polyk.js index aaf3bdb..0e150b2 100644 --- a/src/pixi/utils/Polyk.js +++ b/src/pixi/utils/Polyk.js @@ -28,23 +28,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) { @@ -132,6 +130,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) { @@ -160,8 +159,8 @@ * Checks whether a shape is convex * * @method _convex - * * @private + * @return {Boolean} */ PIXI.PolyK._convex = function(ax, ay, bx, by, cx, cy, sign) { diff --git a/src/pixi/utils/Utils.js b/src/pixi/utils/Utils.js index 0ed9b16..439dbb5 100644 --- a/src/pixi/utils/Utils.js +++ b/src/pixi/utils/Utils.js @@ -16,6 +16,7 @@ * * @method requestAnimationFrame */ + /** * A polyfill for cancelAnimationFrame * diff --git a/src/pixi/InteractionData.js b/src/pixi/InteractionData.js index ea77370..fa84a6d 100644 --- a/src/pixi/InteractionData.js +++ b/src/pixi/InteractionData.js @@ -18,7 +18,6 @@ */ this.global = new PIXI.Point(); - /** * The target Sprite that was interacted with * diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 685c386..71f320b 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -14,7 +14,7 @@ PIXI.InteractionManager = function(stage) { /** - * a reference to the stage + * A reference to the stage * * @property stage * @type Stage @@ -22,7 +22,7 @@ this.stage = stage; /** - * the mouse data + * The mouse data * * @property mouse * @type InteractionData @@ -30,18 +30,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 touches * @type Object */ this.touches = {}; - // helpers + /** + * @property tempPoint + * @type Point + * @private + */ this.tempPoint = new PIXI.Point(); /** - * * @property mouseoverEnabled * @type Boolean * @default @@ -49,7 +52,7 @@ this.mouseoverEnabled = true; /** - * tiny little interactiveData pool ! + * Tiny little interactiveData pool ! * * @property pool * @type Array @@ -61,7 +64,6 @@ * @property interactiveItems * @type Array * @private - * */ this.interactiveItems = []; @@ -73,23 +75,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'; @@ -97,10 +136,13 @@ * 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; }; @@ -166,7 +208,6 @@ 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 @@ -201,7 +242,10 @@ window.addEventListener('mouseup', this.onMouseUp, true); }; - +/** + * @method removeEvents + * @private + */ PIXI.InteractionManager.prototype.removeEvents = function() { if (!this.interactionDOMElement) return; @@ -308,6 +352,10 @@ } }; +/** + * @method rebuildInteractiveGraph + * @private + */ PIXI.InteractionManager.prototype.rebuildInteractiveGraph = function() { this.dirty = false; @@ -427,10 +475,10 @@ }; /** - * 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 + * @param event {Event} The DOM event of a mouse being moved out * @private */ PIXI.InteractionManager.prototype.onMouseOut = function(event) diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index cdcd41c..12aa944 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -2,9 +2,8 @@ * @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. + * 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 @@ -17,7 +16,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 @@ -25,7 +24,7 @@ this.fillAlpha = 1; /** - * The width of any lines drawn + * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number @@ -33,12 +32,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 @@ -49,18 +49,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 @@ -76,11 +75,9 @@ * @private */ 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 @@ -89,15 +86,15 @@ 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 + * The bounds of the graphic shape * * @property bounds * @type Rectangle @@ -105,7 +102,7 @@ this.bounds = new PIXI.Rectangle(0, 0, 0, 0); /** - * the bounds' padding used for bounds calculation + * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number @@ -113,13 +110,14 @@ 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. * * @property dirty * @type Boolean * @private */ this.dirty = true; + }; // constructor @@ -127,14 +125,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", { @@ -157,14 +155,14 @@ } }); - /** * 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) { @@ -192,61 +190,28 @@ }; /** - * 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) { this.drawShape(new PIXI.Polygon([x,y])); - /* - if(this.currentPath) - { - if(this.currentPath.shape.points.length > 2) - { - // halfway through a line? start a new one! - this.currentPath = this.drawShape( new PIXI.Polygon( x, y ); - return this; - } - else - { - // reuse existing path! - this.currentPath.shape.points = [x,y]; - this.currentPath.lineWidth = this.lineWidth; - this.currentPath.lineColor = this.lineColor; - this.currentPath.lineAlpha = this.lineAlpha; - - return this - } - } - - this.currentPath = this.drawShape(new PIXI.Polygon([x,y])) - - this.currentPath.push(x, y); -`*/ - - // 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:[], type:PIXI.Graphics.POLY}; - - //this.currentPath.points.push(x, y); - - // this.graphicsData.push(this.currentPath); - 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) { @@ -257,15 +222,15 @@ }; /** - * 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) { @@ -307,16 +272,16 @@ }; /** - * 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) { @@ -355,7 +320,6 @@ points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); - } this.dirty = true; @@ -364,17 +328,17 @@ }; /* - * the arcTo() method creates an arc/curve between two tangents on the canvas. + * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo - * @param {Number} x1 The x-coordinate of the beginning of the arc - * @param {Number} y1 The y-coordinate of the beginning of the arc - * @param {Number} x2 The x-coordinate of the end of the arc - * @param {Number} y2 The y-coordinate of the end of the arc - * @param {Number} radius The radius of the arc - * @return {PIXI.Graphics} + * @param x1 {Number} The x-coordinate of the beginning of the arc + * @param y1 {Number} The y-coordinate of the beginning of the arc + * @param x2 {Number} The x-coordinate of the end of the arc + * @param y2 {Number} The y-coordinate of the end of the arc + * @param radius {Number} The radius of the arc + * @return {Graphics} */ PIXI.Graphics.prototype.arcTo = function(x1, y1, x2, y2, radius) { @@ -393,9 +357,6 @@ var points = this.currentPath; var fromX = points[points.length-2]; var fromY = points[points.length-1]; - -// points.push( x1, y1); - var a1 = fromY - y1; var b1 = fromX - x1; var a2 = y2 - y1; @@ -423,8 +384,7 @@ var qy = a2 * (k1 + j2); var startAngle = Math.atan2(py - cy, px - cx); var endAngle = Math.atan2(qy - cy, qx - cx); - // not required? - // points.push(px + x1 , py + y1); + this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } @@ -434,16 +394,16 @@ }; /** - * 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 {Boolean} 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) { @@ -503,7 +463,6 @@ return this; }; - /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. @@ -511,10 +470,10 @@ * @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 = (alpha === undefined) ? 1 : alpha; @@ -535,6 +494,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() { @@ -552,6 +512,7 @@ * @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 ) { @@ -583,6 +544,7 @@ return this; }; */ + /** * Draws a circle. * @@ -590,6 +552,7 @@ * @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) { @@ -606,6 +569,7 @@ * @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) { @@ -615,12 +579,11 @@ }; /** - * 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). + * Draws a polygon using the given path. * - * @method lineTo - * @param x {Number} the X coordinate to draw to - * @param y {Number} the Y coordinate to draw to + * @method drawPolygon + * @param path {Array} The path data used to construct the polygon. + * @return {Graphics} */ PIXI.Graphics.prototype.drawPolygon = function(path) { @@ -633,6 +596,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() { @@ -688,11 +652,9 @@ { // 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) { this._generateCachedSprite(); @@ -723,11 +685,6 @@ renderSession.spriteBatch.gl.blendFunc(blendModeWebGL[0], blendModeWebGL[1]); } - // for (var i = this.graphicsData.length - 1; i >= 0; i--) { - // this.graphicsData[i] - -// }; - PIXI.WebGLGraphics.renderGraphics(this, renderSession); // only render if it has children! @@ -878,7 +835,6 @@ */ PIXI.Graphics.prototype.updateBounds = function() { - var minX = Infinity; var maxX = -Infinity; @@ -956,7 +912,6 @@ this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2); }; - /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * @@ -995,6 +950,11 @@ // this._cachedSprite.buffer.context.restore(); }; +/** + * Destroys a previous cached sprite. + * + * @method destroyCachedSprite + */ PIXI.Graphics.prototype.destroyCachedSprite = function() { this._cachedSprite.texture.destroy(true); @@ -1004,6 +964,13 @@ 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) @@ -1027,9 +994,14 @@ this.dirty = true; return data; - }; +/** + * A GraphicsData object. + * + * @class GraphicsData + * @constructor + */ PIXI.GraphicsData = function(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape) { this.lineWidth = lineWidth; @@ -1044,7 +1016,6 @@ this.type = shape.type; }; - // SOME TYPES: PIXI.Graphics.POLY = 0; PIXI.Graphics.RECT = 1; @@ -1052,9 +1023,7 @@ 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; - diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 9fe4194..5dacf25 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -10,15 +10,12 @@ */ PIXI.CanvasGraphics = function() { - }; - /* - * Renders the graphics object + * Renders a PIXI.Graphics object to a canvas. * * @static - * @private * @method renderGraphics * @param graphics {Graphics} the actual graphics object to render * @param context {CanvasRenderingContext2D} the 2d drawing method of the canvas @@ -88,7 +85,6 @@ context.globalAlpha = data.lineAlpha * worldAlpha; context.strokeRect(shape.x, shape.y, shape.width, shape.height); } - } else if(data.type === PIXI.Graphics.CIRC) { @@ -111,7 +107,6 @@ } 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 w = shape.width * 2; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index aa998c1..c3fabda 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -3,14 +3,13 @@ */ /** - * 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 [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 @@ -37,8 +36,20 @@ 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; /** @@ -60,7 +71,6 @@ * @type Boolean */ this.transparent = options.transparent; - /** * The width of the canvas view @@ -84,7 +94,7 @@ this.height *= this.resolution; /** - * The canvas element that everything is drawn to + * The canvas element that everything is drawn to. * * @property view * @type HTMLCanvasElement @@ -98,12 +108,23 @@ */ this.context = this.view.getContext( "2d", { alpha: this.transparent } ); + /** + * Boolean flag controlling canvas refresh. + * + * @property refresh + * @type Boolean + */ this.refresh = true; - // hack to enable some hardware acceleration! - //this.view.style["transform"] = "translatez(0)"; this.view.width = this.width * this.resolution; this.view.height = this.height * this.resolution; + + /** + * Internal var. + * + * @property count + * @type Number + */ this.count = 0; /** @@ -151,7 +172,7 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; /** - * Renders the stage to its canvas view + * Renders the Stage to this canvas view * * @method render * @param stage {Stage} the Stage element to be rendered @@ -233,8 +254,12 @@ displayObject._renderCanvas(this.renderSession); }; - - +/** + * Maps Pixi blend modes to canvas blend modes. + * + * @method mapBlendModes + * @private + */ PIXI.CanvasRenderer.prototype.mapBlendModes = function() { if(!PIXI.blendModesCanvas) diff --git a/src/pixi/renderers/canvas/utils/CanvasBuffer.js b/src/pixi/renderers/canvas/utils/CanvasBuffer.js index f559383..6b7653a 100644 --- a/src/pixi/renderers/canvas/utils/CanvasBuffer.js +++ b/src/pixi/renderers/canvas/utils/CanvasBuffer.js @@ -1,32 +1,56 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** - * Creates a Canvas element of the given size + * 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) { + /** + * 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; - this.canvas = document.createElement( "canvas" ); - this.context = this.canvas.getContext( "2d" ); + /** + * 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 + * Clears the canvas that was created by the CanvasBuffer class. * * @method clear * @private @@ -37,17 +61,14 @@ }; /** - * Resizes the canvas that was created by the CanvasBuffer class to the specified width and height + * 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 - * @private */ - PIXI.CanvasBuffer.prototype.resize = function(width, height) { this.width = this.canvas.width = width; this.height = this.canvas.height = height; }; - diff --git a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js index 0c0d5bc..cd3f205 100644 --- a/src/pixi/renderers/canvas/utils/CanvasMaskManager.js +++ b/src/pixi/renderers/canvas/utils/CanvasMaskManager.js @@ -9,15 +9,14 @@ */ PIXI.CanvasMaskManager = function() { - }; /** - * This method adds it to the current stack of masks + * This method adds it to the current stack of masks. * * @method pushMask - * @param maskData the maskData that will be pushed - * @param context {CanvasRenderingContext2D} 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, renderSession) { @@ -45,12 +44,12 @@ }; /** - * 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 {CanvasRenderingContext2D} 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(renderSession) { renderSession.context.restore(); -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js index b98aea1..76084ff 100644 --- a/src/pixi/renderers/canvas/utils/CanvasTinter.js +++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js @@ -1,7 +1,5 @@ /** - * @author Mat Groves - * - * + * @author Mat Groves http://matgroves.com/ @Doormat23 */ /** @@ -11,23 +9,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); @@ -42,8 +35,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) @@ -56,20 +47,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 */ @@ -112,7 +102,8 @@ }; /** - * Tint a texture using the "overlay" operation + * Tint a texture using the "overlay" operation. + * * @method tintWithOverlay * @param texture {texture} the texture to tint * @param color {Number} the color to use to tint the sprite with @@ -126,8 +117,6 @@ canvas.width = crop.width; canvas.height = crop.height; - - context.globalCompositeOperation = "copy"; context.fillStyle = "#" + ("00000" + ( color | 0).toString(16)).substr(-6); @@ -143,14 +132,13 @@ 0, 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 color {Number} the color to use to tint the sprite with @@ -194,7 +182,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 */ @@ -212,16 +201,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 @@ -229,12 +217,16 @@ 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; - diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 968fd3d..422896f 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -5,23 +5,21 @@ 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 [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, options) { @@ -37,13 +35,16 @@ options = PIXI.defaultRenderOptions; } - if(!PIXI.defaultRenderer) { PIXI.sayHello('webGL'); PIXI.defaultRenderer = this; } + /** + * @property type + * @type Number + */ this.type = PIXI.WEBGL_RENDERER; /** @@ -56,6 +57,7 @@ this.resolution = options.resolution; // do a catch.. only 1 webGL renderer.. + /** * Whether the render view is transparent * @@ -99,12 +101,27 @@ this.view = options.view || document.createElement( 'canvas' ); // deal with losing context.. + + /** + * @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: options.antialias, // SPEED UP?? @@ -113,18 +130,67 @@ preserveDrawingBuffer: options.preserveDrawingBuffer }; + /** + * @property projection + * @type Point + */ this.projection = new PIXI.Point(); + + /** + * @property offset + * @type Point + */ this.offset = new PIXI.Point(0, 0); - // time to create the render managers! each one focuses on managine a state in webGL - this.shaderManager = new PIXI.WebGLShaderManager(); // deals with managing the shader programs and their attribs - this.spriteBatch = new PIXI.WebGLSpriteBatch(); // manages the rendering of sprites - this.maskManager = new PIXI.WebGLMaskManager(); // manages the masks using the stencil buffer - this.filterManager = new PIXI.WebGLFilterManager(); // manages the filters - this.stencilManager = new PIXI.WebGLStencilManager(); // manages the stencil buffer - this.blendModeManager = new PIXI.WebGLBlendModeManager(); // manages the blendModes + // time to create the render managers! each one focuses on managing a state in webGL - // TODO remove + /** + * 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; @@ -147,6 +213,9 @@ // 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); @@ -180,7 +249,6 @@ this.resize(this.width, this.height); }; - /** * Renders the stage to its webGL view * @@ -205,9 +273,7 @@ // update the scene graph stage.updateTransform(); - var gl = this.gl; - // interaction if(stage._interactive) @@ -249,9 +315,9 @@ }; /** - * 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 @@ -283,7 +349,7 @@ }; /** - * 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 @@ -297,10 +363,6 @@ this.view.width = this.width; this.view.height = this.height; - // this.view.style.width = width + 'px'; - // this.view.style.height = height + 'px'; - - // console.log(this.width / this.resolution) this.gl.viewport(0, 0, this.width, this.height); this.projection.x = this.width / 2 / this.resolution; @@ -308,10 +370,10 @@ }; /** - * Updates and Creates a WebGL texture for the renderers context + * Updates and Creates a WebGL texture for the renderers context. * * @method updateTexture - * @param texture {Texture} the texture to render + * @param texture {Texture} the texture to update */ PIXI.WebGLRenderer.prototype.updateTexture = function(texture) { @@ -411,6 +473,11 @@ this.renderSession = null; }; +/** + * Maps Pixi blend modes to WebGL blend modes. + * + * @method mapBlendModes + */ PIXI.WebGLRenderer.prototype.mapBlendModes = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js index daa8b64..79d038a 100644 --- a/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js @@ -9,7 +9,13 @@ */ PIXI.ComplexPrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; + /** * @property gl * @type WebGLContext @@ -17,18 +23,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;', @@ -38,6 +46,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -65,14 +74,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); @@ -84,7 +94,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'); @@ -98,9 +107,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.ComplexPrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiFastShader.js b/src/pixi/renderers/webgl/shaders/PixiFastShader.js index 4fb3fe2..bb46419 100644 --- a/src/pixi/renderers/webgl/shaders/PixiFastShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiFastShader.js @@ -1,6 +1,5 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * @author Richard Davey http://www.photonstorm.com @photonstorm */ /** @@ -10,6 +9,11 @@ */ PIXI.PixiFastShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -19,12 +23,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;', @@ -37,8 +45,10 @@ ]; /** - * @property {array} vertexSrc - The vertex shader - */ + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aPositionCoord;', @@ -69,24 +79,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); @@ -111,8 +122,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? @@ -128,14 +137,13 @@ // End worst hack eva // - this.program = program; }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PixiFastShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/PixiShader.js b/src/pixi/renderers/webgl/shaders/PixiShader.js index d76ec03..725dce2 100644 --- a/src/pixi/renderers/webgl/shaders/PixiShader.js +++ b/src/pixi/renderers/webgl/shaders/PixiShader.js @@ -6,9 +6,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++; /** @@ -18,13 +24,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;', @@ -36,21 +46,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() { @@ -71,12 +104,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) { @@ -101,6 +133,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 * @@ -316,7 +349,8 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy */ PIXI.PixiShader.prototype.destroy = function() @@ -329,7 +363,8 @@ }; /** -* The Default Vertex shader source +* The Default Vertex shader source. +* * @property defaultVertexSrc * @type String */ diff --git a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js index 3a82be2..0f6854c 100644 --- a/src/pixi/renderers/webgl/shaders/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/shaders/PrimitiveShader.js @@ -9,6 +9,11 @@ */ PIXI.PrimitiveShader = function(gl) { + /** + * @property _UID + * @type Number + * @private + */ this._UID = PIXI._UID++; /** @@ -18,11 +23,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 */ @@ -36,6 +44,7 @@ ]; /** + * The vertex shader. * @property vertexSrc * @type Array */ @@ -60,14 +69,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); @@ -78,7 +88,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'); @@ -92,9 +101,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.PrimitiveShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/shaders/StripShader.js b/src/pixi/renderers/webgl/shaders/StripShader.js index 11f13ad..8fefe51 100644 --- a/src/pixi/renderers/webgl/shaders/StripShader.js +++ b/src/pixi/renderers/webgl/shaders/StripShader.js @@ -2,20 +2,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;', @@ -30,9 +47,11 @@ '}' ]; - /** - * @property {array} fragmentSrc - The fragment shader. - */ + /** + * The vertex shader. + * @property vertexSrc + * @type Array + */ this.vertexSrc = [ 'attribute vec2 aVertexPosition;', 'attribute vec2 aTextureCoord;', @@ -56,10 +75,12 @@ this.init(); }; +PIXI.StripShader.prototype.constructor = PIXI.StripShader; + /** -* Initialises the shader +* Initialises the shader. +* * @method init -* */ PIXI.StripShader.prototype.init = function() { @@ -88,9 +109,9 @@ }; /** -* Destroys the shader +* Destroys the shader. +* * @method destroy -* */ PIXI.StripShader.prototype.destroy = function() { diff --git a/src/pixi/renderers/webgl/utils/FilterTexture.js b/src/pixi/renderers/webgl/utils/FilterTexture.js index 9dada23..389acbe 100644 --- a/src/pixi/renderers/webgl/utils/FilterTexture.js +++ b/src/pixi/renderers/webgl/utils/FilterTexture.js @@ -9,7 +9,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) { @@ -19,11 +18,24 @@ */ 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); @@ -44,9 +56,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() @@ -75,14 +89,14 @@ gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width , height , 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - // console.log( width, width ) // update the stencil buffer width and height gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_STENCIL, width , height ); }; /** -* Destroys the filter texture +* Destroys the filter texture. +* * @method destroy */ PIXI.FilterTexture.prototype.destroy = function() diff --git a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js index c73728f..3de0ec9 100644 --- a/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js @@ -3,31 +3,42 @@ */ /** -* @class WebGLMaskManager +* @class WebGLBlendModeManager * @constructor * @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLBlendModeManager = function() { + /** + * @property currentBlendMode + * @type Number + */ this.currentBlendMode = 99999; }; +PIXI.WebGLBlendModeManager.prototype.constructor = PIXI.WebGLBlendModeManager; + +/** + * 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 +* 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]; @@ -36,7 +47,12 @@ return true; }; +/** +* Destroys this object. +* +* @method destroy +*/ PIXI.WebGLBlendModeManager.prototype.destroy = function() { this.gl = null; -}; \ No newline at end of file +}; diff --git a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js index 0d08e47..0bdbbe4 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js @@ -8,27 +8,66 @@ * https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g2d/WebGLSpriteBatch.java */ +/** +* @class WebGLFastSpriteBatch +* @constructor +*/ PIXI.WebGLFastSpriteBatch = function() { - - + /** + * @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) @@ -41,21 +80,58 @@ 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; @@ -66,7 +142,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); @@ -75,6 +150,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; @@ -85,15 +165,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]; @@ -119,6 +204,10 @@ this.flush(); }; +/** + * @method renderSprite + * @param sprite {Sprite} + */ PIXI.WebGLFastSpriteBatch.prototype.renderSprite = function(sprite) { //sprite = children[i]; @@ -137,7 +226,6 @@ uvs = sprite.texture._uvs; - width = sprite.texture.frame.width; height = sprite.texture.frame.height; @@ -257,9 +345,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; @@ -272,7 +362,6 @@ gl.bindTexture(gl.TEXTURE_2D, this.currentBaseTexture._glTextures[gl.id]); // upload the verts to the buffer - if(this.currentBatchSize > ( this.size * 0.5 ) ) { @@ -285,7 +374,6 @@ gl.bufferSubData(gl.ARRAY_BUFFER, 0, view); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, this.currentBatchSize * 6, gl.UNSIGNED_SHORT, 0); @@ -297,11 +385,17 @@ }; +/** + * @method stop + */ PIXI.WebGLFastSpriteBatch.prototype.stop = function() { this.flush(); }; +/** + * @method start + */ PIXI.WebGLFastSpriteBatch.prototype.start = function() { var gl = this.gl; @@ -329,8 +423,5 @@ 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); - }; - - diff --git a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js index 9bb9195..359a834 100644 --- a/src/pixi/renderers/webgl/utils/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLFilterManager.js @@ -5,22 +5,33 @@ /** * @class WebGLFilterManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context -* @private */ PIXI.WebGLFilterManager = function() { + /** + * @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 */ @@ -33,7 +44,6 @@ }; /** -* * @method begin * @param renderSession {RenderSession} * @param buffer {ArrayBuffer} @@ -44,14 +54,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 */ @@ -64,7 +74,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); @@ -126,9 +135,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() @@ -211,7 +220,6 @@ this.offsetX -= filterArea.x; this.offsetY -= filterArea.y; - var sizeX = this.width; var sizeY = this.height; @@ -239,9 +247,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; @@ -280,10 +286,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 @@ -300,9 +302,9 @@ this.applyFilterPass(filter, filterArea, sizeX, sizeY); // 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); + // 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); @@ -311,7 +313,8 @@ /** -* 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 @@ -351,7 +354,6 @@ filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; } - // console.log(this.uvArray ) shader.syncUniforms(); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); @@ -372,7 +374,8 @@ }; /** -* Initialises the shader buffers +* Initialises the shader buffers. +* * @method initShaderBuffers */ PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() @@ -385,7 +388,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, @@ -394,11 +396,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, @@ -407,10 +405,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, @@ -418,21 +413,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() diff --git a/src/pixi/renderers/webgl/utils/WebGLGraphics.js b/src/pixi/renderers/webgl/utils/WebGLGraphics.js index 4de401d..9ea5a53 100644 --- a/src/pixi/renderers/webgl/utils/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/utils/WebGLGraphics.js @@ -11,7 +11,6 @@ */ PIXI.WebGLGraphics = function() { - }; /** @@ -120,7 +119,6 @@ webGL.data = []; webGL.lastIndex = 0; } - var webGLData; @@ -131,8 +129,6 @@ { var data = graphics.graphicsData[i]; - - if(data.type === PIXI.Graphics.POLY) { // need to add the points the the graphics object.. @@ -189,7 +185,6 @@ } } - webGL.lastIndex++; } @@ -201,7 +196,13 @@ } }; - +/** + * @static + * @private + * @method switchMode + * @param webGL {WebGLContext} + * @param type {Number} + */ PIXI.WebGLGraphics.switchMode = function(webGL, type) { var webGLData; @@ -308,7 +309,6 @@ */ PIXI.WebGLGraphics.buildRoundedRectangle = function(graphicsData, webGLData) { - var points = graphicsData.points; var x = points[0]; var y = points[1]; @@ -316,7 +316,6 @@ 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)); @@ -324,7 +323,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; @@ -368,8 +366,8 @@ }; /** - * 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 * * @static * @private @@ -383,6 +381,7 @@ * @return {Array} */ PIXI.WebGLGraphics.quadraticBezierCurve = function(fromX, fromY, cpX, cpY, toX, toY) { + var xa, ya, xb, @@ -718,13 +717,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; @@ -776,6 +774,15 @@ }; +/** + * 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; @@ -818,6 +825,11 @@ PIXI.WebGLGraphics.graphicsDataPool = []; +/** + * @class WebGLGraphicsData + * @private + * @static + */ PIXI.WebGLGraphicsData = function(gl) { this.gl = gl; @@ -834,6 +846,9 @@ this.dirty = true; }; +/** + * @method reset + */ PIXI.WebGLGraphicsData.prototype.reset = function() { this.points = []; @@ -841,6 +856,9 @@ this.lastIndex = 0; }; +/** + * @method upload + */ PIXI.WebGLGraphicsData.prototype.upload = function() { var gl = this.gl; diff --git a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js index 181f560..607d5dd 100644 --- a/src/pixi/renderers/webgl/utils/WebGLMaskManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLMaskManager.js @@ -5,16 +5,17 @@ /** * @class WebGLMaskManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLMaskManager = function() { - //this.setContext(gl); }; +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 */ @@ -24,10 +25,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) { @@ -44,10 +46,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) { @@ -55,9 +58,9 @@ 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() diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js index b597698..a15974e 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderManager.js @@ -5,38 +5,54 @@ /** * @class WebGLShaderManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ PIXI.WebGLShaderManager = function() { - + /** + * @property maxAttibs + * @type Number + */ this.maxAttibs = 10; + + /** + * @property attribState + * @type Array + */ this.attribState = []; + + /** + * @property tempAttribState + * @type Array + */ this.tempAttribState = []; - for (var i = 0; i < this.maxAttibs; i++) { + for (var i = 0; i < this.maxAttibs; i++) + { this.attribState[i] = false; } + /** + * @property stack + * @type Array + */ this.stack = []; - - //this.setContext(gl); - // the final one is used for the rendering strips + }; +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 @@ -53,16 +69,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++) @@ -97,6 +112,12 @@ } }; +/** +* Sets the current shader. +* +* @method setShader +* @param shader {Any} +*/ PIXI.WebGLShaderManager.prototype.setShader = function(shader) { if(this._currentId === shader._UID)return false; @@ -112,7 +133,8 @@ }; /** -* Destroys +* Destroys this object. +* * @method destroy */ PIXI.WebGLShaderManager.prototype.destroy = function() @@ -133,4 +155,3 @@ this.gl = null; }; - diff --git a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js index f6cc024..995aa9b 100644 --- a/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js +++ b/src/pixi/renderers/webgl/utils/WebGLShaderUtils.js @@ -2,27 +2,44 @@ * @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 +* @private +*/ PIXI.initDefaultShaders = function() { - - // PIXI.stripShader = new PIXI.StripShader(); -// PIXI.stripShader.init(); - }; +/** +* @method CompileVertexShader +* @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 +* @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 +* @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"); @@ -30,7 +47,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; } @@ -38,6 +56,13 @@ return shader; }; +/** +* @method compileProgram +* @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); @@ -49,7 +74,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"); } diff --git a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js index 4d59c80..f8a4bd7 100755 --- a/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js +++ b/src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js @@ -13,15 +13,10 @@ * @class WebGLSpriteBatch * @private * @constructor - * @param gl {WebGLContext} the current WebGL drawing context - * */ PIXI.WebGLSpriteBatch = function() { - /** - * - * * @property vertSize * @type Number */ @@ -47,7 +42,6 @@ */ this.vertices = new Float32Array(numVerts); - //index data /** * Holds the indices * @@ -56,6 +50,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) @@ -68,20 +66,58 @@ 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;', @@ -94,9 +130,7 @@ }; /** -* * @method setContext -* * @param gl {WebGLContext} the current WebGL drawing context */ PIXI.WebGLSpriteBatch.prototype.setContext = function(gl) @@ -109,7 +143,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); @@ -125,15 +158,12 @@ 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) { @@ -144,9 +174,7 @@ }; /** -* * @method end -* */ PIXI.WebGLSpriteBatch.prototype.end = function() { @@ -154,16 +182,13 @@ }; /** -* * @method render -* * @param sprite {Sprite} the sprite to render when using this spritebatch */ PIXI.WebGLSpriteBatch.prototype.render = function(sprite) { var texture = sprite.texture; - //TODO set blend modes.. // check texture.. if(this.currentBatchSize >= this.size) @@ -270,9 +295,9 @@ }; /** -* 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) @@ -390,12 +415,10 @@ 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() { @@ -516,6 +539,12 @@ 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; @@ -532,7 +561,6 @@ // bind the current texture gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]); } - // now draw those suckas! gl.drawElements(gl.TRIANGLES, size * 6, gl.UNSIGNED_SHORT, startIndex * 6 * 2); @@ -541,11 +569,8 @@ this.renderSession.drawCount++; }; - /** -* * @method stop -* */ PIXI.WebGLSpriteBatch.prototype.stop = function() { @@ -554,9 +579,7 @@ }; /** -* * @method start -* */ PIXI.WebGLSpriteBatch.prototype.start = function() { @@ -564,12 +587,12 @@ }; /** -* Destroys the SpriteBatch +* Destroys the SpriteBatch. +* * @method destroy */ PIXI.WebGLSpriteBatch.prototype.destroy = function() { - this.vertices = null; this.indices = null; diff --git a/src/pixi/renderers/webgl/utils/WebGLStencilManager.js b/src/pixi/renderers/webgl/utils/WebGLStencilManager.js index f841e6f..367d7dc 100644 --- a/src/pixi/renderers/webgl/utils/WebGLStencilManager.js +++ b/src/pixi/renderers/webgl/utils/WebGLStencilManager.js @@ -5,21 +5,18 @@ /** * @class WebGLStencilManager * @constructor -* @param gl {WebGLContext} the current WebGL drawing context * @private */ 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 */ @@ -29,10 +26,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) { @@ -60,7 +59,6 @@ if(webGLData.mode === 1) { - gl.drawElements(gl.TRIANGLE_FAN, webGLData.indices.length - 4, gl.UNSIGNED_SHORT, 0 ); if(this.reverse) @@ -119,7 +117,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; @@ -182,6 +187,12 @@ } }; +/** + * @method popStencil + * @param graphics {Graphics} + * @param webGLData {Array} + * @param renderSession {Object} + */ PIXI.WebGLStencilManager.prototype.popStencil = function(graphics, webGLData, renderSession) { var gl = this.gl; @@ -272,7 +283,8 @@ }; /** -* Destroys the mask stack +* Destroys the mask stack. +* * @method destroy */ PIXI.WebGLStencilManager.prototype.destroy = function() diff --git a/src/pixi/text/BitmapText.js b/src/pixi/text/BitmapText.js index cd84a6b..a1d20af 100644 --- a/src/pixi/text/BitmapText.js +++ b/src/pixi/text/BitmapText.js @@ -3,7 +3,7 @@ */ /** - * 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. @@ -20,11 +20,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; }; @@ -33,10 +64,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) { @@ -47,7 +78,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 @@ -82,11 +113,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); @@ -100,12 +131,14 @@ } var charData = data.chars[charCode]; + if(!charData) continue; 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; @@ -116,6 +149,7 @@ maxLineWidth = Math.max(maxLineWidth, pos.x); var lineAlignOffsets = []; + for(i = 0; i <= line; i++) { var alignOffset = 0; @@ -133,6 +167,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. @@ -156,23 +191,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; }; diff --git a/src/pixi/text/Text.js b/src/pixi/text/Text.js index ba05f6e..e25f082 100644 --- a/src/pixi/text/Text.js +++ b/src/pixi/text/Text.js @@ -1,12 +1,11 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 - * - Modified by Tom Slezakowski http://www.tomslezakowski.com @TomSlezakowski (24/03/2014) - Added dropShadowColor. + * Modified by Tom Slezakowski http://www.tomslezakowski.com @TomSlezakowski (24/03/2014) - Added dropShadowColor. */ /** - * A Text Object will create a line(s) of text. To split a line you can use '\n' - * or add a wordWrap property set to true and and wordWrapWidth property with a value - * in the style object + * A Text Object will create a line or multiple lines of text. To split a line you can use '\n' in your text string, + * or add a wordWrap property set to true and and wordWrapWidth property with a value in the style object. * * @class Text * @extends Sprite @@ -38,29 +37,30 @@ /** * The canvas 2d context that everything is drawn with * @property context - * @type HTMLCanvasElement 2d Context + * @type HTMLCanvasElement */ this.context = this.canvas.getContext('2d'); - + /** + * The resolution of the canvas. + * @property resolution + * @type Number + */ this.resolution = 1; - PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); this.setText(text); this.setStyle(style); - }; // constructor PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); PIXI.Text.prototype.constructor = PIXI.Text; - /** - * The width of the sprite, setting this will actually modify the scale to achieve the value set + * The width of the Text, setting this will actually modify the scale to achieve the value set * * @property width * @type Number @@ -107,7 +107,6 @@ } }); - /** * Set the style of the text * @@ -146,16 +145,15 @@ }; /** - * Set the copy for the text object. To split a line you can use '\n' + * Set the copy for the text object. To split a line you can use '\n'. * * @method setText - * @param {String} text The copy that you would like the text to display + * @param text {String} The copy that you would like the text to display */ PIXI.Text.prototype.setText = function(text) { this.text = text.toString() || ' '; this.dirty = true; - }; /** @@ -213,7 +211,6 @@ var linePositionX; var linePositionY; - if(this.style.dropShadow) { this.context.fillStyle = this.style.dropShadowColor; @@ -275,7 +272,6 @@ // if(dropShadow) } - this.updateTexture(); }; @@ -297,7 +293,6 @@ // update the dirty base textures this.texture.baseTexture.dirty(); - }; /** @@ -315,18 +310,15 @@ this.updateText(); this.dirty = false; - - } PIXI.Sprite.prototype._renderWebGL.call(this, renderSession); }; - /** -* Renders the object using the WebGL renderer +* Renders the object using the Canvas renderer * -* @method _renderWebGL +* @method _renderCanvas * @param renderSession {RenderSession} * @private */ @@ -344,9 +336,9 @@ }; /* - * http://stackoverflow.com/users/34441/ellisbben - * great solution to the problem! - * returns the height of the given font + * Determine the font height. Based on http://stackoverflow.com/users/34441/ellisbben - a great solution to the problem! + * Returns the height of the given font. + * Warning: This creates DOM elements each time it is called. * * @method determineFontHeight * @param fontStyle {Object} @@ -425,7 +417,7 @@ }; /** - * Destroys this text object + * Destroys this text object. * * @method destroy * @param destroyBaseTexture {Boolean} whether to destroy the base texture as well diff --git a/src/pixi/textures/BaseTexture.js b/src/pixi/textures/BaseTexture.js index 71763c6..4535f3e 100644 --- a/src/pixi/textures/BaseTexture.js +++ b/src/pixi/textures/BaseTexture.js @@ -7,7 +7,7 @@ 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 @@ -45,6 +45,7 @@ /** * The scale mode to apply when scaling this texture + * * @property scaleMode * @type PIXI.scaleModes * @default PIXI.scaleModes.LINEAR @@ -52,7 +53,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 @@ -61,34 +62,42 @@ 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._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 texture updating... // TODO - this needs to be addressed - this._dirty = [true, true, true, true]; + /** + * @property _dirty + * @type Array + * @private + */ + this._dirty = [true, true, true, true]; if(!source)return; @@ -101,8 +110,8 @@ } else { - var scope = this; + this.source.onload = function() { scope.hasLoaded = true; @@ -114,19 +123,29 @@ // 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; + + /** + * @property _powerOf2 + * @type Boolean + * @private + */ this._powerOf2 = false; - - }; PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture; + PIXI.EventTarget.mixin(PIXI.BaseTexture.prototype); /** @@ -177,6 +196,11 @@ this.source.src = newSrc; }; +/** + * Sets all glTextures to be dirty. + * + * @method dirty + */ PIXI.BaseTexture.prototype.dirty = function() { for (var i = 0; i < this._glTextures.length; i++) @@ -186,8 +210,8 @@ }; /** - * 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 + * 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 @@ -204,7 +228,6 @@ if(!baseTexture) { - // new Image() breaks tex loading in some versions of Chrome. // See https://code.google.com/p/chromium/issues/detail?id=238071 var image = new Image();//document.createElement('img'); @@ -229,8 +252,7 @@ }; /** - * 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 @@ -255,5 +277,3 @@ return baseTexture; }; - - diff --git a/src/pixi/textures/RenderTexture.js b/src/pixi/textures/RenderTexture.js index a38283c..2f02ff3 100644 --- a/src/pixi/textures/RenderTexture.js +++ b/src/pixi/textures/RenderTexture.js @@ -3,12 +3,11 @@ */ /** - * A RenderTexture is a special texture that allows any pixi displayObject to be rendered to it. + * A RenderTexture is a special texture that allows any Pixi display object to be rendered to it. * - * __Hint__: All DisplayObjects (exmpl. Sprites) that render on RenderTexture should be preloaded. - * Otherwise black rectangles will be drawn instead. + * __Hint__: All DisplayObjects (i.e. Sprites) that render to a 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: + * 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"); @@ -18,7 +17,7 @@ * 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: + * 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); @@ -29,6 +28,7 @@ * @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 */ @@ -96,7 +96,12 @@ new PIXI.Rectangle(0, 0, this.width, this.height) ); - // each render texture can only belong to one renderer at the moment if its webGL + /** + * 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) @@ -117,6 +122,10 @@ this.baseTexture.source = this.textureBuffer.canvas; } + /** + * @property valid + * @type Boolean + */ this.valid = true; this._updateUvs(); @@ -126,7 +135,7 @@ PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture; /** - * Resize the RenderTexture. + * Resizes the RenderTexture. * * @method resize * @param width {Number} The width to resize to. @@ -139,7 +148,6 @@ this.valid = (width > 0 && height > 0); - this.width = this.frame.width = this.crop.width = width; this.height = this.frame.height = this.crop.height = height; @@ -182,7 +190,8 @@ * * @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, matrix, clear) @@ -230,7 +239,8 @@ * * @method renderCanvas * @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.renderCanvas = function(displayObject, matrix, clear) @@ -266,6 +276,7 @@ * Will return a HTML Image of the texture * * @method getImage + * @return {HTMLImage} */ PIXI.RenderTexture.prototype.getImage = function() { @@ -275,15 +286,22 @@ }; /** - * Will return a a base64 string of the texture + * Will return a a base64 encoded string of this texture. It works by calling RenderTexture.getCanvas and then running toDataURL on that. * - * @method getImage + * @method getBase64 + * @return {String} A base64 encoded string of the texture. */ PIXI.RenderTexture.prototype.getBase64 = function() { return this.getCanvas().toDataURL(); }; +/** + * Creates a Canvas element, renders this RenderTexture to it and then returns it. + * + * @method getCanvas + * @return {HTMLCanvasElement} A Canvas element with the texture rendered on. + */ PIXI.RenderTexture.prototype.getCanvas = function() { if (this.renderer.type === PIXI.WEBGL_RENDERER) @@ -322,4 +340,3 @@ }; PIXI.RenderTexture.tempMatrix = new PIXI.Matrix(); - diff --git a/src/pixi/textures/Texture.js b/src/pixi/textures/Texture.js index 6b40986..02b6513 100644 --- a/src/pixi/textures/Texture.js +++ b/src/pixi/textures/Texture.js @@ -9,7 +9,7 @@ /** * 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 @@ -57,7 +57,7 @@ this.frame = frame; /** - * The trim point + * The texture trim data. * * @property trim * @type Rectangle @@ -65,7 +65,7 @@ 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 @@ -83,9 +83,9 @@ /** * The WebGL UV data cache. * - * @private * @property _uvs * @type Object + * @private */ this._uvs = null; @@ -132,7 +132,6 @@ * Called when the base texture is loaded * * @method onBaseTextureLoaded - * @param event * @private */ PIXI.Texture.prototype.onBaseTextureLoaded = function() @@ -201,7 +200,7 @@ /** * Updates the internal WebGL UV cache. * - * @method _updateWebGLuvs + * @method _updateUvs * @private */ PIXI.Texture.prototype._updateUvs = function() @@ -223,12 +222,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 @@ -251,8 +249,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 @@ -267,8 +265,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 @@ -284,14 +281,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) { @@ -299,12 +295,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) { @@ -314,7 +310,6 @@ return texture; }; - PIXI.TextureUvs = function() { this.x0 = 0; diff --git a/src/pixi/utils/Detector.js b/src/pixi/utils/Detector.js index c0bd1ed..33a97a9 100644 --- a/src/pixi/utils/Detector.js +++ b/src/pixi/utils/Detector.js @@ -44,9 +44,10 @@ /** * 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 diff --git a/src/pixi/utils/EventTarget.js b/src/pixi/utils/EventTarget.js index 4e701d9..32536e3 100644 --- a/src/pixi/utils/EventTarget.js +++ b/src/pixi/utils/EventTarget.js @@ -4,7 +4,7 @@ */ /** - * Originally based on https://github.com/mrdoob/eventtarget.js/ from mr DOob. + * Originally based on https://github.com/mrdoob/eventtarget.js/ from mr Doob. * Currently takes inspiration from the nodejs EventEmitter, EventEmitter3, and smokesignals */ @@ -18,7 +18,7 @@ * PIXI.EventTarget.mixin(MyEmitter.prototype); * * var em = new MyEmitter(); - * em.emit('eventName', 'some data', 'some moar data', {}, null, ...); + * em.emit('eventName', 'some data', 'some more data', {}, null, ...); */ PIXI.EventTarget = { /** diff --git a/src/pixi/utils/Polyk.js b/src/pixi/utils/Polyk.js index aaf3bdb..0e150b2 100644 --- a/src/pixi/utils/Polyk.js +++ b/src/pixi/utils/Polyk.js @@ -28,23 +28,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) { @@ -132,6 +130,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) { @@ -160,8 +159,8 @@ * Checks whether a shape is convex * * @method _convex - * * @private + * @return {Boolean} */ PIXI.PolyK._convex = function(ax, ay, bx, by, cx, cy, sign) { diff --git a/src/pixi/utils/Utils.js b/src/pixi/utils/Utils.js index 0ed9b16..439dbb5 100644 --- a/src/pixi/utils/Utils.js +++ b/src/pixi/utils/Utils.js @@ -16,6 +16,7 @@ * * @method requestAnimationFrame */ + /** * A polyfill for cancelAnimationFrame * diff --git a/test/unit/pixi/primitives/Graphics.js b/test/unit/pixi/primitives/Graphics.js index 8bdf4e9..f3849eb 100644 --- a/test/unit/pixi/primitives/Graphics.js +++ b/test/unit/pixi/primitives/Graphics.js @@ -37,7 +37,7 @@ expect(obj).to.have.property('lineWidth', 0); expect(obj).to.have.property('width', 0); expect(obj).to.have.property('height', 0); - expect(obj).to.have.property('lineColor', 'black'); + expect(obj).to.have.property('lineColor', 0); expect(obj).to.have.deep.property('graphicsData.length', 0); // expect(obj).to.have.deep.property('currentPath.points.length', 0); });