jeena/pixi.js
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Merge pull request #529 from alvinsight/dev

Browse source 
Finally, a bit of refactoring, but obviously, docs :)
This commit is contained in:
Mat Groves 2014-01-27 11:17:29 -08:00
commit 9dbf8b47c1
32 changed files with 815 additions and 210 deletions
Download patch file Download diff file Expand all files Collapse all files

1
Gruntfile.js
View file

@ -26,6 +26,7 @@ module.exports = function(grunt) {
'<%= dirs.src %>/filters/FilterBlock.js',
'<%= dirs.src %>/text/Text.js',
'<%= dirs.src %>/text/BitmapText.js',
'<%= dirs.src %>/InteractionData.js',
'<%= dirs.src %>/InteractionManager.js',
'<%= dirs.src %>/display/Stage.js',
'<%= dirs.src %>/utils/Utils.js',

63
src/pixi/InteractionData.js Normal file
View file

@ -0,0 +1,63 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
* Holds all information related to an Interaction event
*
* @class InteractionData
* @constructor
*/
PIXI.InteractionData = function()
{
/**
* This point stores the global coords of where the touch/mouse event happened
*
* @property global
* @type Point
*/
this.global = new PIXI.Point();
// this is here for legacy... but will remove
this.local = new PIXI.Point();
/**
* The target Sprite that was interacted with
*
* @property target
* @type Sprite
*/
this.target = null;
/**
* When passed to an event handler, this will be the original DOM Event that was captured
*
* @property originalEvent
* @type Event
*/
this.originalEvent = null;
};
/**
* This will return the local coordinates of the specified displayObject for this InteractionData
*
* @method getLocalPosition
* @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off
* @return {Point} A point containing the coordinates of the InteractionData position relative to the DisplayObject
*/
PIXI.InteractionData.prototype.getLocalPosition = function(displayObject)
{
var worldTransform = displayObject.worldTransform;
var global = this.global;
// do a cheeky transform to get the mouse coords;
var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2],
a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5],
id = 1 / (a00 * a11 + a01 * -a10);
// set the mouse coords...
return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id,
a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id);
};
// constructor
PIXI.InteractionData.prototype.constructor = PIXI.InteractionData;

85
src/pixi/InteractionManager.js
View file

@ -4,6 +4,7 @@
/**
* The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive
* if its interactive parameter is set to true
* This manager also supports multitouch.
*
* @class InteractionManager
@ -129,12 +130,12 @@ PIXI.InteractionManager.prototype.setTarget = function(target)
/**
* Sets the dom element which will receive mouse/touch events. This is useful for when you have other DOM
* elements ontop of the renderers Canvas element. With this you'll be able to delegate another dom element
* 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
* to receive those events
*
* @method setTargetDomElement
* @param domElement {DOMElement} the dom element which will receive mouse and touch events
* @param domElement {DOMElement} the DOM element which will receive mouse and touch events
* @private
*/
PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement)
@ -315,7 +316,7 @@ PIXI.InteractionManager.prototype.onMouseDown = function(event)
{
this.mouse.originalEvent = event || window.event; //IE uses window.event
if(PIXI.AUTO_PREVENT_DEFULT)this.mouse.originalEvent.preventDefault();
if(PIXI.AUTO_PREVENT_DEFAULT)this.mouse.originalEvent.preventDefault();
// loop through interaction tree...
// hit test each item! ->
@ -347,7 +348,13 @@ PIXI.InteractionManager.prototype.onMouseDown = function(event)
}
};
/**
* Is called when the mouse button is moved out of the renderer element
*
* @method onMouseDown
* @param event {Event} The DOM event of a mouse button being moved out
* @private
*/
PIXI.InteractionManager.prototype.onMouseOut = function()
{
var length = this.interactiveItems.length;
@ -418,11 +425,11 @@ PIXI.InteractionManager.prototype.onMouseUp = function(event)
};
/**
* Tests if the current mouse coords hit a sprite
* Tests if the current mouse coordinates hit a sprite
*
* @method hitTest
* @param item {DisplayObject} The displayObject to test for a hit
* @param interactionData {InteractionData} The interactionData object to update in the case of a hit
* @param interactionData {InteractionData} The interactionData object to update in the case there is a hit
* @private
*/
PIXI.InteractionManager.prototype.hitTest = function(item, interactionData)
@ -541,7 +548,7 @@ PIXI.InteractionManager.prototype.onTouchStart = function(event)
{
var rect = this.interactionDOMElement.getBoundingClientRect();
if(PIXI.AUTO_PREVENT_DEFULT)event.preventDefault();
if(PIXI.AUTO_PREVENT_DEFAULT)event.preventDefault();
var changedTouches = event.changedTouches;
for (var i=0; i < changedTouches.length; i++)
@ -660,64 +667,4 @@ PIXI.InteractionManager.prototype.onTouchEnd = function(event)
this.pool.push(touchData);
this.touchs[touchEvent.identifier] = null;
}
};
/**
* Holds all information related to an Interaction event
*
* @class InteractionData
* @constructor
*/
PIXI.InteractionData = function()
{
/**
* This point stores the global coords of where the touch/mouse event happened
*
* @property global
* @type Point
*/
this.global = new PIXI.Point();
// this is here for legacy... but will remove
this.local = new PIXI.Point();
/**
* The target Sprite that was interacted with
*
* @property target
* @type Sprite
*/
this.target = null;
/**
* When passed to an event handler, this will be the original DOM Event that was captured
*
* @property originalEvent
* @type Event
*/
this.originalEvent = null;
};
/**
* This will return the local coords of the specified displayObject for this InteractionData
*
* @method getLocalPosition
* @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off
* @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject
*/
PIXI.InteractionData.prototype.getLocalPosition = function(displayObject)
{
var worldTransform = displayObject.worldTransform;
var global = this.global;
// do a cheeky transform to get the mouse coords;
var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2],
a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5],
id = 1 / (a00 * a11 + a01 * -a10);
// set the mouse coords...
return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id,
a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id);
};
// constructor
PIXI.InteractionData.prototype.constructor = PIXI.InteractionData;
};

4
src/pixi/Pixi.js
View file

@ -41,6 +41,6 @@ PIXI.scaleModes = {
NEAREST:1
};
// interaction frequancy
// interaction frequency
PIXI.INTERACTION_FREQUENCY = 30;
PIXI.AUTO_PREVENT_DEFULT = true;
PIXI.AUTO_PREVENT_DEFAULT = true;

12
src/pixi/core/Circle.js
View file

@ -7,8 +7,8 @@
*
* @class Circle
* @constructor
* @param x {Number} The X coord of the upper-left corner of the framing rectangle of this circle
* @param y {Number} The Y coord of the upper-left corner of the framing rectangle of this circle
* @param x {Number} The X coordinate of the upper-left corner of the framing rectangle of this circle
* @param y {Number} The Y coordinate of the upper-left corner of the framing rectangle of this circle
* @param radius {Number} The radius of the circle
*/
PIXI.Circle = function(x, y, radius)
@ -47,12 +47,12 @@ PIXI.Circle.prototype.clone = function()
};
/**
* Checks if the x, and y coords passed to this function are contained within this circle
* Checks whether the x, and y coordinates passed to this function are contained within this circle
*
* @method contains
* @param x {Number} The X coord of the point to test
* @param y {Number} The Y coord of the point to test
* @return {Boolean} if the x/y coords are within this polygon
* @param x {Number} The X coordinate of the point to test
* @param y {Number} The Y coordinate of the point to test
* @return {Boolean} Whether the x/y coordinates are within this polygon
*/
PIXI.Circle.prototype.contains = function(x, y)
{

18
src/pixi/core/Ellipse.js
View file

@ -7,8 +7,8 @@
*
* @class Ellipse
* @constructor
* @param x {Number} The X coord of the upper-left corner of the framing rectangle of this ellipse
* @param y {Number} The Y coord of the upper-left corner of the framing rectangle of this ellipse
* @param x {Number} The X coordinate of the upper-left corner of the framing rectangle of this ellipse
* @param y {Number} The Y coordinate of the upper-left corner of the framing rectangle of this ellipse
* @param width {Number} The overall width of this ellipse
* @param height {Number} The overall height of this ellipse
*/
@ -55,12 +55,12 @@ PIXI.Ellipse.prototype.clone = function()
};
/**
* Checks if the x and y coords passed to this function are contained within this ellipse
* Checks whether the x and y coordinates passed to this function are contained within this ellipse
*
* @method contains
* @param x {Number} The X coord of the point to test
* @param y {Number} The Y coord of the point to test
* @return {Boolean} if the x/y coords are within this ellipse
* @param x {Number} The X coordinate of the point to test
* @param y {Number} The Y coordinate of the point to test
* @return {Boolean} Whether the x/y coords are within this ellipse
*/
PIXI.Ellipse.prototype.contains = function(x, y)
{
@ -78,6 +78,12 @@ PIXI.Ellipse.prototype.contains = function(x, y)
return (normx + normy < 0.25);
};
/**
* Returns the framing rectangle of the ellipse as a PIXI.Rectangle object
*
* @method getBounds
* @return {Rectangle} the framing rectangle
*/
PIXI.Ellipse.prototype.getBounds = function()
{
return new PIXI.Rectangle(this.x, this.y, this.width, this.height);

139
src/pixi/core/Matrix.js
View file

@ -1,19 +1,36 @@
/*
* A lighter version of the rad gl-matrix created by Brandon Jones, Colin MacKenzie IV
* you both rock!
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
function determineMatrixArrayType() {
PIXI.Matrix = (typeof Float32Array !== 'undefined') ? Float32Array : Array;
return PIXI.Matrix;
}
/*
* @class Matrix
* The Matrix class will choose the best type of array to use between
* a regular javascript Array and a Float32Array if the latter is available
*
*/
PIXI.determineMatrixArrayType = function() {
return (typeof Float32Array !== 'undefined') ? Float32Array : Array;
};
determineMatrixArrayType();
PIXI.Matrix = PIXI.determineMatrixArrayType();
/**
* A lighter version of the rad gl-matrix created by Brandon Jones, Colin MacKenzie IV
* you both rock!
*
* @class mat3
* @static
*/
PIXI.mat3 = {};
/*
* Creates a mat3 object
*
* @method mat3.create
* @static
*/
PIXI.mat3.create = function()
{
var matrix = new PIXI.Matrix(9);
@ -31,7 +48,14 @@ PIXI.mat3.create = function()
return matrix;
};
/*
* Creates a mat3 identity matrix
*
* @method mat3.indentity
* @static
* @param matrix {Array|Float32Array}
*
*/
PIXI.mat3.identity = function(matrix)
{
matrix[0] = 1;
@ -47,33 +71,15 @@ PIXI.mat3.identity = function(matrix)
return matrix;
};
PIXI.mat4 = {};
PIXI.mat4.create = function()
{
var matrix = new PIXI.Matrix(16);
matrix[0] = 1;
matrix[1] = 0;
matrix[2] = 0;
matrix[3] = 0;
matrix[4] = 0;
matrix[5] = 1;
matrix[6] = 0;
matrix[7] = 0;
matrix[8] = 0;
matrix[9] = 0;
matrix[10] = 1;
matrix[11] = 0;
matrix[12] = 0;
matrix[13] = 0;
matrix[14] = 0;
matrix[15] = 1;
return matrix;
};
/*
* Multiplies the matrices given as parameters by themselves
*
* @method mat3.multiply
* @static
* @param mat {Array|Float32Array} the first operand (matrix)
* @param mat2 {Array|Float32Array} the second operand (matrix)
* @param [dest] {Array|Float32Array} the matrix which will hold the resulting matrix
*/
PIXI.mat3.multiply = function (mat, mat2, dest)
{
if (!dest) { dest = mat; }
@ -102,6 +108,14 @@ PIXI.mat3.multiply = function (mat, mat2, dest)
return dest;
};
/*
* Makes a copy of the matrix given in parameter
*
* @method mat3.clone
* @static
* @param mat {Array|Float32Array}
*
*/
PIXI.mat3.clone = function(mat)
{
var matrix = new PIXI.Matrix(9);
@ -119,6 +133,14 @@ PIXI.mat3.clone = function(mat)
return matrix;
};
/*
* Re-arranges the matrix
*
* @method mat3.transpose
* @static
* @param mat {Array|Float32Array}
* @param [dest] {Array|Float32Array} the matrix which will hold the resulting matrix
*/
PIXI.mat3.transpose = function (mat, dest)
{
// If we are transposing ourselves we can skip a few steps but have to cache some values
@ -147,6 +169,17 @@ PIXI.mat3.transpose = function (mat, dest)
return dest;
};
PIXI.mat4 = {};
/*
* Appends the mat3 into a mat4, therefore making it a regular mat4 object
*
* @method mat3.toMat4
* @static
* @param mat {Array|Float32Array}
* @param [dest] {Array|Float32Array} the matrix which will hold the resulting matrix
*
*/
PIXI.mat3.toMat4 = function (mat, dest)
{
if (!dest) { dest = PIXI.mat4.create(); }
@ -175,9 +208,13 @@ PIXI.mat3.toMat4 = function (mat, dest)
};
/////
/*
* Creates a new mat4 matrix
*
* @method mat4.create
* @static
*
*/
PIXI.mat4.create = function()
{
var matrix = new PIXI.Matrix(16);
@ -202,6 +239,16 @@ PIXI.mat4.create = function()
return matrix;
};
/*
* Re-arranges the matrix
*
*
* @method mat4.transpose
* @static
* @param mat {Array|Float32Array}
* @param [dest] {Array|Float32Array} the matrix which will hold the resulting matrix
*
*/
PIXI.mat4.transpose = function (mat, dest)
{
// If we are transposing ourselves we can skip a few steps but have to cache some values
@ -245,6 +292,15 @@ PIXI.mat4.transpose = function (mat, dest)
return dest;
};
/*
* Multiplies the matrices given as parameters by themselves
*
* @method mat4.multiply
* @static
* @param mat {Array|Float32Array} the first operand (matrix)
* @param mat2 {Array|Float32Array} the second operand (matrix)
* @param [dest] {Array|Float32Array} the matrix which will hold the resulting matrix
*/
PIXI.mat4.multiply = function (mat, mat2, dest)
{
if (!dest) { dest = mat; }
@ -293,3 +349,4 @@ PIXI.mat4.multiply = function (mat, mat2, dest)
};
PIXI.identityMatrix = PIXI.mat3.create();
PIXI.tempMatrix = PIXI.mat3.create();

4
src/pixi/core/Point.js
View file

@ -7,8 +7,8 @@
*
* @class Point
* @constructor
* @param x {Number} position of the point
* @param y {Number} position of the point
* @param x {Number} position of the point on the x axis
* @param y {Number} position of the point on the y axis
*/
PIXI.Point = function(x, y)
{

8
src/pixi/core/Polygon.js
View file

@ -49,12 +49,12 @@ PIXI.Polygon.prototype.clone = function()
};
/**
* Checks if the x and y coords passed to this function are contained within this polygon
* Checks whether the x and y coordinates passed to this function are contained within this polygon
*
* @method contains
* @param x {Number} The X coord of the point to test
* @param y {Number} The Y coord of the point to test
* @return {Boolean} if the x/y coords are within this polygon
* @param x {Number} The X coordinate of the point to test
* @param y {Number} The Y coordinate of the point to test
* @return {Boolean} Whether the x/y coordinates are within this polygon
*/
PIXI.Polygon.prototype.contains = function(x, y)
{

9
src/pixi/core/Rectangle.js
View file

@ -55,12 +55,12 @@ PIXI.Rectangle.prototype.clone = function()
};
/**
* Checks if the x and y coords passed to this function are contained within this Rectangle
* Checks whether the x and y coordinates passed to this function are contained within this Rectangle
*
* @method contains
* @param x {Number} The X coord of the point to test
* @param y {Number} The Y coord of the point to test
* @return {Boolean} if the x/y coords are within this Rectangle
* @param x {Number} The X coordinate of the point to test
* @param y {Number} The Y coordinate of the point to test
* @return {Boolean} Whether the x/y coords are within this Rectangle
*/
PIXI.Rectangle.prototype.contains = function(x, y)
{
@ -84,3 +84,4 @@ PIXI.Rectangle.prototype.contains = function(x, y)
// constructor
PIXI.Rectangle.prototype.constructor = PIXI.Rectangle;
PIXI.EmptyRectangle = new PIXI.Rectangle(0,0,0,0);

66
src/pixi/display/DisplayObject.js
View file

@ -173,12 +173,37 @@ PIXI.DisplayObject = function()
this._sr = 0;
this._cr = 1;
/**
* The area the filter is applied to
*
* @property filterArea
* @type Rectangle
*/
this.filterArea = new PIXI.Rectangle(0,0,1,1);
/**
* The original, cached bounds of the object
*
* @property _bounds
* @type Rectangle
* @private
*/
this._bounds = new PIXI.Rectangle(0, 0, 1, 1);
/**
* The most up-to-date bounds of the object
*
* @property _currentBounds
* @type Rectangle
* @private
*/
this._currentBounds = null;
/**
* The original, cached mask of the object
*
* @property _currentBounds
* @type Rectangle
* @private
*/
this._mask = null;
/*
@ -419,11 +444,23 @@ PIXI.DisplayObject.prototype.updateTransform = function()
this.worldAlpha = this.alpha * this.parent.worldAlpha;
};
/**
* Retrieves the bounds of the displayObject as a rectangle object
*
* @method getBounds
* @return {Rectangle} the rectangular bounding area
*/
PIXI.DisplayObject.prototype.getBounds = function()
{
return PIXI.EmptyRectangle;
};
/**
* Retrieves the local bounds of the displayObject as a rectangle object
*
* @method getLocalBounds
* @return {Rectangle} the rectangular bounding area
*/
PIXI.DisplayObject.prototype.getLocalBounds = function()
{
var matrixCache = this.worldTransform;
@ -439,12 +476,25 @@ PIXI.DisplayObject.prototype.getLocalBounds = function()
return bounds;
};
/**
* Sets the object's stage reference, the stage this object is connected to
*
* @method setStageReference
* @param stage {Stage} the stage that the object will have as its current stage reference
*/
PIXI.DisplayObject.prototype.setStageReference = function(stage)
{
this.stage = stage;
if(this._interactive)this.stage.dirty = true;
};
/**
* Renders the object using the WebGL renderer
*
* @method _renderWebGL
* @param renderSession {RenderSession}
* @private
*/
PIXI.DisplayObject.prototype._renderWebGL = function(renderSession)
{
// OVERWRITE;
@ -452,12 +502,16 @@ PIXI.DisplayObject.prototype._renderWebGL = function(renderSession)
renderSession = renderSession;
};
/**
* Renders the object using the Canvas renderer
*
* @method _renderCanvas
* @param renderSession {RenderSession}
* @private
*/
PIXI.DisplayObject.prototype._renderCanvas = function(renderSession)
{
// OVERWRITE;
// this line is just here to pass jshinting :)
renderSession = renderSession;
};
PIXI.EmptyRectangle = new PIXI.Rectangle(0,0,0,0);
};

32
src/pixi/display/DisplayObjectContainer.js
View file

@ -193,6 +193,12 @@ PIXI.DisplayObjectContainer.prototype.updateTransform = function()
}
};
/**
* Retrieves the bounds of the displayObjectContainer as a rectangle object
*
* @method getBounds
* @return {Rectangle} the rectangular bounding area
*/
PIXI.DisplayObjectContainer.prototype.getBounds = function()
{
if(this.children.length === 0)return PIXI.EmptyRectangle;
@ -241,6 +247,12 @@ PIXI.DisplayObjectContainer.prototype.getBounds = function()
return bounds;
};
/**
* Sets the container's stage reference, the stage this object is connected to
*
* @method setStageReference
* @param stage {Stage} the stage that the container will have as its current stage reference
*/
PIXI.DisplayObjectContainer.prototype.setStageReference = function(stage)
{
this.stage = stage;
@ -253,6 +265,11 @@ PIXI.DisplayObjectContainer.prototype.setStageReference = function(stage)
}
};
/**
* removes the current stage reference of the container
*
* @method removeStageReference
*/
PIXI.DisplayObjectContainer.prototype.removeStageReference = function()
{
@ -267,6 +284,13 @@ PIXI.DisplayObjectContainer.prototype.removeStageReference = function()
this.stage = null;
};
/**
* Renders the object using the WebGL renderer
*
* @method _renderWebGL
* @param renderSession {RenderSession}
* @private
*/
PIXI.DisplayObjectContainer.prototype._renderWebGL = function(renderSession)
{
if(!this.visible || this.alpha <= 0)return;
@ -311,6 +335,13 @@ PIXI.DisplayObjectContainer.prototype._renderWebGL = function(renderSession)
}
};
/**
* Renders the object using the Canvas renderer
*
* @method _renderCanvas
* @param renderSession {RenderSession}
* @private
*/
PIXI.DisplayObjectContainer.prototype._renderCanvas = function(renderSession)
{
if(this.visible === false || this.alpha === 0)return;
@ -332,4 +363,3 @@ PIXI.DisplayObjectContainer.prototype._renderCanvas = function(renderSession)
}
};

37
src/pixi/display/Sprite.js
View file

@ -1,4 +1,6 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
* The Sprite object is the base for all textured objects that are rendered to the screen
@ -7,7 +9,11 @@
* @extends DisplayObjectContainer
* @constructor
* @param texture {Texture} The texture for this sprite
* @type String
*
* A sprite can be created directly from an image like this :
* var sprite = nex PIXI.Sprite.FromImage('assets/image.png');
* yourStage.addChild(sprite);
* then obviously don't forget to add it to the stage you have already created
*/
PIXI.Sprite = function(texture)
{
@ -15,9 +21,9 @@ PIXI.Sprite = function(texture)
/**
* The anchor sets the origin point of the texture.
* The default is 0,0 this means the textures origin is the top left
* Setting than anchor to 0.5,0.5 means the textures origin is centered
* Setting the anchor to 1,1 would mean the textures origin points will be the bottom right
* The default is 0,0 this means the texture's origin is the top left
* Setting than anchor to 0.5,0.5 means the textures origin is centred
* Setting the anchor to 1,1 would mean the textures origin points will be the bottom right corner
*
* @property anchor
* @type Point
@ -158,6 +164,12 @@ PIXI.Sprite.prototype.onTextureUpdate = function()
this.updateFrame = true;
};
/**
* Retrieves the bounds of the sprite as a rectangle object
*
* @method getBounds
* @return {Rectangle} the rectangular bounding area
*/
PIXI.Sprite.prototype.getBounds = function()
{
@ -231,7 +243,13 @@ PIXI.Sprite.prototype.getBounds = function()
return bounds;
};
/**
* Renders the object using the WebGL renderer
*
* @method _renderWebGL
* @param renderSession {RenderSession}
* @private
*/
PIXI.Sprite.prototype._renderWebGL = function(renderSession)
{
// if the sprite is not visible or the alpha is 0 then no need to render this element
@ -289,6 +307,13 @@ PIXI.Sprite.prototype._renderWebGL = function(renderSession)
//TODO check culling
};
/**
* Renders the object using the Canvas renderer
*
* @method _renderCanvas
* @param renderSession {RenderSession}
* @private
*/
PIXI.Sprite.prototype._renderCanvas = function(renderSession)
{
// if the sprite is not visible or the alpha is 0 then no need to render this element

31
src/pixi/display/SpriteBatch.js
View file

@ -1,5 +1,14 @@
/**
* @author Mat Groves http://matgroves.com/
*/
/**
* TODO-Alvin
*
* @class SpriteBatch
* @constructor
* @param texture {Texture}
*/
PIXI.SpriteBatch = function(texture)
{
PIXI.DisplayObjectContainer.call( this);
@ -22,6 +31,12 @@ PIXI.SpriteBatch.prototype.initWebGL = function(gl)
// alert("!")
};
/*
* Updates the object transform for rendering
*
* @method updateTransform
* @private
*/
PIXI.SpriteBatch.prototype.updateTransform = function()
{
// dont need to!
@ -29,6 +44,13 @@ PIXI.SpriteBatch.prototype.updateTransform = function()
// PIXI.DisplayObjectContainer.prototype.updateTransform.call( this );
};
/**
* Renders the object using the WebGL renderer
*
* @method _renderWebGL
* @param renderSession {RenderSession}
* @private
*/
PIXI.SpriteBatch.prototype._renderWebGL = function(renderSession)
{
if(!this.visible || this.alpha <= 0 || !this.children.length)return;
@ -48,6 +70,13 @@ PIXI.SpriteBatch.prototype._renderWebGL = function(renderSession)
};
/**
* Renders the object using the Canvas renderer
*
* @method _renderCanvas
* @param renderSession {RenderSession}
* @private
*/
PIXI.SpriteBatch.prototype._renderCanvas = function(renderSession)
{
var context = renderSession.context;

9
src/pixi/display/Stage.js
View file

@ -8,8 +8,15 @@
* @class Stage
* @extends DisplayObjectContainer
* @constructor
* @param backgroundColor {Number} the background color of the stage, easiest way to pass this in is in hex format
* @param backgroundColor {Number} the background color of the stage, you have to pass this in is in hex format
* like: 0xFFFFFF for white
*
* @example Creating a stage is a mandatory process when you use Pixi, which is as simple as this :
* var stage = new PIXI.Stage(0xFFFFFF);
* where the parameter given is the background colour of the stage, in hex
* you will use this stage instance to add your sprites to it and therefore to the renderer
* Here is how to add a sprite to the stage :
* stage.addChild(sprite);
*/
PIXI.Stage = function(backgroundColor)
{

30
src/pixi/extras/Rope.js
View file

@ -1,7 +1,14 @@
/**
* @author Mat Groves http://matgroves.com/
/* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
*
* @class Rope
* @constructor
* @param texture {Texture} TODO-Alvin
* @param y {Array} TODO-Alvin
*
*/
PIXI.Rope = function(texture, points)
{
PIXI.Strip.call( this, texture );
@ -30,6 +37,11 @@ PIXI.Rope = function(texture, points)
PIXI.Rope.prototype = Object.create( PIXI.Strip.prototype );
PIXI.Rope.prototype.constructor = PIXI.Rope;
/*
* Refreshes TODO-Alvin
*
* @method refresh
*/
PIXI.Rope.prototype.refresh = function()
{
var points = this.points;
@ -96,6 +108,12 @@ PIXI.Rope.prototype.refresh = function()
}
};
/*
* Updates the object transform for rendering
*
* @method updateTransform
* @private
*/
PIXI.Rope.prototype.updateTransform = function()
{
@ -157,7 +175,13 @@ PIXI.Rope.prototype.updateTransform = function()
PIXI.DisplayObjectContainer.prototype.updateTransform.call( this );
};
/*
* Sets the texture that the Rope will use
* TODO-Alvin
*
* @method setTexture
* @param texture {Texture} the texture that will be used
*/
PIXI.Rope.prototype.setTexture = function(texture)
{
// stop current texture

25
src/pixi/extras/Strip.js
View file

@ -2,6 +2,16 @@
* @author Mat Groves http://matgroves.com/
*/
/**
*
* @class Strip
* @constructor
* @param texture {Texture} TODO-Alvin
* @param width {Number} the width of the TODO-Alvin
* @param height {Number} the height of the TODO-Alvin
*
*/
PIXI.Strip = function(texture, width, height)
{
PIXI.DisplayObjectContainer.call( this );
@ -69,6 +79,14 @@ PIXI.Strip = function(texture, width, height)
PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
PIXI.Strip.prototype.constructor = PIXI.Strip;
/*
* Sets the texture that the Strip will use
* TODO-Alvin
*
* @method setTexture
* @param texture {Texture} the texture that will be used
* @private
*/
PIXI.Strip.prototype.setTexture = function(texture)
{
//TODO SET THE TEXTURES
@ -81,6 +99,13 @@ PIXI.Strip.prototype.setTexture = function(texture)
this.updateFrame = true;
};
/**
* When the texture is updated, this event will fire to update the scale and frame
*
* @method onTextureUpdate
* @param event
* @private
*/
PIXI.Strip.prototype.onTextureUpdate = function()
{
this.updateFrame = true;

41
src/pixi/extras/TilingSprite.js
View file

@ -16,7 +16,19 @@ PIXI.TilingSprite = function(texture, width, height)
{
PIXI.Sprite.call( this, texture);
/**
* The with of the tiling sprite
*
* @property width
* @type Number
*/
this.width = width || 100;
/**
* The height of the tiling sprite
*
* @property height
* @type Number
*/
this.height = height || 100;
/**
@ -27,7 +39,12 @@ PIXI.TilingSprite = function(texture, width, height)
*/
this.tileScale = new PIXI.Point(1,1);
/**
*
*
* @property tileScaleOffset
* @type Point
*/
this.tileScaleOffset = new PIXI.Point(1,1);
/**
@ -40,7 +57,22 @@ PIXI.TilingSprite = function(texture, width, height)
this.renderable = true;
/**
* The tint applied to the sprite. This is a hex value
*
* @property tint
* @type Number
* @default 0xFFFFFF
*/
this.tint = 0xFFFFFF;
/**
* The blend mode to be applied to the sprite
*
* @property blendMode
* @type Number
* @default PIXI.blendModes.NORMAL;
*/
this.blendMode = PIXI.blendModes.NORMAL;
};
@ -80,6 +112,13 @@ Object.defineProperty(PIXI.TilingSprite.prototype, 'height', {
}
});
/**
* When the texture is updated, this event will fire to update the scale and frame
*
* @method onTextureUpdate
* @param event
* @private
*/
PIXI.TilingSprite.prototype.onTextureUpdate = function()
{
// so if _width is 0 then width was not set..

16
src/pixi/filters/AbstractFilter.js
View file

@ -21,16 +21,26 @@ PIXI.AbstractFilter = function(fragmentSrc, uniforms)
*/
this.passes = [this];
/**
* @property shaders
* @type Array an array of shaders
* @private
*/
this.shaders = [];
this.dirty = true;
this.padding = 0;
/**
@property uniforms
@private
* @property uniforms
* @type object
* @private
*/
this.uniforms = uniforms || {};
/**
* @property fragmentSrc
* @type Array
* @private
*/
this.fragmentSrc = fragmentSrc || [];
};

2
src/pixi/filters/AlphaMaskFilter.js
View file

@ -6,7 +6,7 @@
*
* The AlphaMaskFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object.
* You can use this filter to apply all manor of crazy warping effects
* Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y.
* Currently the r property of the texture is used to offset the x and the g propery of the texture is used to offset the y.
* @class AlphaMaskFilter
* @contructor
* @param texture {Texture} The texture used for the displacemtent map * must be power of 2 texture at the moment

7
src/pixi/loaders/AssetLoader.js
View file

@ -70,7 +70,12 @@ PIXI.AssetLoader = function(assetURLs, crossorigin)
// constructor
PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader;
/**
* Given a filename, returns its extension, wil
*
* @method _getDataType
* @param str {String} the name of the asset
*/
PIXI.AssetLoader.prototype._getDataType = function(str)
{
var test = 'data:';

12
src/pixi/loaders/AtlasLoader.js
View file

@ -25,8 +25,11 @@ PIXI.AtlasLoader = function (url, crossorigin) {
// constructor
PIXI.AtlasLoader.constructor = PIXI.AtlasLoader;
/**
* This will begin loading the JSON file
/**
* Starts loading the JSON file
*
* @method load
*/
PIXI.AtlasLoader.prototype.load = function () {
this.ajaxRequest = new PIXI.AjaxRequest();
@ -39,6 +42,7 @@ PIXI.AtlasLoader.prototype.load = function () {
/**
* Invoke when JSON file is loaded
* @method onAtlasLoaded
* @private
*/
PIXI.AtlasLoader.prototype.onAtlasLoaded = function () {
@ -156,7 +160,8 @@ PIXI.AtlasLoader.prototype.onAtlasLoaded = function () {
};
/**
* Invoke when json file loaded
* Invoke when json file has loaded
* @method onLoaded
* @private
*/
PIXI.AtlasLoader.prototype.onLoaded = function () {
@ -174,6 +179,7 @@ PIXI.AtlasLoader.prototype.onLoaded = function () {
/**
* Invoke when error occured
* @method onError
* @private
*/
PIXI.AtlasLoader.prototype.onError = function () {

2
src/pixi/loaders/BitmapFontLoader.js
View file

@ -17,7 +17,7 @@
PIXI.BitmapFontLoader = function(url, crossorigin)
{
/*
* i use texture packer to load the assets..
* I use texture packer to load the assets..
* http://www.codeandweb.com/texturepacker
* make sure to set the format as 'JSON'
*/

106
src/pixi/primitives/Graphics.js
View file

@ -5,8 +5,8 @@
/**
* The Graphics class contains a set of methods that you can use to create primitive shapes and lines.
* It is important to know that with the webGL renderer only simple polys can be filled at this stage
* Complex polys will not be filled. Heres an example of a complex poly: http://www.goodboydigital.com/wp-content/uploads/2013/06/complexPolygon.png
* It is important to know that with the webGL renderer only simple polygons can be filled at this stage
* Complex polygons will not be filled. Heres an example of a complex polygon: http://www.goodboydigital.com/wp-content/uploads/2013/06/complexPolygon.png
*
* @class Graphics
* @extends DisplayObjectContainer
@ -51,8 +51,23 @@ PIXI.Graphics = function()
*/
this.graphicsData = [];
this.tint = 0xFFFFFF;// * Math.random();
/**
* The tint applied to the graphic shape. This is a hex value
*
* @property tint
* @type Number
* @default 0xFFFFFF
*/
this.tint = 0xFFFFFF;// * Math.random();
/**
* The blend mode to be applied to the graphic shape
*
* @property blendMode
* @type Number
* @default PIXI.blendModes.NORMAL;
*/
this.blendMode = PIXI.blendModes.NORMAL;
/**
@ -64,12 +79,37 @@ PIXI.Graphics = function()
*/
this.currentPath = {points:[]};
/**
* WebGL lines ? TODO-Alvin
*
* @property _webGL
* @type Array
* @private
*/
this._webGL = [];
/**
* Whether this shape is used as a mask
*
* @property isMask
* @type isMask
*/
this.isMask = false;
/**
* The bounds of the graphic shape as rectangle object
*
* @property bounds
* @type Rectangle
*/
this.bounds = null;
/**
* the bound padding TODO-Alvin
*
* @property bounds
* @type Number
*/
this.boundsPadding = 10;
};
@ -110,7 +150,7 @@ Object.defineProperty(PIXI.Graphics.prototype, "cacheAsBitmap", {
/**
* Specifies a line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method.
* 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
@ -135,8 +175,8 @@ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
* Moves the current drawing position to (x, y).
*
* @method moveTo
* @param x {Number} the X coord to move to
* @param y {Number} the Y coord to move to
* @param x {Number} the X coordinate to move to
* @param y {Number} the Y coordinate to move to
*/
PIXI.Graphics.prototype.moveTo = function(x, y)
{
@ -155,8 +195,8 @@ PIXI.Graphics.prototype.moveTo = function(x, y)
* the current drawing position is then set to (x, y).
*
* @method lineTo
* @param x {Number} the X coord to draw to
* @param y {Number} the Y coord to draw to
* @param x {Number} the X coordinate to draw to
* @param y {Number} the Y coordinate to draw to
*/
PIXI.Graphics.prototype.lineTo = function(x, y)
{
@ -169,8 +209,8 @@ PIXI.Graphics.prototype.lineTo = function(x, y)
* (such as lineTo() or drawCircle()) use when drawing.
*
* @method beginFill
* @param color {uint} the color of the fill
* @param alpha {Number} the alpha
* @param color {Number} the color of the fill
* @param alpha {Number} the alpha of the fill
*/
PIXI.Graphics.prototype.beginFill = function(color, alpha)
{
@ -216,8 +256,8 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
* Draws a circle.
*
* @method drawCircle
* @param x {Number} The X coord of the center of the circle
* @param y {Number} The Y coord of the center of the circle
* @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
*/
PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
@ -237,10 +277,10 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
* Draws an ellipse.
*
* @method drawEllipse
* @param x {Number}
* @param y {Number}
* @param width {Number}
* @param height {Number}
* @param x {Number} The X coordinate of the upper-left corner of the framing rectangle of this ellipse
* @param y {Number} The Y coordinate of the upper-left corner of the framing rectangle of this ellipse
* @param width {Number} The width of the ellipse
* @param height {Number} The height of the ellipse
*/
PIXI.Graphics.prototype.drawEllipse = function( x, y, width, height)
{
@ -293,6 +333,13 @@ PIXI.Graphics.prototype.generateTexture = function()
return texture;
};
/**
* Renders the object using the WebGL renderer
*
* @method _renderWebGL
* @param renderSession {RenderSession}
* @private
*/
PIXI.Graphics.prototype._renderWebGL = function(renderSession)
{
// if the sprite is not visible or the alpha is 0 then no need to render this element
@ -354,6 +401,13 @@ PIXI.Graphics.prototype._renderWebGL = function(renderSession)
}
};
/**
* Renders the object using the Canvas renderer
*
* @method _renderCanvas
* @param renderSession {RenderSession}
* @private
*/
PIXI.Graphics.prototype._renderCanvas = function(renderSession)
{
// if the sprite is not visible or the alpha is 0 then no need to render this element
@ -378,6 +432,12 @@ PIXI.Graphics.prototype._renderCanvas = function(renderSession)
}
};
/**
* Retrieves the bounds of the graphic shape as a rectangle object
*
* @method getBounds
* @return {Rectangle} the rectangular bounding area
*/
PIXI.Graphics.prototype.getBounds = function()
{
if(!this.bounds)this.updateBounds();
@ -446,6 +506,11 @@ PIXI.Graphics.prototype.getBounds = function()
return bounds;
};
/**
* Update the bounds of the object
*
* @method updateBounds
*/
PIXI.Graphics.prototype.updateBounds = function()
{
@ -510,6 +575,13 @@ PIXI.Graphics.prototype.updateBounds = function()
this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2);
};
/**
* Generates the cached sprite that was made using the generate TODO-Alvin
*
* @method _generateCachedSprite
* @private
*/
PIXI.Graphics.prototype._generateCachedSprite = function()
{
var bounds = this.getBounds();
@ -555,5 +627,3 @@ PIXI.Graphics.POLY = 0;
PIXI.Graphics.RECT = 1;
PIXI.Graphics.CIRC = 2;
PIXI.Graphics.ELIP = 3;
PIXI.tempMatrix = PIXI.mat3.create();

8
src/pixi/renderers/canvas/CanvasGraphics.js
View file

@ -20,8 +20,8 @@ PIXI.CanvasGraphics = function()
* @static
* @private
* @method renderGraphics
* @param graphics {Graphics}
* @param context {Context2D}
* @param graphics {Graphics} the actual graphics object to render
* @param context {Context2D} the 2d drawing method of the canvas
*/
PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
{
@ -154,8 +154,8 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
* @static
* @private
* @method renderGraphicsMask
* @param graphics {Graphics}
* @param context {Context2D}
* @param graphics {Graphics} the graphics which will be used as a mask
* @param context {Context2D} the context 2d method of the canvas
*/
PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context)
{

62
src/pixi/renderers/canvas/CanvasRenderer.js
View file

@ -8,10 +8,10 @@
*
* @class CanvasRenderer
* @constructor
* @param width=0 {Number} the width of the canvas view
* @param height=0 {Number} the height of the canvas view
* @param view {Canvas} the canvas to use as a view, optional
* @param transparent=false {Boolean} the transparency of the render view, default false
* @param width=800 {Number} the width of the canvas view
* @param height=600 {Number} the height of the canvas view
* @param [view] {HTMLCanvasElement} the canvas to use as a view, optional
* @param [transparent=false] {Boolean} the transparency of the render view, default false
*/
PIXI.CanvasRenderer = function(width, height, view, transparent)
{
@ -19,6 +19,13 @@ PIXI.CanvasRenderer = function(width, height, view, transparent)
this.type = PIXI.CANVAS_RENDERER;
/**
* Whether the render view is transparent
*
* @property transparent
* @type Boolean
*/
this.transparent = !!transparent;
if(!PIXI.blendModesCanvas)
@ -87,17 +94,17 @@ PIXI.CanvasRenderer = function(width, height, view, transparent)
this.height = height || 600;
/**
* The canvas element that the everything is drawn to
* The canvas element that everything is drawn to
*
* @property view
* @type Canvas
* @type HTMLCanvasElement
*/
this.view = view || document.createElement( "canvas" );
/**
* The canvas context that the everything is drawn to
* The canvas 2d context that everything is drawn to
* @property context
* @type Canvas 2d Context
* @type HTMLCanvasElement 2d Context
*/
this.context = this.view.getContext( "2d", { alpha: this.transparent } );
@ -109,8 +116,18 @@ PIXI.CanvasRenderer = function(width, height, view, transparent)
this.view.height = this.height;
this.count = 0;
/**
* Instance of a PIXI.CanvasMaskManager, handles masking when using the canvas renderer
* @property CanvasMaskManager
* @type CanvasMaskManager
*/
this.maskManager = new PIXI.CanvasMaskManager();
/**
* RenderSession TODO-Alvin
* @property renderSession
* @type Object
*/
this.renderSession = {
context: this.context,
maskManager: this.maskManager,
@ -190,7 +207,7 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
};
/**
* resizes the canvas view to the specified width and height
* Resizes the canvas view to the specified width and height
*
* @method resize
* @param width {Number} the new width of the canvas view
@ -210,11 +227,12 @@ PIXI.CanvasRenderer.prototype.resize = function(width, height)
*
* @method renderDisplayObject
* @param displayObject {DisplayObject} The displayObject to render
* @param context {Context2D} the context 2d method of the canvas
* @private
*/
PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject, context)
{
// no longer recurrsive!
// no longer recursive!
//var transform;
//var context = this.context;
@ -312,6 +330,15 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
}
};
/**
* Creates a Canvas element of the given size
*
* @method CanvasBuffer
* @param width {Number} the width for the newly created canvas
* @param height {Number} the height for the newly created canvas
* @static
* @private
*/
PIXI.CanvasBuffer = function(width, height)
{
this.width = width;
@ -324,11 +351,26 @@ PIXI.CanvasBuffer = function(width, height)
this.canvas.height = height;
};
/**
* Clears the canvas that was created by the CanvasBuffer class
*
* @method clear
* @private
*/
PIXI.CanvasBuffer.prototype.clear = function()
{
this.context.clearRect(0,0, this.width, this.height);
};
/**
* Resizes the canvas that was created by the CanvasBuffer class to the specified width and height
*
* @method resize
* @param width {Number} the new width of the canvas
* @param height {Number} the new height of the canvas
* @private
*/
PIXI.CanvasBuffer.prototype.resize = function(width, height)
{
this.width = this.canvas.width = width;

19
src/pixi/renderers/canvas/utils/CanvasMaskManager.js
View file

@ -3,12 +3,23 @@
*
*
*/
/**
* A set of functions used to handle masking
*
* @class CanvasMaskManager
*/
PIXI.CanvasMaskManager = function()
{
};
/**
* TODO-Alvin
*
* @method pushMask
* @param maskData TODO-Alvin
* @param context {Context2D} the 2d drawing method of the canvas
*/
PIXI.CanvasMaskManager.prototype.pushMask = function(maskData, context)
{
context.save();
@ -28,6 +39,12 @@ PIXI.CanvasMaskManager.prototype.pushMask = function(maskData, context)
maskData.worldAlpha = cacheAlpha;
};
/**
* Restores the current drawing context to the state it was before the mask was applied
*
* @method popMask
* @param context {Context2D} the 2d drawing method of the canvas
*/
PIXI.CanvasMaskManager.prototype.popMask = function(context)
{
context.restore();

59
src/pixi/renderers/canvas/utils/CanvasTinter.js
View file

@ -5,6 +5,11 @@
*
*/
/**
* @class CanvasTinter
* @constructor
* @static
*/
PIXI.CanvasTinter = function()
{
/// this.textureCach
@ -13,6 +18,12 @@ PIXI.CanvasTinter = function()
//PIXI.CanvasTinter.cachTint = true;
/**
* TODO-Alvin
* @method getTintedTexture
* @param sprite {Sprite} the sprite to tint
* @param color {Number} the color to use to tint the sprite with
*/
PIXI.CanvasTinter.getTintedTexture = function(sprite, color)
{
//
@ -58,6 +69,13 @@ PIXI.CanvasTinter.getTintedTexture = function(sprite, color)
return canvas;
};
/**
* Tint a texture using the "multiply" operation
* @method tintWithMultiply
* @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
*/
PIXI.CanvasTinter.tintWithMultiply = function(texture, color, canvas)
{
var context = canvas.getContext( "2d" );
@ -96,6 +114,13 @@ PIXI.CanvasTinter.tintWithMultiply = function(texture, color, canvas)
frame.height);
};
/**
* 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
* @param canvas {HTMLCanvasElement} the current canvas
*/
PIXI.CanvasTinter.tintWithOverlay = function(texture, color, canvas)
{
var context = canvas.getContext( "2d" );
@ -127,7 +152,13 @@ PIXI.CanvasTinter.tintWithOverlay = function(texture, color, canvas)
};
/**
* 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
* @param canvas {HTMLCanvasElement} the current canvas
*/
PIXI.CanvasTinter.tintWithPerPixel = function(texture, color, canvas)
{
var context = canvas.getContext( "2d" );
@ -165,6 +196,11 @@ PIXI.CanvasTinter.tintWithPerPixel = function(texture, color, canvas)
context.putImageData(pixelData, 0, 0);
};
/**
* Rounds the specified color according to the PIXI.CanvasTinter.cacheStepsPerColorChannel
* @method roundColor
* @param color {number} the color to round, should be a hex color
*/
PIXI.CanvasTinter.roundColor = function(color)
{
var step = PIXI.CanvasTinter.cacheStepsPerColorChannel;
@ -178,11 +214,30 @@ PIXI.CanvasTinter.roundColor = function(color)
return PIXI.rgb2hex(rgbValues);
};
/**
*
* 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
*
* @property convertTintToImage
* @type Boolean
*/
PIXI.CanvasTinter.convertTintToImage = false;
/**
* 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();
PIXI.CanvasTinter.tintMethod = PIXI.CanvasTinter.canUseMultiply ? PIXI.CanvasTinter.tintWithMultiply : PIXI.CanvasTinter.tintWithPerPixel;

72
src/pixi/renderers/webgl/WebGLRenderer.js
View file

@ -14,7 +14,7 @@ PIXI.glContexts = []; // this is where we store the webGL contexts for easy acce
* @constructor
* @param width=0 {Number} the width of the canvas view
* @param height=0 {Number} the height of the canvas view
* @param view {Canvas} the canvas to use as a view, optional
* @param view {HTMLCanvasElement} the canvas to use as a view, optional
* @param transparent=false {Boolean} If the render view is transparent, default false
* @param antialias=false {Boolean} sets antialias (only applicable in chrome at the moment)
*
@ -26,17 +26,44 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
this.type = PIXI.WEBGL_RENDERER;
// do a catch.. only 1 webGL renderer..
/**
* Whether the render view is transparent
*
* @property transparent
* @type Boolean
*/
this.transparent = !!transparent;
/**
* The width of the canvas view
*
* @property width
* @type Number
* @default 800
*/
this.width = width || 800;
/**
* The height of the canvas view
*
* @property height
* @type Number
* @default 600
*/
this.height = height || 600;
/**
* The canvas element that everything is drawn to
*
* @property view
* @type HTMLCanvasElement
*/
this.view = view || document.createElement( 'canvas' );
this.view.width = this.width;
this.view.height = this.height;
// deal with losing context..
// TODO-Alvin
this.contextLost = this.handleContextLost.bind(this);
this.contextRestoredLost = this.handleContextRestored.bind(this);
// console.log(this.handleContextRestored)
@ -215,6 +242,14 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
*/
};
/**
* Renders a display Object
*
* @method renderDIsplayObject
* @param displayObject {DisplayObject} The DisplayObject to render
* @param projection {Point}
* @param buffer {Array} buffer TODO-Alvin
*/
PIXI.WebGLRenderer.prototype.renderDisplayObject = function(displayObject, projection, buffer)
{
// reset the render session data..
@ -289,6 +324,13 @@ PIXI.WebGLRenderer.destroyTexture = function(texture)
texture._glTextures.length = 0;
};
/**
* TODO-Alvin
*
* @method updateTextureFrame
* @param texture {Texture} The texture to update the frame from
* @private
*/
PIXI.WebGLRenderer.updateTextureFrame = function(texture)
{
texture.updateFrame = false;
@ -319,6 +361,14 @@ PIXI.WebGLRenderer.prototype.resize = function(width, height)
this.projection.y = -this.height/2;
};
/**
* Creates a WebGL texture
*
* @method createWebGLTexture
* @param texture {Texture} the texture to render
* @param gl {webglContext} the WebGL context
* @static
*/
PIXI.createWebGLTexture = function(texture, gl)
{
@ -353,6 +403,14 @@ PIXI.createWebGLTexture = function(texture, gl)
return texture._glTextures[gl.id];
};
/**
* Updates a WebGL texture
*
* @method updateWebGLTexture
* @param texture {Texture} the texture to update
* @param gl {webglContext} the WebGL context
* @private
*/
PIXI.updateWebGLTexture = function(texture, gl)
{
if( texture._glTextures[gl.id] )
@ -446,10 +504,20 @@ PIXI.WebGLRenderer.prototype.handleContextRestored = function()
texture._glTextures = [];
}
/**
* Whether the context was lost
* @property contextLost
* @type Boolean
*/
this.contextLost = false;
};
/**
* Destroy TODO-Alvin
*
* @method destroy
*/
PIXI.WebGLRenderer.prototype.destroy = function()
{

12
src/pixi/utils/Detector.js
View file

@ -7,13 +7,11 @@
* WebGL is the preferred renderer as it is a lot faster. If webGL is not supported by
* the browser then this function will return a canvas renderer
*
* @method autoDetectRenderer
* @static
* @param width {Number} the width of the renderers view
* @param height {Number} the height of the renderers view
* @param view {Canvas} the canvas to use as a view, optional
* @param transparent=false {Boolean} the transparency of the render view, default false
* @param antialias=false {Boolean} sets antialias (only applicable in webGL chrome at the moment)
* @param width=800 {Number} the width of the renderers view
* @param height=600 {Number} the height of the renderers view
* @param [view] {Canvas} the canvas to use as a view, optional
* @param [transparent=false] {Boolean} the transparency of the render view, default false
* @param [antialias=false] {Boolean} sets antialias (only applicable in webGL chrome at the moment)
*
* antialias
*/

4
src/pixi/utils/EventTarget.js
View file

@ -1,3 +1,7 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
* https://github.com/mrdoob/eventtarget.js/
* THankS mr DOob!

30
src/pixi/utils/Utils.js
View file

@ -1,3 +1,7 @@
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
@ -7,6 +11,8 @@
/**
* A polyfill for requestAnimationFrame
* You can actually use both requestAnimationFrame and requestAnimFrame,
* you will still benefit from the polyfill
*
* @method requestAnimationFrame
*/
@ -52,7 +58,12 @@ PIXI.hex2rgb = function(hex) {
return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255];
};
/**
* Converts a color as an [R, G, B] array to a hex number
*
* @method rgb2hex
* @param rgb {Array}
*/
PIXI.rgb2hex = function(rgb) {
return ((rgb[0]*255 << 16) + (rgb[1]*255 << 8) + rgb[2]*255);
};
@ -145,6 +156,12 @@ PIXI.unpackColorRGB = function(r, g, b)//r, g, b, a)
};
*/
/**
* Checks whether the Canvas BlendModes are supported by the current browser
*
* @method canUseNewCanvasBlendModes
* @return {Boolean} whether they are supported
*/
PIXI.canUseNewCanvasBlendModes = function()
{
var canvas = document.createElement('canvas');
@ -159,7 +176,14 @@ PIXI.canUseNewCanvasBlendModes = function()
return context.getImageData(0,0,1,1).data[0] === 0;
};
// this function is taken from Starling Framework as its pretty neat ;)
/**
* Given a number, this function returns the closest number that is a power of two
* this function is taken from Starling Framework as its pretty neat ;)
*
* @method getNextPowerOfTwo
* @param number {Number}
* @return {Number} the closest number that is a power of two
*/
PIXI.getNextPowerOfTwo = function(number)
{
if (number > 0 && (number & (number - 1)) === 0) // see: http://goo.gl/D9kPj
@ -171,5 +195,3 @@ PIXI.getNextPowerOfTwo = function(number)
return result;
}
};