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

a million and one jshint fixes

Browse source
This commit is contained in:
Chad Engler 2013-12-08 15:42:56 -08:00
parent 5e08abcc31
commit 648a9bd33e
62 changed files with 3296 additions and 3386 deletions
Download patch file Download diff file Expand all files Collapse all files

9
.jshintrc
View file

@ -31,14 +31,17 @@
"unused" : true, // Warn when varaibles are created by not used.
"strict" : false, // Require `use strict` pragma in every file.
"trailing" : true, // Prohibit trailing whitespaces.
"maxparams" : 6, // Prohibit having more than X number of params in a function.
"maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep.
"maxparams" : 8, // Prohibit having more than X number of params in a function.
"maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep.
"maxstatements" : false, // Restrict the number of statements in a function.
"maxcomplexity" : false, // Restrict the cyclomatic complexity of the code.
"maxlen" : 220, // Require that all lines are 100 characters or less.
"globals" : { // Register globals that are used in the code.
"module": false,
"require": false
"require": false,
"PIXI": false,
"spine": false
},
// == Relaxing Options ================================================

15
Gruntfile.js
View file

@ -1,5 +1,3 @@
'use strict';
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-concat-sourcemap');
grunt.loadNpmTasks('grunt-contrib-concat');
@ -9,9 +7,7 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-yuidoc');
grunt.loadTasks('tasks');
var root = 'src/pixi/',
debug = 'bin/pixi.dev.js',
srcFiles = [
var srcFiles = [
'<%= dirs.src %>/Intro.js',
'<%= dirs.src %>/Pixi.js',
'<%= dirs.src %>/core/Point.js',
@ -74,9 +70,9 @@ module.exports = function(grunt) {
'<%= dirs.src %>/filters/DotScreenFilter.js',
'<%= dirs.src %>/filters/CrossHatchFilter.js',
'<%= dirs.src %>/filters/RGBSplitFilter.js',
'<%= dirs.src %>/Outro.js'
], banner = [
],
banner = [
'/**',
' * @license',
' * <%= pkg.name %> - v<%= pkg.version %>',
@ -114,6 +110,7 @@ module.exports = function(grunt) {
dest: '<%= files.build %>'
}
},
/* jshint -W106 */
concat_sourcemap: {
dev: {
files: {
@ -125,7 +122,7 @@ module.exports = function(grunt) {
}
},
jshint: {
src: srcFiles.concat('Gruntfile.js'),
src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'),
test: ['<%= files.testBlob %>'],
options: {
jshintrc: '.jshintrc'
@ -180,4 +177,4 @@ module.exports = function(grunt) {
grunt.registerTask('docs', ['yuidoc']);
grunt.registerTask('travis', ['test']);
}
};

1028
src/pixi/InteractionManager.js
View file

File diff suppressed because it is too large Load diff

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

@ -33,7 +33,7 @@ PIXI.Circle = function(x, y, radius)
* @default 0
*/
this.radius = radius || 0;
}
};
/**
* Creates a clone of this Circle instance
@ -44,7 +44,7 @@ PIXI.Circle = function(x, y, radius)
PIXI.Circle.prototype.clone = function()
{
return new PIXI.Circle(this.x, this.y, this.radius);
}
};
/**
* Checks if the x, and y coords passed to this function are contained within this circle
@ -67,7 +67,7 @@ PIXI.Circle.prototype.contains = function(x, y)
dy *= dy;
return (dx + dy <= r2);
}
};
// constructor
PIXI.Circle.prototype.constructor = PIXI.Circle;

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

@ -41,7 +41,7 @@ PIXI.Ellipse = function(x, y, width, height)
* @default 0
*/
this.height = height || 0;
}
};
/**
* Creates a clone of this Ellipse instance
@ -52,7 +52,7 @@ PIXI.Ellipse = function(x, y, width, height)
PIXI.Ellipse.prototype.clone = function()
{
return new PIXI.Ellipse(this.x, this.y, this.width, this.height);
}
};
/**
* Checks if the x, and y coords passed to this function are contained within this ellipse
@ -76,12 +76,12 @@ PIXI.Ellipse.prototype.contains = function(x, y)
normy *= normy;
return (normx + normy < 0.25);
}
};
PIXI.Ellipse.prototype.getBounds = function()
{
return new PIXI.Rectangle(this.x, this.y, this.width, this.height);
}
};
// constructor
PIXI.Ellipse.prototype.constructor = PIXI.Ellipse;

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

@ -29,7 +29,7 @@ PIXI.mat3.create = function()
matrix[8] = 1;
return matrix;
}
};
PIXI.mat3.identity = function(matrix)
@ -45,7 +45,7 @@ PIXI.mat3.identity = function(matrix)
matrix[8] = 1;
return matrix;
}
};
PIXI.mat4 = {};
@ -72,7 +72,7 @@ PIXI.mat4.create = function()
matrix[15] = 1;
return matrix;
}
};
PIXI.mat3.multiply = function (mat, mat2, dest)
{
@ -100,7 +100,7 @@ PIXI.mat3.multiply = function (mat, mat2, dest)
dest[8] = b20 * a02 + b21 * a12 + b22 * a22;
return dest;
}
};
PIXI.mat3.clone = function(mat)
{
@ -117,7 +117,7 @@ PIXI.mat3.clone = function(mat)
matrix[8] = mat[8];
return matrix;
}
};
PIXI.mat3.transpose = function (mat, dest)
{
@ -145,7 +145,7 @@ PIXI.mat3.transpose = function (mat, dest)
dest[7] = mat[5];
dest[8] = mat[8];
return dest;
}
};
PIXI.mat3.toMat4 = function (mat, dest)
{
@ -172,7 +172,7 @@ PIXI.mat3.toMat4 = function (mat, dest)
dest[0] = mat[0];
return dest;
}
};
/////
@ -200,7 +200,7 @@ PIXI.mat4.create = function()
matrix[15] = 1;
return matrix;
}
};
PIXI.mat4.transpose = function (mat, dest)
{
@ -243,7 +243,7 @@ PIXI.mat4.transpose = function (mat, dest)
dest[14] = mat[11];
dest[15] = mat[15];
return dest;
}
};
PIXI.mat4.multiply = function (mat, mat2, dest)
{
@ -290,4 +290,4 @@ PIXI.mat4.multiply = function (mat, mat2, dest)
dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33;
return dest;
}
};

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

@ -25,7 +25,7 @@ PIXI.Point = function(x, y)
* @default 0
*/
this.y = y || 0;
}
};
/**
* Creates a clone of this point
@ -36,7 +36,7 @@ PIXI.Point = function(x, y)
PIXI.Point.prototype.clone = function()
{
return new PIXI.Point(this.x, this.y);
}
};
// constructor
PIXI.Point.prototype.constructor = PIXI.Point;

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

@ -30,7 +30,7 @@ PIXI.Polygon = function(points)
}
this.points = points;
}
};
/**
* Creates a clone of this polygon
@ -46,7 +46,7 @@ PIXI.Polygon.prototype.clone = function()
}
return new PIXI.Polygon(points);
}
};
/**
* Checks if the x, and y coords passed to this function are contained within this polygon
@ -65,13 +65,13 @@ PIXI.Polygon.prototype.contains = function(x, y)
for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) {
var xi = this.points[i].x, yi = this.points[i].y,
xj = this.points[j].x, yj = this.points[j].y,
intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
if(intersect) inside = !inside;
}
return inside;
}
};
// constructor
PIXI.Polygon.prototype.constructor = PIXI.Polygon;

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

@ -41,7 +41,7 @@ PIXI.Rectangle = function(x, y, width, height)
* @default 0
*/
this.height = height || 0;
}
};
/**
* Creates a clone of this Rectangle
@ -52,7 +52,7 @@ PIXI.Rectangle = function(x, y, width, height)
PIXI.Rectangle.prototype.clone = function()
{
return new PIXI.Rectangle(this.x, this.y, this.width, this.height);
}
};
/**
* Checks if the x, and y coords passed to this function are contained within this Rectangle
@ -79,7 +79,7 @@ PIXI.Rectangle.prototype.contains = function(x, y)
}
return false;
}
};
// constructor
PIXI.Rectangle.prototype.constructor = PIXI.Rectangle;

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

@ -10,238 +10,238 @@
*/
PIXI.DisplayObject = function()
{
this.last = this;
this.first = this;
/**
* The coordinate of the object relative to the local coordinates of the parent.
*
* @property position
* @type Point
*/
this.position = new PIXI.Point();
this.last = this;
this.first = this;
/**
* The coordinate of the object relative to the local coordinates of the parent.
*
* @property position
* @type Point
*/
this.position = new PIXI.Point();
/**
* The scale factor of the object.
*
* @property scale
* @type Point
*/
this.scale = new PIXI.Point(1,1);//{x:1, y:1};
/**
* The scale factor of the object.
*
* @property scale
* @type Point
*/
this.scale = new PIXI.Point(1,1);//{x:1, y:1};
/**
* The pivot point of the displayObject that it rotates around
*
* @property pivot
* @type Point
*/
this.pivot = new PIXI.Point(0,0);
/**
* The pivot point of the displayObject that it rotates around
*
* @property pivot
* @type Point
*/
this.pivot = new PIXI.Point(0,0);
/**
* The rotation of the object in radians.
*
* @property rotation
* @type Number
*/
this.rotation = 0;
/**
* The rotation of the object in radians.
*
* @property rotation
* @type Number
*/
this.rotation = 0;
/**
* The opacity of the object.
*
* @property alpha
* @type Number
*/
this.alpha = 1;
/**
* The opacity of the object.
*
* @property alpha
* @type Number
*/
this.alpha = 1;
/**
* The visibility of the object.
*
* @property visible
* @type Boolean
*/
this.visible = true;
/**
* The visibility of the object.
*
* @property visible
* @type Boolean
*/
this.visible = true;
/**
* This is the defined area that will pick up mouse / touch events. It is null by default.
* Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)
*
* @property hitArea
* @type Rectangle|Circle|Ellipse|Polygon
*/
this.hitArea = null;
/**
* This is the defined area that will pick up mouse / touch events. It is null by default.
* Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)
*
* @property hitArea
* @type Rectangle|Circle|Ellipse|Polygon
*/
this.hitArea = null;
/**
* This is used to indicate if the displayObject should display a mouse hand cursor on rollover
*
* @property buttonMode
* @type Boolean
*/
this.buttonMode = false;
/**
* This is used to indicate if the displayObject should display a mouse hand cursor on rollover
*
* @property buttonMode
* @type Boolean
*/
this.buttonMode = false;
/**
* Can this object be rendered
*
* @property renderable
* @type Boolean
*/
this.renderable = false;
/**
* Can this object be rendered
*
* @property renderable
* @type Boolean
*/
this.renderable = false;
/**
* [read-only] The display object container that contains this display object.
*
* @property parent
* @type DisplayObjectContainer
* @readOnly
*/
this.parent = null;
/**
* [read-only] The display object container that contains this display object.
*
* @property parent
* @type DisplayObjectContainer
* @readOnly
*/
this.parent = null;
/**
* [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.
*
* @property stage
* @type Stage
* @readOnly
*/
this.stage = null;
/**
* [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.
*
* @property stage
* @type Stage
* @readOnly
*/
this.stage = null;
/**
* [read-only] The multiplied alpha of the displayobject
*
* @property worldAlpha
* @type Number
* @readOnly
*/
this.worldAlpha = 1;
/**
* [read-only] The multiplied alpha of the displayobject
*
* @property worldAlpha
* @type Number
* @readOnly
*/
this.worldAlpha = 1;
/**
* [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property
*
* @property _interactive
* @type Boolean
* @readOnly
* @private
*/
this._interactive = false;
/**
* [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property
*
* @property _interactive
* @type Boolean
* @readOnly
* @private
*/
this._interactive = false;
this.defaultCursor = "pointer";
/**
* [read-only] Current transform of the object based on world (parent) factors
*
* @property worldTransform
* @type Mat3
* @readOnly
* @private
*/
this.worldTransform = PIXI.mat3.create()//mat3.identity();
this.defaultCursor = 'pointer';
/**
* [read-only] Current transform of the object locally
*
* @property localTransform
* @type Mat3
* @readOnly
* @private
*/
this.localTransform = PIXI.mat3.create()//mat3.identity();
/**
* [read-only] Current transform of the object based on world (parent) factors
*
* @property worldTransform
* @type Mat3
* @readOnly
* @private
*/
this.worldTransform = PIXI.mat3.create(); //mat3.identity();
/**
* [NYI] Unkown
*
* @property color
* @type Array<>
* @private
*/
this.color = [];
/**
* [read-only] Current transform of the object locally
*
* @property localTransform
* @type Mat3
* @readOnly
* @private
*/
this.localTransform = PIXI.mat3.create(); //mat3.identity();
/**
* [NYI] Holds whether or not this object is dynamic, for rendering optimization
*
* @property dynamic
* @type Boolean
* @private
*/
this.dynamic = true;
/**
* [NYI] Unkown
*
* @property color
* @type Array<>
* @private
*/
this.color = [];
// chach that puppy!
this._sr = 0;
this._cr = 1;
/**
* [NYI] Holds whether or not this object is dynamic, for rendering optimization
*
* @property dynamic
* @type Boolean
* @private
*/
this.dynamic = true;
// chach that puppy!
this._sr = 0;
this._cr = 1;
this.filterArea = new PIXI.Rectangle(0,0,1,1);
/*
* MOUSE Callbacks
*/
this.filterArea = new PIXI.Rectangle(0,0,1,1);
/**
* A callback that is used when the users clicks on the displayObject with their mouse
* @method click
* @param interactionData {InteractionData}
*/
/*
* MOUSE Callbacks
*/
/**
* A callback that is used when the user clicks the mouse down over the sprite
* @method mousedown
* @param interactionData {InteractionData}
*/
/**
* A callback that is used when the users clicks on the displayObject with their mouse
* @method click
* @param interactionData {InteractionData}
*/
/**
* A callback that is used when the user releases the mouse that was over the displayObject
* for this callback to be fired the mouse must have been pressed down over the displayObject
* @method mouseup
* @param interactionData {InteractionData}
*/
/**
* A callback that is used when the user clicks the mouse down over the sprite
* @method mousedown
* @param interactionData {InteractionData}
*/
/**
* A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject
* for this callback to be fired, The touch must have started over the displayObject
* @method mouseupoutside
* @param interactionData {InteractionData}
*/
/**
* A callback that is used when the user releases the mouse that was over the displayObject
* for this callback to be fired the mouse must have been pressed down over the displayObject
* @method mouseup
* @param interactionData {InteractionData}
*/
/**
* A callback that is used when the users mouse rolls over the displayObject
* @method mouseover
* @param interactionData {InteractionData}
*/
/**
* A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject
* for this callback to be fired, The touch must have started over the displayObject
* @method mouseupoutside
* @param interactionData {InteractionData}
*/
/**
* A callback that is used when the users mouse leaves the displayObject
* @method mouseout
* @param interactionData {InteractionData}
*/
/**
* A callback that is used when the users mouse rolls over the displayObject
* @method mouseover
* @param interactionData {InteractionData}
*/
/**
* A callback that is used when the users mouse leaves the displayObject
* @method mouseout
* @param interactionData {InteractionData}
*/
/*
* TOUCH Callbacks
*/
/*
* TOUCH Callbacks
*/
/**
* A callback that is used when the users taps on the sprite with their finger
* basically a touch version of click
* @method tap
* @param interactionData {InteractionData}
*/
/**
* A callback that is used when the users taps on the sprite with their finger
* basically a touch version of click
* @method tap
* @param interactionData {InteractionData}
*/
/**
* A callback that is used when the user touch's over the displayObject
* @method touchstart
* @param interactionData {InteractionData}
*/
/**
* A callback that is used when the user touch's over the displayObject
* @method touchstart
* @param interactionData {InteractionData}
*/
/**
* A callback that is used when the user releases a touch over the displayObject
* @method touchend
* @param interactionData {InteractionData}
*/
/**
* A callback that is used when the user releases a touch over the displayObject
* @method touchend
* @param interactionData {InteractionData}
*/
/**
* A callback that is used when the user releases the touch that was over the displayObject
* for this callback to be fired, The touch must have started over the sprite
* @method touchendoutside
* @param interactionData {InteractionData}
*/
}
/**
* A callback that is used when the user releases the touch that was over the displayObject
* for this callback to be fired, The touch must have started over the sprite
* @method touchendoutside
* @param interactionData {InteractionData}
*/
};
// constructor
PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject;
@ -256,8 +256,8 @@ PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject;
*/
PIXI.DisplayObject.prototype.setInteractive = function(interactive)
{
this.interactive = interactive;
}
this.interactive = interactive;
};
/**
* Indicates if the sprite will have touch and mouse interactivity. It is false by default
@ -271,11 +271,11 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'interactive', {
return this._interactive;
},
set: function(value) {
this._interactive = value;
// TODO more to be done here..
// need to sort out a re-crawl!
if(this.stage)this.stage.dirty = true;
this._interactive = value;
// TODO more to be done here..
// need to sort out a re-crawl!
if(this.stage)this.stage.dirty = true;
}
});
@ -292,33 +292,33 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'mask', {
return this._mask;
},
set: function(value) {
if(value)
{
if(this._mask)
{
value.start = this._mask.start;
value.end = this._mask.end;
}
else
{
this.addFilter(value);
value.renderable = false;
}
if(this._mask)
{
value.start = this._mask.start;
value.end = this._mask.end;
}
else
{
this.addFilter(value);
value.renderable = false;
}
}
else
{
this.removeFilter(this._mask);
this._mask.renderable = true;
this.removeFilter(this._mask);
this._mask.renderable = true;
}
this._mask = value;
}
});
/**
* Sets the filters for the displayObject.
* Sets the filters for the displayObject.
* * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer.
* To remove filters simply set this property to 'null'
* @property filters
@ -329,35 +329,33 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'filters', {
return this._filters;
},
set: function(value) {
if(value)
{
if(this._filters)this.removeFilter(this._filters);
this.addFilter(value);
if(this._filters)this.removeFilter(this._filters);
this.addFilter(value);
// now put all the passes in one place..
var passes = [];
for (var i = 0; i < value.length; i++)
{
var filterPasses = value[i].passes;
for (var j = 0; j < filterPasses.length; j++)
{
passes.push(filterPasses[j]);
};
};
// now put all the passes in one place..
var passes = [];
for (var i = 0; i < value.length; i++)
{
var filterPasses = value[i].passes;
for (var j = 0; j < filterPasses.length; j++)
{
passes.push(filterPasses[j]);
}
}
value.start.filterPasses = passes;
value.start.filterPasses = passes;
}
else
{
if(this._filters)this.removeFilter(this._filters);
if(this._filters) {
this.removeFilter(this._filters);
}
}
this._filters = value;
}
});
@ -370,101 +368,99 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'filters', {
*/
PIXI.DisplayObject.prototype.addFilter = function(data)
{
//if(this.filter)return;
//this.filter = true;
// data[0].target = this;
//if(this.filter)return;
//this.filter = true;
// data[0].target = this;
// insert a filter block..
// TODO Onject pool thease bad boys..
var start = new PIXI.FilterBlock();
var end = new PIXI.FilterBlock();
data.start = start;
data.end = end;
start.data = data;
end.data = data;
start.first = start.last = this;
end.first = end.last = this;
start.open = true;
start.target = this;
/*
* insert start
*/
var childFirst = start
var childLast = start
var nextObject;
var previousObject;
previousObject = this.first._iPrev;
if(previousObject)
{
nextObject = previousObject._iNext;
childFirst._iPrev = previousObject;
previousObject._iNext = childFirst;
}
else
{
nextObject = this;
}
if(nextObject)
{
nextObject._iPrev = childLast;
childLast._iNext = nextObject;
}
// now insert the end filter block..
/*
* insert end filter
*/
var childFirst = end
var childLast = end
var nextObject = null;
var previousObject = null;
previousObject = this.last;
nextObject = previousObject._iNext;
if(nextObject)
{
nextObject._iPrev = childLast;
childLast._iNext = nextObject;
}
childFirst._iPrev = previousObject;
previousObject._iNext = childFirst;
var updateLast = this;
var prevLast = this.last;
while(updateLast)
{
if(updateLast.last == prevLast)
{
updateLast.last = end;
}
updateLast = updateLast.parent;
}
this.first = start;
// if webGL...
if(this.__renderGroup)
{
this.__renderGroup.addFilterBlocks(start, end);
}
}
// insert a filter block..
// TODO Onject pool thease bad boys..
var start = new PIXI.FilterBlock();
var end = new PIXI.FilterBlock();
data.start = start;
data.end = end;
start.data = data;
end.data = data;
start.first = start.last = this;
end.first = end.last = this;
start.open = true;
start.target = this;
/*
* insert start
*/
var childFirst = start;
var childLast = start;
var nextObject;
var previousObject;
previousObject = this.first._iPrev;
if(previousObject)
{
nextObject = previousObject._iNext;
childFirst._iPrev = previousObject;
previousObject._iNext = childFirst;
}
else
{
nextObject = this;
}
if(nextObject)
{
nextObject._iPrev = childLast;
childLast._iNext = nextObject;
}
// now insert the end filter block..
/*
* insert end filter
*/
childFirst = end;
childLast = end;
nextObject = null;
previousObject = null;
previousObject = this.last;
nextObject = previousObject._iNext;
if(nextObject)
{
nextObject._iPrev = childLast;
childLast._iNext = nextObject;
}
childFirst._iPrev = previousObject;
previousObject._iNext = childFirst;
var updateLast = this;
var prevLast = this.last;
while(updateLast)
{
if(updateLast.last === prevLast)
{
updateLast.last = end;
}
updateLast = updateLast.parent;
}
this.first = start;
// if webGL...
if(this.__renderGroup)
{
this.__renderGroup.addFilterBlocks(start, end);
}
};
/*
* Removes the filter to this displayObject
@ -474,47 +470,47 @@ PIXI.DisplayObject.prototype.addFilter = function(data)
*/
PIXI.DisplayObject.prototype.removeFilter = function(data)
{
//if(!this.filter)return;
//this.filter = false;
// console.log("YUOIO")
// modify the list..
var startBlock = data.start;
var nextObject = startBlock._iNext;
var previousObject = startBlock._iPrev;
if(nextObject)nextObject._iPrev = previousObject;
if(previousObject)previousObject._iNext = nextObject;
this.first = startBlock._iNext;
// remove the end filter
var lastBlock = data.end;
var nextObject = lastBlock._iNext;
var previousObject = lastBlock._iPrev;
if(nextObject)nextObject._iPrev = previousObject;
previousObject._iNext = nextObject;
// this is always true too!
var tempLast = lastBlock._iPrev;
// need to make sure the parents last is updated too
var updateLast = this;
while(updateLast.last == lastBlock)
{
updateLast.last = tempLast;
updateLast = updateLast.parent;
if(!updateLast)break;
}
// if webGL...
if(this.__renderGroup)
{
this.__renderGroup.removeFilterBlocks(startBlock, lastBlock);
}
}
//if(!this.filter)return;
//this.filter = false;
// console.log('YUOIO')
// modify the list..
var startBlock = data.start;
var nextObject = startBlock._iNext;
var previousObject = startBlock._iPrev;
if(nextObject)nextObject._iPrev = previousObject;
if(previousObject)previousObject._iNext = nextObject;
this.first = startBlock._iNext;
// remove the end filter
var lastBlock = data.end;
nextObject = lastBlock._iNext;
previousObject = lastBlock._iPrev;
if(nextObject)nextObject._iPrev = previousObject;
previousObject._iNext = nextObject;
// this is always true too!
var tempLast = lastBlock._iPrev;
// need to make sure the parents last is updated too
var updateLast = this;
while(updateLast.last === lastBlock)
{
updateLast.last = tempLast;
updateLast = updateLast.parent;
if(!updateLast)break;
}
// if webGL...
if(this.__renderGroup)
{
this.__renderGroup.removeFilterBlocks(startBlock, lastBlock);
}
};
/*
* Updates the object transform for rendering
@ -524,28 +520,28 @@ PIXI.DisplayObject.prototype.removeFilter = function(data)
*/
PIXI.DisplayObject.prototype.updateTransform = function()
{
// TODO OPTIMIZE THIS!! with dirty
if(this.rotation !== this.rotationCache)
{
this.rotationCache = this.rotation;
this._sr = Math.sin(this.rotation);
this._cr = Math.cos(this.rotation);
}
var localTransform = this.localTransform;
var parentTransform = this.parent.worldTransform;
var worldTransform = this.worldTransform;
//console.log(localTransform)
localTransform[0] = this._cr * this.scale.x;
localTransform[1] = -this._sr * this.scale.y
localTransform[3] = this._sr * this.scale.x;
localTransform[4] = this._cr * this.scale.y;
// TODO --> do we even need a local matrix???
var px = this.pivot.x;
var py = this.pivot.y;
// TODO OPTIMIZE THIS!! with dirty
if(this.rotation !== this.rotationCache)
{
this.rotationCache = this.rotation;
this._sr = Math.sin(this.rotation);
this._cr = Math.cos(this.rotation);
}
var localTransform = this.localTransform;
var parentTransform = this.parent.worldTransform;
var worldTransform = this.worldTransform;
//console.log(localTransform)
localTransform[0] = this._cr * this.scale.x;
localTransform[1] = -this._sr * this.scale.y;
localTransform[3] = this._sr * this.scale.x;
localTransform[4] = this._cr * this.scale.y;
// TODO --> do we even need a local matrix???
var px = this.pivot.x;
var py = this.pivot.y;
// Cache the matrix values (makes for huge speed increases!)
var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1],
a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3],
@ -553,9 +549,9 @@ PIXI.DisplayObject.prototype.updateTransform = function()
b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2],
b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5];
localTransform[2] = a02
localTransform[5] = a12
localTransform[2] = a02;
localTransform[5] = a12;
worldTransform[0] = b00 * a00 + b01 * a10;
worldTransform[1] = b00 * a01 + b01 * a11;
worldTransform[2] = b00 * a02 + b01 * a12 + b02;
@ -564,12 +560,11 @@ PIXI.DisplayObject.prototype.updateTransform = function()
worldTransform[4] = b10 * a01 + b11 * a11;
worldTransform[5] = b10 * a02 + b11 * a12 + b12;
// because we are using affine transformation, we can optimise the matrix concatenation process.. wooo!
// mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform);
this.worldAlpha = this.alpha * this.parent.worldAlpha;
this.vcount = PIXI.visibleCount;
// because we are using affine transformation, we can optimise the matrix concatenation process.. wooo!
// mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform);
this.worldAlpha = this.alpha * this.parent.worldAlpha;
}
this.vcount = PIXI.visibleCount;
};
PIXI.visibleCount = 0;

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

@ -7,23 +7,23 @@
* A DisplayObjectContainer represents a collection of display objects.
* It is the base class of all display objects that act as a container for other objects.
*
* @class DisplayObjectContainer
* @class DisplayObjectContainer
* @extends DisplayObject
* @constructor
*/
PIXI.DisplayObjectContainer = function()
{
PIXI.DisplayObject.call( this );
/**
* [read-only] The of children of this container.
*
* @property children
* @type Array<DisplayObject>
* @readOnly
*/
this.children = [];
}
PIXI.DisplayObject.call( this );
/**
* [read-only] The of children of this container.
*
* @property children
* @type Array<DisplayObject>
* @readOnly
*/
this.children = [];
};
// constructor
PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype );
@ -37,85 +37,84 @@ PIXI.DisplayObjectContainer.prototype.constructor = PIXI.DisplayObjectContainer;
*/
PIXI.DisplayObjectContainer.prototype.addChild = function(child)
{
if(child.parent != undefined)
{
//// COULD BE THIS???
child.parent.removeChild(child);
// return;
}
if(child.parent !== undefined)
{
child.parent = this;
this.children.push(child);
// update the stage refference..
if(this.stage)
{
var tmpChild = child;
do
{
if(tmpChild.interactive)this.stage.dirty = true;
tmpChild.stage = this.stage;
tmpChild = tmpChild._iNext;
}
while(tmpChild)
}
// LINKED LIST //
// modify the list..
var childFirst = child.first
var childLast = child.last;
var nextObject;
var previousObject;
// this could be wrong if there is a filter??
if(this._filters || this._mask)
{
previousObject = this.last._iPrev;
}
else
{
previousObject = this.last;
}
//// COULD BE THIS???
child.parent.removeChild(child);
// return;
}
nextObject = previousObject._iNext;
// always true in this case
// need to make sure the parents last is updated too
var updateLast = this;
var prevLast = previousObject;
while(updateLast)
{
if(updateLast.last == prevLast)
{
updateLast.last = child.last;
}
updateLast = updateLast.parent;
}
if(nextObject)
{
nextObject._iPrev = childLast;
childLast._iNext = nextObject;
}
childFirst._iPrev = previousObject;
previousObject._iNext = childFirst;
child.parent = this;
// need to remove any render groups..
if(this.__renderGroup)
{
// being used by a renderTexture.. if it exists then it must be from a render texture;
if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child);
// add them to the new render group..
this.__renderGroup.addDisplayObjectAndChildren(child);
}
}
this.children.push(child);
// update the stage refference..
if(this.stage)
{
var tmpChild = child;
do
{
if(tmpChild.interactive)this.stage.dirty = true;
tmpChild.stage = this.stage;
tmpChild = tmpChild._iNext;
}
while(tmpChild);
}
// LINKED LIST //
// modify the list..
var childFirst = child.first;
var childLast = child.last;
var nextObject;
var previousObject;
// this could be wrong if there is a filter??
if(this._filters || this._mask)
{
previousObject = this.last._iPrev;
}
else
{
previousObject = this.last;
}
nextObject = previousObject._iNext;
// always true in this case
// need to make sure the parents last is updated too
var updateLast = this;
var prevLast = previousObject;
while(updateLast)
{
if(updateLast.last === prevLast)
{
updateLast.last = child.last;
}
updateLast = updateLast.parent;
}
if(nextObject)
{
nextObject._iPrev = childLast;
childLast._iNext = nextObject;
}
childFirst._iPrev = previousObject;
previousObject._iNext = childFirst;
// need to remove any render groups..
if(this.__renderGroup)
{
// being used by a renderTexture.. if it exists then it must be from a render texture;
if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child);
// add them to the new render group..
this.__renderGroup.addDisplayObjectAndChildren(child);
}
};
/**
* Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown
@ -126,83 +125,84 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
*/
PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
{
if(index >= 0 && index <= this.children.length)
{
if(child.parent != undefined)
{
child.parent.removeChild(child);
}
child.parent = this;
if(this.stage)
{
var tmpChild = child;
do
{
if(tmpChild.interactive)this.stage.dirty = true;
tmpChild.stage = this.stage;
tmpChild = tmpChild._iNext;
}
while(tmpChild)
}
// modify the list..
var childFirst = child.first;
var childLast = child.last;
var nextObject;
var previousObject;
if(index == this.children.length)
{
previousObject = this.last;
var updateLast = this;
var prevLast = this.last;
while(updateLast)
{
if(updateLast.last == prevLast)
{
updateLast.last = child.last;
}
updateLast = updateLast.parent;
}
}
else if(index == 0)
{
previousObject = this;
}
else
{
previousObject = this.children[index-1].last;
}
nextObject = previousObject._iNext;
// always true in this case
if(nextObject)
{
nextObject._iPrev = childLast;
childLast._iNext = nextObject;
}
childFirst._iPrev = previousObject;
previousObject._iNext = childFirst;
if(index >= 0 && index <= this.children.length)
{
if(child.parent !== undefined)
{
child.parent.removeChild(child);
}
this.children.splice(index, 0, child);
// need to remove any render groups..
if(this.__renderGroup)
{
// being used by a renderTexture.. if it exists then it must be from a render texture;
if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child);
// add them to the new render group..
this.__renderGroup.addDisplayObjectAndChildren(child);
}
}
else
{
throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length);
}
}
child.parent = this;
if(this.stage)
{
var tmpChild = child;
do
{
if(tmpChild.interactive)this.stage.dirty = true;
tmpChild.stage = this.stage;
tmpChild = tmpChild._iNext;
}
while(tmpChild);
}
// modify the list..
var childFirst = child.first;
var childLast = child.last;
var nextObject;
var previousObject;
if(index === this.children.length)
{
previousObject = this.last;
var updateLast = this;
var prevLast = this.last;
while(updateLast)
{
if(updateLast.last === prevLast)
{
updateLast.last = child.last;
}
updateLast = updateLast.parent;
}
}
else if(index === 0)
{
previousObject = this;
}
else
{
previousObject = this.children[index-1].last;
}
nextObject = previousObject._iNext;
// always true in this case
if(nextObject)
{
nextObject._iPrev = childLast;
childLast._iNext = nextObject;
}
childFirst._iPrev = previousObject;
previousObject._iNext = childFirst;
this.children.splice(index, 0, child);
// need to remove any render groups..
if(this.__renderGroup)
{
// being used by a renderTexture.. if it exists then it must be from a render texture;
if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child);
// add them to the new render group..
this.__renderGroup.addDisplayObjectAndChildren(child);
}
}
else
{
throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length);
}
};
/**
* [NYI] Swaps the depth of 2 displayObjects
@ -214,31 +214,31 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
*/
PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2)
{
if(child === child2) {
return;
}
if(child === child2) {
return;
}
var index1 = this.children.indexOf(child);
var index2 = this.children.indexOf(child2);
if(index1 < 0 || index2 < 0) {
throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller.");
}
var index1 = this.children.indexOf(child);
var index2 = this.children.indexOf(child2);
this.removeChild(child);
this.removeChild(child2);
if(index1 < index2)
{
this.addChildAt(child2, index1);
this.addChildAt(child, index2);
}
else
{
this.addChildAt(child, index2);
this.addChildAt(child2, index1);
}
}
if(index1 < 0 || index2 < 0) {
throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.');
}
this.removeChild(child);
this.removeChild(child2);
if(index1 < index2)
{
this.addChildAt(child2, index1);
this.addChildAt(child, index2);
}
else
{
this.addChildAt(child, index2);
this.addChildAt(child2, index1);
}
};
/**
* Returns the Child at the specified index
@ -248,15 +248,15 @@ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2)
*/
PIXI.DisplayObjectContainer.prototype.getChildAt = function(index)
{
if(index >= 0 && index < this.children.length)
{
return this.children[index];
}
else
{
throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this);
}
}
if(index >= 0 && index < this.children.length)
{
return this.children[index];
}
else
{
throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this);
}
};
/**
* Removes a child from the container.
@ -266,66 +266,65 @@ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index)
*/
PIXI.DisplayObjectContainer.prototype.removeChild = function(child)
{
var index = this.children.indexOf( child );
if ( index !== -1 )
{
// unlink //
// modify the list..
var childFirst = child.first;
var childLast = child.last;
var nextObject = childLast._iNext;
var previousObject = childFirst._iPrev;
if(nextObject)nextObject._iPrev = previousObject;
previousObject._iNext = nextObject;
if(this.last == childLast)
{
var index = this.children.indexOf( child );
if ( index !== -1 )
{
// unlink //
// modify the list..
var childFirst = child.first;
var childLast = child.last;
var tempLast = childFirst._iPrev;
// need to make sure the parents last is updated too
var updateLast = this;
while(updateLast.last == childLast)
{
updateLast.last = tempLast;
updateLast = updateLast.parent;
if(!updateLast)break;
}
}
childLast._iNext = null;
childFirst._iPrev = null;
// update the stage reference..
if(this.stage)
{
var tmpChild = child;
do
{
if(tmpChild.interactive)this.stage.dirty = true;
tmpChild.stage = null;
tmpChild = tmpChild._iNext;
}
while(tmpChild)
}
// webGL trim
if(child.__renderGroup)
{
child.__renderGroup.removeDisplayObjectAndChildren(child);
}
child.parent = undefined;
this.children.splice( index, 1 );
}
else
{
throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this);
}
}
var nextObject = childLast._iNext;
var previousObject = childFirst._iPrev;
if(nextObject)nextObject._iPrev = previousObject;
previousObject._iNext = nextObject;
if(this.last === childLast)
{
var tempLast = childFirst._iPrev;
// need to make sure the parents last is updated too
var updateLast = this;
while(updateLast.last === childLast)
{
updateLast.last = tempLast;
updateLast = updateLast.parent;
if(!updateLast)break;
}
}
childLast._iNext = null;
childFirst._iPrev = null;
// update the stage reference..
if(this.stage)
{
var tmpChild = child;
do
{
if(tmpChild.interactive)this.stage.dirty = true;
tmpChild.stage = null;
tmpChild = tmpChild._iNext;
}
while(tmpChild);
}
// webGL trim
if(child.__renderGroup)
{
child.__renderGroup.removeDisplayObjectAndChildren(child);
}
child.parent = undefined;
this.children.splice( index, 1 );
}
else
{
throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this);
}
};
/*
* Updates the container's children's transform for rendering
@ -335,12 +334,12 @@ PIXI.DisplayObjectContainer.prototype.removeChild = function(child)
*/
PIXI.DisplayObjectContainer.prototype.updateTransform = function()
{
if(!this.visible)return;
PIXI.DisplayObject.prototype.updateTransform.call( this );
for(var i=0,j=this.children.length; i<j; i++)
{
this.children[i].updateTransform();
}
}
if(!this.visible)return;
PIXI.DisplayObject.prototype.updateTransform.call( this );
for(var i=0,j=this.children.length; i<j; i++)
{
this.children[i].updateTransform();
}
};

12
src/pixi/display/MovieClip.js
View file

@ -66,7 +66,7 @@ PIXI.MovieClip = function(textures)
* @readOnly
*/
this.playing = false;
}
};
// constructor
PIXI.MovieClip.prototype = Object.create( PIXI.Sprite.prototype );
@ -97,7 +97,7 @@ Object.defineProperty( PIXI.MovieClip.prototype, 'totalFrames', {
PIXI.MovieClip.prototype.stop = function()
{
this.playing = false;
}
};
/**
* Plays the MovieClip
@ -107,7 +107,7 @@ PIXI.MovieClip.prototype.stop = function()
PIXI.MovieClip.prototype.play = function()
{
this.playing = true;
}
};
/**
* Stops the MovieClip and goes to a specific frame
@ -121,7 +121,7 @@ PIXI.MovieClip.prototype.gotoAndStop = function(frameNumber)
this.currentFrame = frameNumber;
var round = (this.currentFrame + 0.5) | 0;
this.setTexture(this.textures[round % this.textures.length]);
}
};
/**
* Goes to a specific frame and begins playing the MovieClip
@ -133,7 +133,7 @@ PIXI.MovieClip.prototype.gotoAndPlay = function(frameNumber)
{
this.currentFrame = frameNumber;
this.playing = true;
}
};
/*
* Updates the object transform for rendering
@ -163,4 +163,4 @@ PIXI.MovieClip.prototype.updateTransform = function()
this.onComplete();
}
}
}
};

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

@ -77,7 +77,7 @@ PIXI.Sprite = function(texture)
}
this.renderable = true;
}
};
// constructor
PIXI.Sprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
@ -94,7 +94,7 @@ Object.defineProperty(PIXI.Sprite.prototype, 'width', {
return this.scale.x * this.texture.frame.width;
},
set: function(value) {
this.scale.x = value / this.texture.frame.width
this.scale.x = value / this.texture.frame.width;
this._width = value;
}
});
@ -110,7 +110,7 @@ Object.defineProperty(PIXI.Sprite.prototype, 'height', {
return this.scale.y * this.texture.frame.height;
},
set: function(value) {
this.scale.y = value / this.texture.frame.height
this.scale.y = value / this.texture.frame.height;
this._height = value;
}
});
@ -124,7 +124,7 @@ Object.defineProperty(PIXI.Sprite.prototype, 'height', {
PIXI.Sprite.prototype.setTexture = function(texture)
{
// stop current texture;
if(this.texture.baseTexture != texture.baseTexture)
if(this.texture.baseTexture !== texture.baseTexture)
{
this.textureChange = true;
this.texture = texture;
@ -140,7 +140,7 @@ PIXI.Sprite.prototype.setTexture = function(texture)
}
this.updateFrame = true;
}
};
/**
* When the texture is updated, this event will fire to update the scale and frame
@ -149,7 +149,7 @@ PIXI.Sprite.prototype.setTexture = function(texture)
* @param event
* @private
*/
PIXI.Sprite.prototype.onTextureUpdate = function(event)
PIXI.Sprite.prototype.onTextureUpdate = function()
{
//this.texture.removeEventListener( 'update', this.onTextureUpdateBind );
@ -158,12 +158,12 @@ PIXI.Sprite.prototype.onTextureUpdate = function(event)
if(this._height)this.scale.y = this._height / this.texture.frame.height;
this.updateFrame = true;
}
};
// some helper functions..
/**
*
*
* Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId
* The frame ids are created when a Texture packer file has been loaded
*
@ -175,12 +175,12 @@ PIXI.Sprite.prototype.onTextureUpdate = function(event)
PIXI.Sprite.fromFrame = function(frameId)
{
var texture = PIXI.TextureCache[frameId];
if(!texture)throw new Error("The frameId '"+ frameId +"' does not exist in the texture cache" + this);
if(!texture) throw new Error('The frameId "' + frameId + '" does not exist in the texture cache' + this);
return new PIXI.Sprite(texture);
}
};
/**
*
*
* Helper function that creates a sprite that will contain a texture based on an image url
* If the image is not in the texture cache it will be loaded
*
@ -193,4 +193,4 @@ PIXI.Sprite.fromImage = function(imageId)
{
var texture = PIXI.Texture.fromImage(imageId);
return new PIXI.Sprite(texture);
}
};

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

@ -61,7 +61,7 @@ PIXI.Stage = function(backgroundColor)
this.setBackgroundColor(backgroundColor);
this.worldVisible = true;
}
};
// constructor
PIXI.Stage.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
@ -77,7 +77,7 @@ PIXI.Stage.prototype.constructor = PIXI.Stage;
PIXI.Stage.prototype.setInteractionDelegate = function(domElement)
{
this.interactionManager.setTargetDomElement( domElement );
}
};
/*
* Updates the object transform for rendering
@ -104,7 +104,7 @@ PIXI.Stage.prototype.updateTransform = function()
if(this.interactive)this.interactionManager.update();
}
};
/**
* Sets the background color for the stage
@ -116,11 +116,11 @@ PIXI.Stage.prototype.updateTransform = function()
PIXI.Stage.prototype.setBackgroundColor = function(backgroundColor)
{
this.backgroundColor = backgroundColor || 0x000000;
this.backgroundColorSplit = hex2rgb(this.backgroundColor);
this.backgroundColorSplit = PIXI.hex2rgb(this.backgroundColor);
var hex = this.backgroundColor.toString(16);
hex = "000000".substr(0, 6 - hex.length) + hex;
this.backgroundColorString = "#" + hex;
}
hex = '000000'.substr(0, 6 - hex.length) + hex;
this.backgroundColorString = '#' + hex;
};
/**
* This will return the point containing global coords of the mouse.
@ -131,4 +131,4 @@ PIXI.Stage.prototype.setBackgroundColor = function(backgroundColor)
PIXI.Stage.prototype.getMousePosition = function()
{
return this.interactionManager.mouse.global;
}
};

17
src/pixi/extras/CustomRenderable.js
View file

@ -15,7 +15,7 @@ PIXI.CustomRenderable = function()
PIXI.DisplayObject.call( this );
this.renderable = true;
}
};
// constructor
PIXI.CustomRenderable.prototype = Object.create( PIXI.DisplayObject.prototype );
@ -27,10 +27,10 @@ PIXI.CustomRenderable.prototype.constructor = PIXI.CustomRenderable;
* @method renderCanvas
* @param renderer {CanvasRenderer} The renderer instance
*/
PIXI.CustomRenderable.prototype.renderCanvas = function(renderer)
PIXI.CustomRenderable.prototype.renderCanvas = function()
{
// override!
}
};
/**
* If this object is being rendered by a WebGLRenderer it will call this callback to initialize
@ -38,20 +38,21 @@ PIXI.CustomRenderable.prototype.renderCanvas = function(renderer)
* @method initWebGL
* @param renderer {WebGLRenderer} The renderer instance
*/
PIXI.CustomRenderable.prototype.initWebGL = function(renderer)
PIXI.CustomRenderable.prototype.initWebGL = function()
{
// override!
}
};
/**
* If this object is being rendered by a WebGLRenderer it will call this callback
*
* @method renderWebGL
* @param renderer {WebGLRenderer} The renderer instance
* @param rendererGroup {WebGLRenderGroup} The renderer group instance
* @param projectionMatrix {Matrix} The object's projection matrix
*/
PIXI.CustomRenderable.prototype.renderWebGL = function(renderGroup, projectionMatrix)
PIXI.CustomRenderable.prototype.renderWebGL = function()
{
// not sure if both needed? but ya have for now!
// override!
}
};

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

@ -2,7 +2,6 @@
* @author Mat Groves http://matgroves.com/
*/
PIXI.Rope = function(texture, points)
{
PIXI.Strip.call( this, texture );
@ -10,22 +9,21 @@ PIXI.Rope = function(texture, points)
try
{
this.verticies = new Float32Array( points.length * 4);
this.uvs = new Float32Array( points.length * 4);
this.colors = new Float32Array( points.length * 2);
this.indices = new Uint16Array( points.length * 2);
this.verticies = new Float32Array(points.length * 4);
this.uvs = new Float32Array(points.length * 4);
this.colors = new Float32Array(points.length * 2);
this.indices = new Uint16Array(points.length * 2);
}
catch(error)
{
this.verticies = verticies
this.uvs = uvs
this.colors = colors
this.indices = indices
this.verticies = new Array(points.length * 4);
this.uvs = new Array(points.length * 4);
this.colors = new Array(points.length * 2);
this.indices = new Array(points.length * 2);
}
this.refresh();
}
};
// constructor
@ -35,23 +33,21 @@ PIXI.Rope.prototype.constructor = PIXI.Rope;
PIXI.Rope.prototype.refresh = function()
{
var points = this.points;
if(points.length < 1)return;
if(points.length < 1) return;
var uvs = this.uvs
var indices = this.indices;
var colors = this.colors;
var uvs = this.uvs;
var lastPoint = points[0];
var nextPoint;
var perp = {x:0, y:0};
var indices = this.indices;
var colors = this.colors;
this.count-=0.2;
uvs[0] = 0
uvs[1] = 1
uvs[2] = 0
uvs[3] = 1
uvs[0] = 0;
uvs[1] = 1;
uvs[2] = 0;
uvs[3] = 1;
colors[0] = 1;
colors[1] = 1;
@ -68,24 +64,24 @@ PIXI.Rope.prototype.refresh = function()
point = points[i];
index = i * 4;
// time to do some smart drawing!
amount = i/(total-1)
amount = i / (total-1);
if(i%2)
{
uvs[index] = amount;
uvs[index+1] = 0;
uvs[index+2] = amount
uvs[index+3] = 1
uvs[index+2] = amount;
uvs[index+3] = 1;
}
else
{
uvs[index] = amount
uvs[index+1] = 0
uvs[index] = amount;
uvs[index+1] = 0;
uvs[index+2] = amount
uvs[index+3] = 1
uvs[index+2] = amount;
uvs[index+3] = 1;
}
index = i * 2;
@ -98,7 +94,7 @@ PIXI.Rope.prototype.refresh = function()
lastPoint = point;
}
}
};
PIXI.Rope.prototype.updateTransform = function()
{
@ -113,10 +109,10 @@ PIXI.Rope.prototype.updateTransform = function()
this.count-=0.2;
var verticies = this.verticies;
verticies[0] = lastPoint.x + perp.x
verticies[1] = lastPoint.y + perp.y //+ 200
verticies[2] = lastPoint.x - perp.x
verticies[3] = lastPoint.y - perp.y//+200
verticies[0] = lastPoint.x + perp.x;
verticies[1] = lastPoint.y + perp.y; //+ 200
verticies[2] = lastPoint.x - perp.x;
verticies[3] = lastPoint.y - perp.y;//+200
// time to do some smart drawing!
var total = points.length,
@ -140,34 +136,31 @@ PIXI.Rope.prototype.updateTransform = function()
perp.x = nextPoint.y - lastPoint.y;
ratio = (1 - (i / (total-1))) * 10;
if(ratio > 1)ratio = 1;
if(ratio > 1) ratio = 1;
perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y);
num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio;
num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio;
perp.x /= perpLength;
perp.y /= perpLength;
perp.x *= num;
perp.y *= num;
verticies[index] = point.x + perp.x
verticies[index+1] = point.y + perp.y
verticies[index+2] = point.x - perp.x
verticies[index+3] = point.y - perp.y
verticies[index] = point.x + perp.x;
verticies[index+1] = point.y + perp.y;
verticies[index+2] = point.x - perp.x;
verticies[index+3] = point.y - perp.y;
lastPoint = point;
}
PIXI.DisplayObjectContainer.prototype.updateTransform.call( this );
}
};
PIXI.Rope.prototype.setTexture = function(texture)
{
// stop current texture
this.texture = texture;
this.updateFrame = true;
}
};

1
src/pixi/extras/Spine.js
View file

@ -1466,4 +1466,3 @@ PIXI.Spine.prototype.createSprite = function (slot, descriptor) {
slot.sprites[descriptor.name] = sprite;
return sprite;
};

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

@ -45,7 +45,7 @@ PIXI.Strip = function(texture, width, height)
this.verticies = new Float32Array()
this.colors = new Float32Array()
this.indices = new Uint16Array()
*/
*/
this.width = width;
this.height = height;
@ -63,7 +63,7 @@ PIXI.Strip = function(texture, width, height)
}
this.renderable = true;
}
};
// constructor
PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
@ -79,11 +79,10 @@ PIXI.Strip.prototype.setTexture = function(texture)
this.width = texture.frame.width;
this.height = texture.frame.height;
this.updateFrame = true;
}
};
PIXI.Strip.prototype.onTextureUpdate = function(event)
PIXI.Strip.prototype.onTextureUpdate = function()
{
this.updateFrame = true;
}
};
// some helper functions..

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

@ -58,8 +58,8 @@ PIXI.TilingSprite = function(texture, width, height)
this.renderable = true;
this.blendMode = PIXI.blendModes.NORMAL
}
this.blendMode = PIXI.blendModes.NORMAL;
};
// constructor
PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
@ -79,7 +79,7 @@ PIXI.TilingSprite.prototype.setTexture = function(texture)
// stop current texture
this.texture = texture;
this.updateFrame = true;
}
};
/**
* When the texture is updated, this event will fire to update the frame
@ -88,8 +88,7 @@ PIXI.TilingSprite.prototype.setTexture = function(texture)
* @param event
* @private
*/
PIXI.TilingSprite.prototype.onTextureUpdate = function(event)
PIXI.TilingSprite.prototype.onTextureUpdate = function()
{
this.updateFrame = true;
}
};

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

@ -2,36 +2,34 @@
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
* This is the base class for creating a pixi.js filter. Currently only webGL supports filters.
* If you want to make a custom filter this should be your base class.
* @class AbstractFilter
* @constructor
* @param fragmentSrc
* @param uniforms
* @param uniforms
*/
PIXI.AbstractFilter = function(fragmentSrc, uniforms)
{
/**
* An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion.
* For example the blur filter has two passes blurX and blurY.
* @property passes
* @type Array an array of filter objects
* @private
*/
this.passes = [this];
/**
* An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion.
* For example the blur filter has two passes blurX and blurY.
* @property passes
* @type Array an array of filter objects
* @private
*/
this.passes = [this];
this.dirty = true;
this.padding = 0;
this.dirty = true;
this.padding = 0;
/**
@property uniforms
@private
*/
this.uniforms = uniforms || {};
this.fragmentSrc = fragmentSrc || [];
}
/**
@property uniforms
@private
*/
this.uniforms = uniforms || {};
this.fragmentSrc = fragmentSrc || [];
};

21
src/pixi/filters/BlurFilter.js
View file

@ -2,10 +2,9 @@
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
*
* The BlurFilter applies a Gaussian blur to an object.
*
* The BlurFilter applies a Gaussian blur to an object.
* The strength of the blur can be set for x- and y-axis separately (always relative to the stage).
*
* @class BlurFilter
@ -13,13 +12,11 @@
*/
PIXI.BlurFilter = function()
{
this.blurXFilter = new PIXI.BlurXFilter();
this.blurYFilter = new PIXI.BlurYFilter();
this.blurXFilter = new PIXI.BlurXFilter();
this.blurYFilter = new PIXI.BlurYFilter();
this.passes =[this.blurXFilter, this.blurYFilter];
}
this.passes =[this.blurXFilter, this.blurYFilter];
};
/**
* Sets the strength of both the blurX and blurY properties simultaneously
@ -33,7 +30,7 @@ Object.defineProperty(PIXI.BlurFilter.prototype, 'blur', {
return this.blurXFilter.blur;
},
set: function(value) {
this.blurXFilter.blur = this.blurYFilter.blur = value;
this.blurXFilter.blur = this.blurYFilter.blur = value;
}
});
@ -49,7 +46,7 @@ Object.defineProperty(PIXI.BlurFilter.prototype, 'blurX', {
return this.blurXFilter.blur;
},
set: function(value) {
this.blurXFilter.blur = value;
this.blurXFilter.blur = value;
}
});
@ -65,6 +62,6 @@ Object.defineProperty(PIXI.BlurFilter.prototype, 'blurY', {
return this.blurYFilter.blur;
},
set: function(value) {
this.blurYFilter.blur = value;
this.blurYFilter.blur = value;
}
});

71
src/pixi/filters/BlurXFilter.js
View file

@ -2,55 +2,52 @@
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.BlurXFilter = function()
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
blur: {type: '1f', value: 1/512},
};
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform float blur;",
"uniform sampler2D uSampler;",
"void main(void) {",
"vec4 sum = vec4(0.0);",
PIXI.AbstractFilter.call( this );
"sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;",
"gl_FragColor = sum;",
this.passes = [this];
"}"
];
}
// set the uniforms
this.uniforms = {
blur: {type: '1f', value: 1/512},
};
this.fragmentSrc = [
'precision mediump float;',
'varying vec2 vTextureCoord;',
'varying float vColor;',
'uniform float blur;',
'uniform sampler2D uSampler;',
'void main(void) {',
' vec4 sum = vec4(0.0);',
' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;',
' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;',
' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;',
' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;',
' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;',
' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;',
' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;',
' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;',
' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;',
' gl_FragColor = sum;',
'}'
];
};
PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter;
Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', {
get: function() {
return this.uniforms.blur.value / (1/7000);
},
set: function(value) {
this.dirty = true;
this.uniforms.blur.value = (1/7000) * value;
this.dirty = true;
this.uniforms.blur.value = (1/7000) * value;
}
});

68
src/pixi/filters/BlurYFilter.js
View file

@ -2,43 +2,41 @@
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.BlurYFilter = function()
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
blur: {type: '1f', value: 1/512},
};
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform float blur;",
"uniform sampler2D uSampler;",
"void main(void) {",
"vec4 sum = vec4(0.0);",
PIXI.AbstractFilter.call( this );
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;",
"sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;",
"gl_FragColor = sum;",
this.passes = [this];
"}"
];
}
// set the uniforms
this.uniforms = {
blur: {type: '1f', value: 1/512},
};
this.fragmentSrc = [
'precision mediump float;',
'varying vec2 vTextureCoord;',
'varying float vColor;',
'uniform float blur;',
'uniform sampler2D uSampler;',
'void main(void) {',
' vec4 sum = vec4(0.0);',
' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;',
' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;',
' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;',
' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;',
' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;',
' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;',
' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;',
' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;',
' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;',
' gl_FragColor = sum;',
'}'
];
};
PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter;
@ -48,7 +46,7 @@ Object.defineProperty(PIXI.BlurYFilter.prototype, 'blur', {
return this.uniforms.blur.value / (1/7000);
},
set: function(value) {
//this.padding = value;
this.uniforms.blur.value = (1/7000) * value;
//this.padding = value;
this.uniforms.blur.value = (1/7000) * value;
}
});

60
src/pixi/filters/ColorMatrixFilter.js
View file

@ -3,41 +3,41 @@
*/
/**
*
* The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA
* color and alpha values of every pixel on your displayObject to produce a result
*
* The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA
* color and alpha values of every pixel on your displayObject to produce a result
* with a new set of RGBA color and alpha values. Its pretty powerful!
* @class ColorMatrixFilter
* @contructor
*/
PIXI.ColorMatrixFilter = function()
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
matrix: {type: 'mat4', value: [1,0,0,0,
0,1,0,0,
0,0,1,0,
0,0,0,1]},
};
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform float invert;",
"uniform mat4 matrix;",
"uniform sampler2D uSampler;",
"void main(void) {",
"gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;",
"gl_FragColor = gl_FragColor * vColor;",
"}"
];
}
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
matrix: {type: 'mat4', value: [1,0,0,0,
0,1,0,0,
0,0,1,0,
0,0,0,1]},
};
this.fragmentSrc = [
'precision mediump float;',
'varying vec2 vTextureCoord;',
'varying float vColor;',
'uniform float invert;',
'uniform mat4 matrix;',
'uniform sampler2D uSampler;',
'void main(void) {',
' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;',
' gl_FragColor = gl_FragColor * vColor;',
'}'
];
};
PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter;
@ -54,6 +54,6 @@ Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', {
return this.uniforms.matrix.value;
},
set: function(value) {
this.uniforms.matrix.value = value;
this.uniforms.matrix.value = value;
}
});

50
src/pixi/filters/ColorStepFilter.js
View file

@ -2,37 +2,37 @@
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
*
*
* This turns your displayObjects to black and white.
* @class ColorStepFilter
* @contructor
*/
PIXI.ColorStepFilter = function()
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
step: {type: '1f', value: 5},
};
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform sampler2D uSampler;",
"uniform float step;",
"void main(void) {",
"vec4 color = texture2D(uSampler, vTextureCoord);",
"color = floor(color * step) / step;",
"gl_FragColor = color * vColor;",
"}"
];
}
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
step: {type: '1f', value: 5},
};
this.fragmentSrc = [
'precision mediump float;',
'varying vec2 vTextureCoord;',
'varying float vColor;',
'uniform sampler2D uSampler;',
'uniform float step;',
'void main(void) {',
' vec4 color = texture2D(uSampler, vTextureCoord);',
' color = floor(color * step) / step;',
' gl_FragColor = color * vColor;',
'}'
];
};
PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter;
@ -46,6 +46,6 @@ Object.defineProperty(PIXI.ColorStepFilter.prototype, 'step', {
return this.uniforms.step.value;
},
set: function(value) {
this.uniforms.step.value = value;
this.uniforms.step.value = value;
}
});

101
src/pixi/filters/CrossHatchFilter.js
View file

@ -2,58 +2,55 @@
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.CrossHatchFilter = function()
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
blur: {type: '1f', value: 1/512},
};
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform float blur;",
"uniform sampler2D uSampler;",
"void main(void) {",
" float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);",
" ",
" gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);",
" ",
" if (lum < 1.00) {",
" if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {",
" gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);",
" }",
" }",
" ",
" if (lum < 0.75) {",
" if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {",
" gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);",
" }",
" }",
" ",
" if (lum < 0.50) {",
" if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {",
" gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);",
" }",
" }",
" ",
" if (lum < 0.3) {",
" if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {",
" gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);",
" }",
" }",
"}"
];
}
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
blur: {type: '1f', value: 1 / 512},
};
this.fragmentSrc = [
'precision mediump float;',
'varying vec2 vTextureCoord;',
'varying float vColor;',
'uniform float blur;',
'uniform sampler2D uSampler;',
'void main(void) {',
' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);',
' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);',
' if (lum < 1.00) {',
' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {',
' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);',
' }',
' }',
' if (lum < 0.75) {',
' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {',
' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);',
' }',
' }',
' if (lum < 0.50) {',
' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {',
' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);',
' }',
' }',
' if (lum < 0.3) {',
' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {',
' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);',
' }',
' }',
'}'
];
};
PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter;
@ -63,7 +60,7 @@ Object.defineProperty(PIXI.CrossHatchFilter.prototype, 'blur', {
return this.uniforms.blur.value / (1/7000);
},
set: function(value) {
//this.padding = value;
this.uniforms.blur.value = (1/7000) * value;
//this.padding = value;
this.uniforms.blur.value = (1/7000) * value;
}
});

134
src/pixi/filters/DisplacementFilter.js
View file

@ -2,10 +2,9 @@
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
*
* The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object.
*
* The DisplacementFilter 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.
* @class DisplacementFilter
@ -14,80 +13,75 @@
*/
PIXI.DisplacementFilter = function(texture)
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
texture.baseTexture._powerOf2 = true;
PIXI.AbstractFilter.call( this );
// set the uniforms
//console.log()
this.uniforms = {
displacementMap: {type: 'sampler2D', value:texture},
scale: {type: '2f', value:{x:30, y:30}},
offset: {type: '2f', value:{x:0, y:0}},
mapDimensions: {type: '2f', value:{x:1, y:5112}},
dimensions: {type: '4fv', value:[0,0,0,0]}
};
this.passes = [this];
texture.baseTexture._powerOf2 = true;
if(texture.baseTexture.hasLoaded)
{
this.uniforms.mapDimensions.value.x = texture.width;
this.uniforms.mapDimensions.value.y = texture.height;
}
else
{
this.boundLoadedFunction = this.onTextureLoaded.bind(this);
// set the uniforms
//console.log()
this.uniforms = {
displacementMap: {type: 'sampler2D', value:texture},
scale: {type: '2f', value:{x:30, y:30}},
offset: {type: '2f', value:{x:0, y:0}},
mapDimensions: {type: '2f', value:{x:1, y:5112}},
dimensions: {type: '4fv', value:[0,0,0,0]}
};
texture.baseTexture.on("loaded", this.boundLoadedFunction);
}
if(texture.baseTexture.hasLoaded)
{
this.uniforms.mapDimensions.value.x = texture.width;
this.uniforms.mapDimensions.value.y = texture.height;
}
else
{
this.boundLoadedFunction = this.onTextureLoaded.bind(this);
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform sampler2D displacementMap;",
"uniform sampler2D uSampler;",
"uniform vec2 scale;",
"uniform vec2 offset;",
"uniform vec4 dimensions;",
"uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);",
// "const vec2 textureDimensions = vec2(750.0, 750.0);",
"void main(void) {",
"vec2 mapCords = vTextureCoord.xy;",
// "mapCords -= ;",
"mapCords += (dimensions.zw + offset)/ dimensions.xy ;",
"mapCords.y *= -1.0;",
"mapCords.y += 1.0;",
"vec2 matSample = texture2D(displacementMap, mapCords).xy;",
"matSample -= 0.5;",
"matSample *= scale;",
"matSample /= mapDimensions;",
"gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));",
"gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);",
"vec2 cord = vTextureCoord;",
//"gl_FragColor = texture2D(displacementMap, cord);",
"gl_FragColor = gl_FragColor * vColor;",
"}"
];
}
texture.baseTexture.on('loaded', this.boundLoadedFunction);
}
this.fragmentSrc = [
'precision mediump float;',
'varying vec2 vTextureCoord;',
'varying float vColor;',
'uniform sampler2D displacementMap;',
'uniform sampler2D uSampler;',
'uniform vec2 scale;',
'uniform vec2 offset;',
'uniform vec4 dimensions;',
'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);',
// 'const vec2 textureDimensions = vec2(750.0, 750.0);',
'void main(void) {',
' vec2 mapCords = vTextureCoord.xy;',
//' mapCords -= ;',
' mapCords += (dimensions.zw + offset)/ dimensions.xy ;',
' mapCords.y *= -1.0;',
' mapCords.y += 1.0;',
' vec2 matSample = texture2D(displacementMap, mapCords).xy;',
' matSample -= 0.5;',
' matSample *= scale;',
' matSample /= mapDimensions;',
' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));',
' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);',
' vec2 cord = vTextureCoord;',
//' gl_FragColor = texture2D(displacementMap, cord);',
' gl_FragColor = gl_FragColor * vColor;',
'}'
];
};
PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter;
PIXI.DisplacementFilter.prototype.onTextureLoaded = function()
{
this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width;
this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height;
this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width;
this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height;
this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction)
}
this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction);
};
/**
* The texture used for the displacemtent map * must be power of 2 texture at the moment
@ -100,7 +94,7 @@ Object.defineProperty(PIXI.DisplacementFilter.prototype, 'map', {
return this.uniforms.displacementMap.value;
},
set: function(value) {
this.uniforms.displacementMap.value = value;
this.uniforms.displacementMap.value = value;
}
});
@ -115,7 +109,7 @@ Object.defineProperty(PIXI.DisplacementFilter.prototype, 'scale', {
return this.uniforms.scale.value;
},
set: function(value) {
this.uniforms.scale.value = value;
this.uniforms.scale.value = value;
}
});
@ -130,6 +124,6 @@ Object.defineProperty(PIXI.DisplacementFilter.prototype, 'offset', {
return this.uniforms.offset.value;
},
set: function(value) {
this.uniforms.offset.value = value;
this.uniforms.offset.value = value;
}
});
});

76
src/pixi/filters/DotScreenFilter.js
View file

@ -5,50 +5,50 @@
/**
*
* This filter applies a pixlate effect making display objects appear "blocky"
* This filter applies a pixlate effect making display objects appear 'blocky'
* @class PixelateFilter
* @contructor
*/
PIXI.DotScreenFilter = function()
{
PIXI.AbstractFilter.call( this );
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
scale: {type: '1f', value:1},
angle: {type: '1f', value:5},
dimensions: {type: '4fv', value:[0,0,0,0]}
};
this.passes = [this];
// set the uniforms
this.uniforms = {
scale: {type: '1f', value:1},
angle: {type: '1f', value:5},
dimensions: {type: '4fv', value:[0,0,0,0]}
};
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform vec4 dimensions;",
"uniform sampler2D uSampler;",
this.fragmentSrc = [
'precision mediump float;',
'varying vec2 vTextureCoord;',
'varying float vColor;',
'uniform vec4 dimensions;',
'uniform sampler2D uSampler;',
"uniform float angle;",
"uniform float scale;",
'uniform float angle;',
'uniform float scale;',
"float pattern() {",
"float s = sin(angle), c = cos(angle);",
"vec2 tex = vTextureCoord * dimensions.xy;",
"vec2 point = vec2(",
"c * tex.x - s * tex.y,",
"s * tex.x + c * tex.y",
") * scale;",
"return (sin(point.x) * sin(point.y)) * 4.0;",
"}",
'float pattern() {',
' float s = sin(angle), c = cos(angle);',
' vec2 tex = vTextureCoord * dimensions.xy;',
' vec2 point = vec2(',
' c * tex.x - s * tex.y,',
' s * tex.x + c * tex.y',
' ) * scale;',
' return (sin(point.x) * sin(point.y)) * 4.0;',
'}',
"void main() {",
"vec4 color = texture2D(uSampler, vTextureCoord);",
"float average = (color.r + color.g + color.b) / 3.0;",
"gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);",
"}",
];
}
'void main() {',
' vec4 color = texture2D(uSampler, vTextureCoord);',
' float average = (color.r + color.g + color.b) / 3.0;',
' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);',
'}'
];
};
PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype );
PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter;
@ -64,8 +64,8 @@ Object.defineProperty(PIXI.DotScreenFilter.prototype, 'scale', {
return this.uniforms.scale.value;
},
set: function(value) {
this.dirty = true;
this.uniforms.scale.value = value;
this.dirty = true;
this.uniforms.scale.value = value;
}
});
@ -80,7 +80,7 @@ Object.defineProperty(PIXI.DotScreenFilter.prototype, 'angle', {
return this.uniforms.angle.value;
},
set: function(value) {
this.dirty = true;
this.uniforms.angle.value = value;
this.dirty = true;
this.uniforms.angle.value = value;
}
});

4
src/pixi/filters/FilterBlock.js
View file

@ -8,6 +8,4 @@ PIXI.FilterBlock = function()
{
this.visible = true;
this.renderable = true;
}
>>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08
};

50
src/pixi/filters/GrayFilter.js
View file

@ -2,37 +2,37 @@
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
*
*
* This turns your displayObjects to black and white.
* @class GrayFilter
* @contructor
*/
PIXI.GrayFilter = function()
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
gray: {type: '1f', value: 1},
};
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform sampler2D uSampler;",
"uniform float gray;",
"void main(void) {",
"gl_FragColor = texture2D(uSampler, vTextureCoord);",
"gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);",
"gl_FragColor = gl_FragColor * vColor;",
"}"
];
}
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
gray: {type: '1f', value: 1},
};
this.fragmentSrc = [
'precision mediump float;',
'varying vec2 vTextureCoord;',
'varying float vColor;',
'uniform sampler2D uSampler;',
'uniform float gray;',
'void main(void) {',
' gl_FragColor = texture2D(uSampler, vTextureCoord);',
' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);',
' gl_FragColor = gl_FragColor * vColor;',
'}'
];
};
PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter;
@ -46,6 +46,6 @@ Object.defineProperty(PIXI.GrayFilter.prototype, 'gray', {
return this.uniforms.gray.value;
},
set: function(value) {
this.uniforms.gray.value = value;
this.uniforms.gray.value = value;
}
});

54
src/pixi/filters/InvertFilter.js
View file

@ -3,37 +3,37 @@
*/
/**
*
*
* This inverts your displayObjects colors.
* @class InvertFilter
* @contructor
*/
PIXI.InvertFilter = function()
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
invert: {type: '1f', value: 1},
};
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform float invert;",
"uniform sampler2D uSampler;",
"void main(void) {",
"gl_FragColor = texture2D(uSampler, vTextureCoord);",
"gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);",
//"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;",
"gl_FragColor = gl_FragColor * vColor;",
"}"
];
}
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
invert: {type: '1f', value: 1},
};
this.fragmentSrc = [
'precision mediump float;',
'varying vec2 vTextureCoord;',
'varying float vColor;',
'uniform float invert;',
'uniform sampler2D uSampler;',
'void main(void) {',
' gl_FragColor = texture2D(uSampler, vTextureCoord);',
' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);',
//' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;',
' gl_FragColor = gl_FragColor * vColor;',
'}'
];
};
PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter;
@ -47,6 +47,6 @@ Object.defineProperty(PIXI.InvertFilter.prototype, 'invert', {
return this.uniforms.invert.value;
},
set: function(value) {
this.uniforms.invert.value = value;
this.uniforms.invert.value = value;
}
});
});

63
src/pixi/filters/PixelateFilter.js
View file

@ -3,50 +3,49 @@
*/
/**
*
* This filter applies a pixlate effect making display objects appear "blocky"
*
* This filter applies a pixlate effect making display objects appear 'blocky'
* @class PixelateFilter
* @contructor
*/
PIXI.PixelateFilter = function()
{
PIXI.AbstractFilter.call( this );
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
invert: {type: '1f', value: 0},
dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])},
pixelSize: {type: '2f', value:{x:10, y:10}},
};
this.passes = [this];
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform vec2 testDim;",
"uniform vec4 dimensions;",
"uniform vec2 pixelSize;",
"uniform sampler2D uSampler;",
"void main(void) {",
"vec2 coord = vTextureCoord;",
// set the uniforms
this.uniforms = {
invert: {type: '1f', value: 0},
dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])},
pixelSize: {type: '2f', value:{x:10, y:10}},
};
"vec2 size = dimensions.xy/pixelSize;",
this.fragmentSrc = [
'precision mediump float;',
'varying vec2 vTextureCoord;',
'varying float vColor;',
'uniform vec2 testDim;',
'uniform vec4 dimensions;',
'uniform vec2 pixelSize;',
'uniform sampler2D uSampler;',
"vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;",
"gl_FragColor = texture2D(uSampler, color);",
"}"
];
'void main(void) {',
' vec2 coord = vTextureCoord;',
}
' vec2 size = dimensions.xy/pixelSize;',
' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;',
' gl_FragColor = texture2D(uSampler, color);',
'}'
];
};
PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter;
/**
*
*
* This a point that describes the size of the blocs. x is the width of the block and y is the the height
* @property size
* @type Point
@ -56,7 +55,7 @@ Object.defineProperty(PIXI.PixelateFilter.prototype, 'size', {
return this.uniforms.pixelSize.value;
},
set: function(value) {
this.dirty = true;
this.uniforms.pixelSize.value = value;
this.dirty = true;
this.uniforms.pixelSize.value = value;
}
});
});

65
src/pixi/filters/RGBSplitFilter.js
View file

@ -2,39 +2,38 @@
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.RGBSplitFilter = function()
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
red: {type: '2f', value: {x:20, y:20}},
green: {type: '2f', value: {x:-20, y:20}},
blue: {type: '2f', value: {x:20, y:-20}},
dimensions: {type: '4fv', value:[0,0,0,0]}
};
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform vec2 red;",
"uniform vec2 green;",
"uniform vec2 blue;",
"uniform vec4 dimensions;",
"uniform sampler2D uSampler;",
"void main(void) {",
"gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;",
"gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;",
"gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;",
"gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;",
"}"
];
}
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
red: {type: '2f', value: {x:20, y:20}},
green: {type: '2f', value: {x:-20, y:20}},
blue: {type: '2f', value: {x:20, y:-20}},
dimensions: {type: '4fv', value:[0,0,0,0]}
};
this.fragmentSrc = [
'precision mediump float;',
'varying vec2 vTextureCoord;',
'varying float vColor;',
'uniform vec2 red;',
'uniform vec2 green;',
'uniform vec2 blue;',
'uniform vec4 dimensions;',
'uniform sampler2D uSampler;',
'void main(void) {',
' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;',
' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;',
' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;',
' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;',
'}'
];
};
PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter;
@ -44,7 +43,7 @@ Object.defineProperty(PIXI.RGBSplitFilter.prototype, 'angle', {
return this.uniforms.blur.value / (1/7000);
},
set: function(value) {
//this.padding = value;
this.uniforms.blur.value = (1/7000) * value;
//this.padding = value;
this.uniforms.blur.value = (1/7000) * value;
}
});

56
src/pixi/filters/SepiaFilter.js
View file

@ -1,42 +1,40 @@
/**
/**
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
*
*
* This applies a sepia effect to your displayObjects.
* @class SepiaFilter
* @contructor
*/
PIXI.SepiaFilter = function()
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
sepia: {type: '1f', value: 1},
};
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform float sepia;",
"uniform sampler2D uSampler;",
"const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);",
"void main(void) {",
"gl_FragColor = texture2D(uSampler, vTextureCoord);",
"gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);",
"gl_FragColor = gl_FragColor * vColor;",
"}"
];
}
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
sepia: {type: '1f', value: 1},
};
this.fragmentSrc = [
'precision mediump float;',
'varying vec2 vTextureCoord;',
'varying float vColor;',
'uniform float sepia;',
'uniform sampler2D uSampler;',
'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);',
'void main(void) {',
' gl_FragColor = texture2D(uSampler, vTextureCoord);',
' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);',
' gl_FragColor = gl_FragColor * vColor;',
'}'
];
};
PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter;
@ -50,6 +48,6 @@ Object.defineProperty(PIXI.SepiaFilter.prototype, 'sepia', {
return this.uniforms.sepia.value;
},
set: function(value) {
this.uniforms.sepia.value = value;
this.uniforms.sepia.value = value;
}
});

91
src/pixi/filters/SmartBlurFilter.js
View file

@ -2,54 +2,51 @@
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.SmartBlurFilter = function()
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
blur: {type: '1f', value: 1/512},
};
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"uniform sampler2D uSampler;",
// "uniform vec2 delta;",
"const vec2 delta = vec2(1.0/10.0, 0.0);",
// "uniform float darkness;",
"float random(vec3 scale, float seed) {",
"return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);",
"}",
"void main(void) {",
"vec4 color = vec4(0.0);",
"float total = 0.0;",
"float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);",
"for (float t = -30.0; t <= 30.0; t++) {",
"float percent = (t + offset - 0.5) / 30.0;",
"float weight = 1.0 - abs(percent);",
"vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);",
"sample.rgb *= sample.a;",
"color += sample * weight;",
"total += weight;",
"}",
"gl_FragColor = color / total;",
"gl_FragColor.rgb /= gl_FragColor.a + 0.00001;",
// "gl_FragColor.rgb *= darkness;",
"}"
];
}
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
blur: {type: '1f', value: 1/512},
};
this.fragmentSrc = [
'precision mediump float;',
'varying vec2 vTextureCoord;',
'uniform sampler2D uSampler;',
//'uniform vec2 delta;',
'const vec2 delta = vec2(1.0/10.0, 0.0);',
//'uniform float darkness;',
'float random(vec3 scale, float seed) {',
' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);',
'}',
'void main(void) {',
' vec4 color = vec4(0.0);',
' float total = 0.0;',
' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);',
' for (float t = -30.0; t <= 30.0; t++) {',
' float percent = (t + offset - 0.5) / 30.0;',
' float weight = 1.0 - abs(percent);',
' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);',
' sample.rgb *= sample.a;',
' color += sample * weight;',
' total += weight;',
' }',
' gl_FragColor = color / total;',
' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;',
//' gl_FragColor.rgb *= darkness;',
'}'
];
};
PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter;
@ -59,6 +56,6 @@ Object.defineProperty(PIXI.SmartBlurFilter.prototype, 'blur', {
return this.uniforms.blur.value;
},
set: function(value) {
this.uniforms.blur.value = value;
this.uniforms.blur.value = value;
}
});

88
src/pixi/filters/TwistFilter.js
View file

@ -3,59 +3,57 @@
*/
/**
*
* This filter applies a pixlate effect making display objects appear "blocky"
*
* This filter applies a pixlate effect making display objects appear 'blocky'
* @class PixelateFilter
* @contructor
*/
PIXI.TwistFilter = function()
{
PIXI.AbstractFilter.call( this );
PIXI.AbstractFilter.call( this );
this.passes = [this];
// set the uniforms
this.uniforms = {
radius: {type: '1f', value:0.5},
angle: {type: '1f', value:5},
offset: {type: '2f', value:{x:0.5, y:0.5}},
};
this.passes = [this];
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform vec4 dimensions;",
"uniform sampler2D uSampler;",
"uniform float radius;",
"uniform float angle;",
"uniform vec2 offset;",
// set the uniforms
this.uniforms = {
radius: {type: '1f', value:0.5},
angle: {type: '1f', value:5},
offset: {type: '2f', value:{x:0.5, y:0.5}},
};
"void main(void) {",
"vec2 coord = vTextureCoord - offset;",
"float distance = length(coord);",
"if (distance < radius){",
this.fragmentSrc = [
'precision mediump float;',
'varying vec2 vTextureCoord;',
'varying float vColor;',
'uniform vec4 dimensions;',
'uniform sampler2D uSampler;',
"float ratio = (radius - distance) / radius;",
"float angleMod = ratio * ratio * angle;",
"float s = sin(angleMod);",
"float c = cos(angleMod);",
"coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);",
'uniform float radius;',
'uniform float angle;',
'uniform vec2 offset;',
"}",
'void main(void) {',
' vec2 coord = vTextureCoord - offset;',
' float distance = length(coord);',
"gl_FragColor = texture2D(uSampler, coord+offset);",
"}"
];
}
' if (distance < radius) {',
' float ratio = (radius - distance) / radius;',
' float angleMod = ratio * ratio * angle;',
' float s = sin(angleMod);',
' float c = cos(angleMod);',
' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);',
' }',
' gl_FragColor = texture2D(uSampler, coord+offset);',
'}'
];
};
PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter;
/**
*
*
* This point describes the the offset of the twist
* @property size
* @type Point
@ -65,13 +63,13 @@ Object.defineProperty(PIXI.TwistFilter.prototype, 'offset', {
return this.uniforms.offset.value;
},
set: function(value) {
this.dirty = true;
this.uniforms.offset.value = value;
this.dirty = true;
this.uniforms.offset.value = value;
}
});
/**
*
*
* This radius describes size of the twist
* @property size
* @type Number
@ -81,13 +79,13 @@ Object.defineProperty(PIXI.TwistFilter.prototype, 'radius', {
return this.uniforms.radius.value;
},
set: function(value) {
this.dirty = true;
this.uniforms.radius.value = value;
this.dirty = true;
this.uniforms.radius.value = value;
}
});
/**
*
*
* This radius describes angle of the twist
* @property angle
* @type Number
@ -97,7 +95,7 @@ Object.defineProperty(PIXI.TwistFilter.prototype, 'angle', {
return this.uniforms.angle.value;
},
set: function(value) {
this.dirty = true;
this.uniforms.angle.value = value;
this.dirty = true;
this.uniforms.angle.value = value;
}
});

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

@ -6,16 +6,16 @@
* A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the
* assets have been loaded they are added to the PIXI Texture cache and can be accessed
* easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()
* When all items have been loaded this class will dispatch a "onLoaded" event
* As each individual item is loaded this class will dispatch a "onProgress" event
* When all items have been loaded this class will dispatch a 'onLoaded' event
* As each individual item is loaded this class will dispatch a 'onProgress' event
*
* @class AssetLoader
* @constructor
* @uses EventTarget
* @param {Array<String>} assetURLs an array of image/sprite sheet urls that you would like loaded
* supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported
* sprite sheet data formats only include "JSON" at this time. Supported bitmap font
* data formats include "xml" and "fnt".
* supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported
* sprite sheet data formats only include 'JSON' at this time. Supported bitmap font
* data formats include 'xml' and 'fnt'.
* @param crossorigin {Boolean} Whether requests should be treated as crossorigin
*/
PIXI.AssetLoader = function(assetURLs, crossorigin)
@ -45,17 +45,15 @@ PIXI.AssetLoader = function(assetURLs, crossorigin)
* @type Object
*/
this.loadersByType = {
"jpg": PIXI.ImageLoader,
"jpeg": PIXI.ImageLoader,
"png": PIXI.ImageLoader,
"gif": PIXI.ImageLoader,
"json": PIXI.JsonLoader,
"anim": PIXI.SpineLoader,
"xml": PIXI.BitmapFontLoader,
"fnt": PIXI.BitmapFontLoader
'jpg': PIXI.ImageLoader,
'jpeg': PIXI.ImageLoader,
'png': PIXI.ImageLoader,
'gif': PIXI.ImageLoader,
'json': PIXI.JsonLoader,
'anim': PIXI.SpineLoader,
'xml': PIXI.BitmapFontLoader,
'fnt': PIXI.BitmapFontLoader
};
};
/**
@ -72,31 +70,32 @@ PIXI.AssetLoader = function(assetURLs, crossorigin)
PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader;
PIXI.AssetLoader.prototype._getDataType = function(str)
PIXI.AssetLoader.prototype._getDataType = function(str)
{
var test = "data:";
var test = 'data:';
//starts with 'data:'
var start = str.slice(0, test.length).toLowerCase();
if (start == test) {
if (start === test) {
var data = str.slice(test.length);
var sepIdx = data.indexOf(',');
if (sepIdx === -1) //malformed data URI scheme
return null;
//e.g. "image/gif;base64" => "image/gif"
//e.g. 'image/gif;base64' => 'image/gif'
var info = data.slice(0, sepIdx).split(';')[0];
//We might need to handle some special cases here...
//standardize text/plain to "txt" file extension
if (!info || info.toLowerCase() == "text/plain")
return "txt"
//standardize text/plain to 'txt' file extension
if (!info || info.toLowerCase() === 'text/plain')
return 'txt';
//User specified mime type, try splitting it by '/'
return info.split('/').pop().toLowerCase();
}
return null;
}
};
/**
* Starts loading the assets sequentially
@ -121,15 +120,15 @@ PIXI.AssetLoader.prototype.load = function()
//if not, assume it's a file URI
if (!fileType)
fileType = fileName.split("?").shift().split(".").pop().toLowerCase();
fileType = fileName.split('?').shift().split('.').pop().toLowerCase();
var Constructor = this.loadersByType[fileType];
if(!Constructor)
throw new Error(fileType + " is an unsupported file type");
throw new Error(fileType + ' is an unsupported file type');
var loader = new Constructor(fileName, this.crossorigin);
loader.addEventListener("loaded", onLoad);
loader.addEventListener('loaded', onLoad);
loader.load();
}
};
@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.load = function()
PIXI.AssetLoader.prototype.onAssetLoaded = function()
{
this.loadCount--;
this.dispatchEvent({type: "onProgress", content: this});
this.dispatchEvent({type: 'onProgress', content: this});
if (this.onProgress) this.onProgress();
if (!this.loadCount)
{
this.dispatchEvent({type: "onComplete", content: this});
this.dispatchEvent({type: 'onComplete', content: this});
if(this.onComplete) this.onComplete();
}
};

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

@ -3,10 +3,10 @@
*/
/**
* The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
* The xml loader is used to load in XML bitmap font data ('xml' or 'fnt')
* To generate the data you can use http://www.angelcode.com/products/bmfont/
* This loader will also load the image file as the data.
* When loaded this class will dispatch a "loaded" event
* When loaded this class will dispatch a 'loaded' event
*
* @class BitmapFontLoader
* @uses EventTarget
@ -19,7 +19,7 @@ PIXI.BitmapFontLoader = function(url, crossorigin)
/*
* i use texture packer to load the assets..
* http://www.codeandweb.com/texturepacker
* make sure to set the format as "JSON"
* make sure to set the format as 'JSON'
*/
PIXI.EventTarget.call(this);
@ -46,7 +46,7 @@ PIXI.BitmapFontLoader = function(url, crossorigin)
* @type String
* @readOnly
*/
this.baseUrl = url.replace(/[^\/]*$/, "");
this.baseUrl = url.replace(/[^\/]*$/, '');
/**
* [read-only] The texture of the bitmap font
@ -74,9 +74,9 @@ PIXI.BitmapFontLoader.prototype.load = function()
scope.onXMLLoaded();
};
this.ajaxRequest.open("GET", this.url, true);
if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
this.ajaxRequest.send(null)
this.ajaxRequest.open('GET', this.url, true);
if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml');
this.ajaxRequest.send(null);
};
/**
@ -87,40 +87,40 @@ PIXI.BitmapFontLoader.prototype.load = function()
*/
PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
{
if (this.ajaxRequest.readyState == 4)
if (this.ajaxRequest.readyState === 4)
{
if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1)
{
var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue;
var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
this.texture = image.texture.baseTexture;
var data = {};
var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
data.font = info.attributes.getNamedItem("face").nodeValue;
data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0];
var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0];
data.font = info.attributes.getNamedItem('face').nodeValue;
data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10);
data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10);
data.chars = {};
//parse letters
var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
var letters = this.ajaxRequest.responseXML.getElementsByTagName('char');
for (var i = 0; i < letters.length; i++)
{
var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10);
var textureRect = new PIXI.Rectangle(
parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10),
parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10),
parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10),
parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10)
);
data.chars[charCode] = {
xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10),
yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10),
xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10),
kerning: {},
texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect)
@ -128,12 +128,12 @@ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
}
//parse kernings
var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning');
for (i = 0; i < kernings.length; i++)
{
var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10);
var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10);
var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10);
data.chars[second].kerning[first] = amount;
@ -142,7 +142,7 @@ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
PIXI.BitmapText.fonts[data.font] = data;
var scope = this;
image.addEventListener("loaded", function() {
image.addEventListener('loaded', function() {
scope.onLoaded();
});
image.load();
@ -158,5 +158,5 @@ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
*/
PIXI.BitmapFontLoader.prototype.onLoaded = function()
{
this.dispatchEvent({type: "loaded", content: this});
this.dispatchEvent({type: 'loaded', content: this});
};

14
src/pixi/loaders/ImageLoader.js
View file

@ -3,7 +3,7 @@
*/
/**
* The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
* The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif')
* Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
* When loaded this class will dispatch a 'loaded' event
*
@ -46,7 +46,7 @@ PIXI.ImageLoader.prototype.load = function()
if(!this.texture.baseTexture.hasLoaded)
{
var scope = this;
this.texture.baseTexture.addEventListener("loaded", function()
this.texture.baseTexture.addEventListener('loaded', function()
{
scope.onLoaded();
});
@ -65,7 +65,7 @@ PIXI.ImageLoader.prototype.load = function()
*/
PIXI.ImageLoader.prototype.onLoaded = function()
{
this.dispatchEvent({type: "loaded", content: this});
this.dispatchEvent({type: 'loaded', content: this});
};
/**
@ -75,7 +75,7 @@ PIXI.ImageLoader.prototype.onLoaded = function()
* @method loadFramedSpriteSheet
* @param frameWidth {Number} with of each frame
* @param frameHeight {Number} height of each frame
* @param textureName {String} if given, the frames will be cached in <textureName>-<ord> format
* @param textureName {String} if given, the frames will be cached in <textureName>-<ord> format
*/
PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName)
{
@ -96,14 +96,14 @@ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHei
});
this.frames.push(texture);
if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture;
if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture;
}
}
if(!this.texture.baseTexture.hasLoaded)
{
var scope = this;
this.texture.baseTexture.addEventListener("loaded", function() {
this.texture.baseTexture.addEventListener('loaded', function() {
scope.onLoaded();
});
}
@ -111,4 +111,4 @@ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHei
{
this.onLoaded();
}
};
};

22
src/pixi/loaders/JsonLoader.js
View file

@ -4,8 +4,8 @@
/**
* The json file loader is used to load in JSON data and parsing it
* When loaded this class will dispatch a "loaded" event
* If load failed this class will dispatch a "error" event
* When loaded this class will dispatch a 'loaded' event
* If load failed this class will dispatch a 'error' event
*
* @class JsonLoader
* @uses EventTarget
@ -39,7 +39,7 @@ PIXI.JsonLoader = function (url, crossorigin) {
* @type String
* @readOnly
*/
this.baseUrl = url.replace(/[^\/]*$/, "");
this.baseUrl = url.replace(/[^\/]*$/, '');
/**
* [read-only] Whether the data has loaded yet
@ -61,14 +61,14 @@ PIXI.JsonLoader.prototype.constructor = PIXI.JsonLoader;
* @method load
*/
PIXI.JsonLoader.prototype.load = function () {
this.ajaxRequest = new AjaxRequest();
this.ajaxRequest = new PIXI.AjaxRequest();
var scope = this;
this.ajaxRequest.onreadystatechange = function () {
scope.onJSONLoaded();
};
this.ajaxRequest.open("GET", this.url, true);
if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json");
this.ajaxRequest.open('GET', this.url, true);
if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json');
this.ajaxRequest.send(null);
};
@ -79,8 +79,8 @@ PIXI.JsonLoader.prototype.load = function () {
* @private
*/
PIXI.JsonLoader.prototype.onJSONLoaded = function () {
if (this.ajaxRequest.readyState == 4) {
if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) {
if (this.ajaxRequest.readyState === 4) {
if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) {
this.json = JSON.parse(this.ajaxRequest.responseText);
if(this.json.frames)
@ -92,7 +92,7 @@ PIXI.JsonLoader.prototype.onJSONLoaded = function () {
var frameData = this.json.frames;
this.texture = image.texture.baseTexture;
image.addEventListener("loaded", function (event) {
image.addEventListener('loaded', function () {
scope.onLoaded();
});
@ -146,7 +146,7 @@ PIXI.JsonLoader.prototype.onJSONLoaded = function () {
PIXI.JsonLoader.prototype.onLoaded = function () {
this.loaded = true;
this.dispatchEvent({
type: "loaded",
type: 'loaded',
content: this
});
};
@ -159,7 +159,7 @@ PIXI.JsonLoader.prototype.onLoaded = function () {
*/
PIXI.JsonLoader.prototype.onError = function () {
this.dispatchEvent({
type: "error",
type: 'error',
content: this
});
};

4
src/pixi/loaders/SpineLoader.js
View file

@ -49,7 +49,7 @@ PIXI.SpineLoader = function(url, crossorigin)
* @readOnly
*/
this.loaded = false;
}
};
PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader;
@ -75,7 +75,7 @@ PIXI.SpineLoader.prototype.load = function () {
* @method onJSONLoaded
* @private
*/
PIXI.SpineLoader.prototype.onJSONLoaded = function (event) {
PIXI.SpineLoader.prototype.onJSONLoaded = function () {
var spineJsonParser = new spine.SkeletonJson();
var skeletonData = spineJsonParser.readSkeletonData(this.json);

18
src/pixi/loaders/SpriteSheetLoader.js
View file

@ -4,12 +4,12 @@
/**
* The sprite sheet loader is used to load in JSON sprite sheet data
* To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format
* To generate the data you can use http://www.codeandweb.com/texturepacker and publish the 'JSON' format
* There is a free version so thats nice, although the paid version is great value for money.
* It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed.
* It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.
* Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
* This loader will also load the image file that the Spritesheet points to as well as the data.
* When loaded this class will dispatch a "loaded" event
* When loaded this class will dispatch a 'loaded' event
*
* @class SpriteSheetLoader
* @uses EventTarget
@ -17,12 +17,11 @@
* @param url {String} The url of the sprite sheet JSON file
* @param crossorigin {Boolean} Whether requests should be treated as crossorigin
*/
PIXI.SpriteSheetLoader = function (url, crossorigin) {
/*
* i use texture packer to load the assets..
* http://www.codeandweb.com/texturepacker
* make sure to set the format as "JSON"
* make sure to set the format as 'JSON'
*/
PIXI.EventTarget.call(this);
@ -49,7 +48,7 @@ PIXI.SpriteSheetLoader = function (url, crossorigin) {
* @type String
* @readOnly
*/
this.baseUrl = url.replace(/[^\/]*$/, "");
this.baseUrl = url.replace(/[^\/]*$/, '');
/**
* The texture being loaded
@ -79,7 +78,7 @@ PIXI.SpriteSheetLoader.prototype.constructor = PIXI.SpriteSheetLoader;
PIXI.SpriteSheetLoader.prototype.load = function () {
var scope = this;
var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin);
jsonLoader.addEventListener("loaded", function (event) {
jsonLoader.addEventListener('loaded', function (event) {
scope.json = event.content.json;
scope.onJSONLoaded();
});
@ -99,7 +98,7 @@ PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function () {
var frameData = this.json.frames;
this.texture = image.texture.baseTexture;
image.addEventListener("loaded", function (event) {
image.addEventListener('loaded', function () {
scope.onLoaded();
});
@ -123,6 +122,7 @@ PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function () {
image.load();
};
/**
* Invoke when all files are loaded (json and texture)
*
@ -131,7 +131,7 @@ PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function () {
*/
PIXI.SpriteSheetLoader.prototype.onLoaded = function () {
this.dispatchEvent({
type: "loaded",
type: 'loaded',
content: this
});
};

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

@ -59,7 +59,7 @@ PIXI.Graphics = function()
* @private
*/
this.currentPath = {points:[]};
}
};
// constructor
PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
@ -85,7 +85,7 @@ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY};
this.graphicsData.push(this.currentPath);
}
};
/**
* Moves the current drawing position to (x, y).
@ -104,7 +104,7 @@ PIXI.Graphics.prototype.moveTo = function(x, y)
this.currentPath.points.push(x, y);
this.graphicsData.push(this.currentPath);
}
};
/**
* Draws a line using the current line style from the current drawing position to (x, y);
@ -118,7 +118,7 @@ PIXI.Graphics.prototype.lineTo = function(x, y)
{
this.currentPath.points.push(x, y);
this.dirty = true;
}
};
/**
* Specifies a simple one-color fill that subsequent calls to other Graphics methods
@ -133,7 +133,7 @@ PIXI.Graphics.prototype.beginFill = function(color, alpha)
this.filling = true;
this.fillColor = color || 0;
this.fillAlpha = (arguments.length < 2) ? 1 : alpha;
}
};
/**
* Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
@ -145,7 +145,7 @@ PIXI.Graphics.prototype.endFill = function()
this.filling = false;
this.fillColor = null;
this.fillAlpha = 1;
}
};
/**
* @method drawRect
@ -165,7 +165,7 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
this.graphicsData.push(this.currentPath);
this.dirty = true;
}
};
/**
* Draws a circle.
@ -185,7 +185,7 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
this.graphicsData.push(this.currentPath);
this.dirty = true;
}
};
/**
* Draws an elipse.
@ -206,7 +206,7 @@ PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
this.graphicsData.push(this.currentPath);
this.dirty = true;
}
};
/**
* Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
@ -222,8 +222,8 @@ PIXI.Graphics.prototype.clear = function()
this.clearDirty = true;
this.graphicsData = [];
this.bounds = null//new PIXI.Rectangle();
}
this.bounds = null; //new PIXI.Rectangle();
};
PIXI.Graphics.prototype.updateFilterBounds = function()
@ -239,8 +239,6 @@ PIXI.Graphics.prototype.updateFilterBounds = function()
var points, x, y;
for (var i = 0; i < this.graphicsData.length; i++) {
var data = this.graphicsData[i];
var type = data.type;
var lineWidth = data.lineWidth;
@ -265,7 +263,7 @@ PIXI.Graphics.prototype.updateFilterBounds = function()
x = points.x;
y = points.y;
var radius = points.radius + lineWidth/2;
minX = x - radius < minX ? x - radius : minX;
maxX = x + radius > maxX ? x + radius : maxX;
@ -275,9 +273,9 @@ PIXI.Graphics.prototype.updateFilterBounds = function()
else
{
// POLY
for (var j = 0; j < points.length; j+=2)
for (var j = 0; j < points.length; j+=2)
{
x = points[j];
y = points[j+1];
@ -286,17 +284,14 @@ PIXI.Graphics.prototype.updateFilterBounds = function()
minY = y-lineWidth < minY ? y-lineWidth : minY;
maxY = y+lineWidth > maxY ? y+lineWidth : maxY;
};
}
}
};
}
this.bounds = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY);
}
// console.log(this.bounds);
}
};
// SOME TYPES:
PIXI.Graphics.POLY = 0;

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

@ -11,7 +11,7 @@
PIXI.CanvasGraphics = function()
{
}
};
/*
@ -27,28 +27,28 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
{
var worldAlpha = graphics.worldAlpha;
for (var i=0; i < graphics.graphicsData.length; i++)
for (var i = 0; i < graphics.graphicsData.length; i++)
{
var data = graphics.graphicsData[i];
var points = data.points;
context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6);
context.strokeStyle = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6);
context.lineWidth = data.lineWidth;
if(data.type == PIXI.Graphics.POLY)
if(data.type === PIXI.Graphics.POLY)
{
context.beginPath();
context.moveTo(points[0], points[1]);
for (var j=1; j < points.length/2; j++)
for (var j = 1; j < points.length / 2; j++)
{
context.lineTo(points[j * 2], points[j * 2 + 1]);
}
// if the first and last point are the same close the path - much neater :)
if(points[0] == points[points.length-2] && points[1] == points[points.length-1])
if(points[0] === points[points.length-2] && points[1] === points[points.length-1])
{
context.closePath();
}
@ -56,7 +56,7 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
if(data.fill)
{
context.globalAlpha = data.fillAlpha * worldAlpha;
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
context.fill();
}
if(data.lineWidth)
@ -65,13 +65,13 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
context.stroke();
}
}
else if(data.type == PIXI.Graphics.RECT)
else if(data.type === PIXI.Graphics.RECT)
{
if(data.fillColor || data.fillColor === 0)
{
context.globalAlpha = data.fillAlpha * worldAlpha;
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
context.fillRect(points[0], points[1], points[2], points[3]);
}
@ -82,7 +82,7 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
}
}
else if(data.type == PIXI.Graphics.CIRC)
else if(data.type === PIXI.Graphics.CIRC)
{
// TODO - need to be Undefined!
context.beginPath();
@ -92,7 +92,7 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
if(data.fill)
{
context.globalAlpha = data.fillAlpha * worldAlpha;
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
context.fill();
}
if(data.lineWidth)
@ -101,7 +101,7 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
context.stroke();
}
}
else if(data.type == PIXI.Graphics.ELIP)
else if(data.type === PIXI.Graphics.ELIP)
{
// elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
@ -135,7 +135,7 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
if(data.fill)
{
context.globalAlpha = data.fillAlpha * worldAlpha;
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
context.fill();
}
if(data.lineWidth)
@ -146,7 +146,7 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
}
}
}
};
/*
* Renders a graphics mask
@ -159,53 +159,51 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
*/
PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context)
{
var worldAlpha = graphics.worldAlpha;
var len = graphics.graphicsData.length;
if(len === 0)return;
if(len === 0) return;
if(len > 1)
{
len = 1;
console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object")
window.console.log('Pixi.js warning: masks in canvas can only mask using the first path in the graphics object');
}
for (var i=0; i < 1; i++)
for (var i = 0; i < 1; i++)
{
var data = graphics.graphicsData[i];
var points = data.points;
if(data.type == PIXI.Graphics.POLY)
if(data.type === PIXI.Graphics.POLY)
{
context.beginPath();
context.moveTo(points[0], points[1]);
for (var j=1; j < points.length/2; j++)
for (var j = 1; j < points.length / 2; j++)
{
context.lineTo(points[j * 2], points[j * 2 + 1]);
}
// if the first and last point are the same close the path - much neater :)
if(points[0] == points[points.length-2] && points[1] == points[points.length-1])
if(points[0] === points[points.length-2] && points[1] === points[points.length-1])
{
context.closePath();
}
}
else if(data.type == PIXI.Graphics.RECT)
else if(data.type === PIXI.Graphics.RECT)
{
context.beginPath();
context.rect(points[0], points[1], points[2], points[3]);
context.closePath();
}
else if(data.type == PIXI.Graphics.CIRC)
else if(data.type === PIXI.Graphics.CIRC)
{
// TODO - need to be Undefined!
context.beginPath();
context.arc(points[0], points[1], points[2],0,2*Math.PI);
context.closePath();
}
else if(data.type == PIXI.Graphics.ELIP)
else if(data.type === PIXI.Graphics.ELIP)
{
// elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
@ -219,7 +217,7 @@ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context)
context.beginPath();
var kappa = .5522848,
var kappa = 0.5522848,
ox = (w / 2) * kappa, // control point offset horizontal
oy = (h / 2) * kappa, // control point offset vertical
xe = x + w, // x-end
@ -234,7 +232,5 @@ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context)
context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
context.closePath();
}
};
}
}
};

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

@ -2,7 +2,6 @@
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
/**
* the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL.
* Dont forget to add the view to your DOM or you will not see anything :)
@ -49,16 +48,16 @@ PIXI.CanvasRenderer = function(width, height, view, transparent)
* @property context
* @type Canvas 2d Context
*/
this.context = this.view.getContext("2d");
this.context = this.view.getContext('2d');
this.refresh = true;
// hack to enable some hardware acceleration!
//this.view.style["transform"] = "translatez(0)";
this.view.width = this.width;
this.view.height = this.height;
this.view.height = this.height;
this.count = 0;
}
};
// constructor
PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer;
@ -71,25 +70,25 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer;
*/
PIXI.CanvasRenderer.prototype.render = function(stage)
{
//stage.__childrenAdded = [];
//stage.__childrenRemoved = [];
// update textures if need be
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
PIXI.visibleCount++;
stage.updateTransform();
// update the background color
if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString;
this.context.setTransform(1,0,0,1,0,0);
this.context.clearRect(0, 0, this.width, this.height)
// update the background color
if(this.view.style.backgroundColor !== stage.backgroundColorString && !this.transparent)
this.view.style.backgroundColor = stage.backgroundColorString;
this.context.setTransform(1,0,0,1,0,0);
this.context.clearRect(0, 0, this.width, this.height);
this.renderDisplayObject(stage);
//as
// run interaction!
if(stage.interactive)
{
@ -100,15 +99,13 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
stage.interactionManager.setTarget(this);
}
}
// remove frame updates..
if(PIXI.Texture.frameUpdates.length > 0)
{
PIXI.Texture.frameUpdates = [];
}
}
};
/**
* resizes the canvas view to the specified width and height
@ -121,10 +118,10 @@ PIXI.CanvasRenderer.prototype.resize = function(width, height)
{
this.width = width;
this.height = height;
this.view.width = width;
this.view.height = height;
}
};
/**
* Renders a display object
@ -138,60 +135,59 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
// no loger recurrsive!
var transform;
var context = this.context;
context.globalCompositeOperation = 'source-over';
// one the display object hits this. we can break the loop
// one the display object hits this. we can break the loop
var testObject = displayObject.last._iNext;
displayObject = displayObject.first;
do
do
{
transform = displayObject.worldTransform;
if(!displayObject.visible)
{
displayObject = displayObject.last._iNext;
continue;
}
if(!displayObject.renderable)
{
displayObject = displayObject._iNext;
continue;
}
if(displayObject instanceof PIXI.Sprite)
{
var frame = displayObject.texture.frame;
var frame = displayObject.texture.frame;
//ignore null sources
if(frame && frame.width && frame.height && displayObject.texture.baseTexture.source)
{
context.globalAlpha = displayObject.worldAlpha;
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);
context.drawImage(displayObject.texture.baseTexture.source,
context.drawImage(displayObject.texture.baseTexture.source,
frame.x,
frame.y,
frame.width,
frame.height,
(displayObject.anchor.x) * -frame.width,
(displayObject.anchor.x) * -frame.width,
(displayObject.anchor.y) * -frame.height,
frame.width,
frame.height);
}
}
}
else if(displayObject instanceof PIXI.Strip)
{
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5])
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);
this.renderStrip(displayObject);
}
else if(displayObject instanceof PIXI.TilingSprite)
{
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5])
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);
this.renderTilingSprite(displayObject);
}
else if(displayObject instanceof PIXI.CustomRenderable)
@ -201,7 +197,7 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
}
else if(displayObject instanceof PIXI.Graphics)
{
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5])
context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);
PIXI.CanvasGraphics.renderGraphics(displayObject, context);
}
else if(displayObject instanceof PIXI.FilterBlock)
@ -213,19 +209,19 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
if(displayObject.open)
{
context.save();
var cacheAlpha = mask.alpha;
var maskTransform = mask.worldTransform;
context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5])
context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]);
mask.worldAlpha = 0.5;
context.worldAlpha = 0;
PIXI.CanvasGraphics.renderGraphicsMask(mask, context);
context.clip();
mask.worldAlpha = cacheAlpha;
}
else
@ -233,20 +229,19 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
context.restore();
}
}
/*
else
{
// only masks supported right now!
}
*/
}
// count++
displayObject = displayObject._iNext;
}
while(displayObject != testObject)
}
//count++
displayObject = displayObject._iNext;
}
while(displayObject !== testObject);
};
/**
* Renders a flat strip
@ -259,31 +254,28 @@ PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip)
{
var context = this.context;
var verticies = strip.verticies;
var uvs = strip.uvs;
var length = verticies.length/2;
this.count++;
context.beginPath();
for (var i=1; i < length-2; i++)
for (var i=1; i < length-2; i++)
{
// draw some triangles!
var index = i*2;
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4];
var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4];
var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
};
context.fillStyle = "#FF0000";
}
context.fillStyle = '#FF0000';
context.fill();
context.closePath();
}
};
/**
* Renders a tiling sprite
@ -295,28 +287,29 @@ PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip)
PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
{
var context = this.context;
context.globalAlpha = sprite.worldAlpha;
if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat");
if(!sprite.__tilePattern)
sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, 'repeat');
context.beginPath();
var tilePosition = sprite.tilePosition;
var tileScale = sprite.tileScale;
// offset
context.scale(tileScale.x,tileScale.y);
context.translate(tilePosition.x, tilePosition.y);
context.fillStyle = sprite.__tilePattern;
context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y);
context.scale(1/tileScale.x, 1/tileScale.y);
context.translate(-tilePosition.x, -tilePosition.y);
context.closePath();
}
};
/**
* Renders a strip
@ -332,21 +325,20 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
// draw triangles!!
var verticies = strip.verticies;
var uvs = strip.uvs;
var length = verticies.length/2;
this.count++;
for (var i=1; i < length-2; i++)
for (var i = 1; i < length-2; i++)
{
// draw some triangles!
var index = i*2;
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4];
var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width;
var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height;
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4];
var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width;
var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height;
context.save();
context.beginPath();
@ -354,28 +346,23 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.closePath();
context.clip();
// Compute matrix transform
var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2;
var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2;
var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2;
var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2;
var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2;
var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2;
var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2;
context.transform(delta_a/delta, delta_d/delta,
delta_b/delta, delta_e/delta,
delta_c/delta, delta_f/delta);
var deltaA = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2;
var deltaB = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2;
var deltaC = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2;
var deltaD = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2;
var deltaE = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2;
var deltaF = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2;
context.transform(deltaA / delta, deltaD / delta,
deltaB / delta, deltaE / delta,
deltaC / delta, deltaF / delta);
context.drawImage(strip.texture.baseTexture.source, 0, 0);
context.restore();
};
}
}
};

113
src/pixi/renderers/webgl/PixiShader.js
View file

@ -12,26 +12,25 @@ PIXI.PixiShader = function()
/**
* @property {any} program - The WebGL program.
*/
this.program;
this.program = null;
/**
* @property {array} fragmentSrc - The fragment shader.
*/
this.fragmentSrc = [
"precision lowp float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform sampler2D uSampler;",
"void main(void) {",
"gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;",
"}"
'precision lowp float;',
'varying vec2 vTextureCoord;',
'varying float vColor;',
'uniform sampler2D uSampler;',
'void main(void) {',
' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;',
'}'
];
/**
* @property {number} textureCount - A local texture counter for multi-texture shaders.
*/
this.textureCount = 0;
};
/**
@ -39,23 +38,23 @@ PIXI.PixiShader = function()
*/
PIXI.PixiShader.prototype.init = function()
{
var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc)
var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc);
var gl = PIXI.gl;
gl.useProgram(program);
// get and store the uniforms for the shader
this.uSampler = gl.getUniformLocation(program, "uSampler");
this.projectionVector = gl.getUniformLocation(program, "projectionVector");
this.offsetVector = gl.getUniformLocation(program, "offsetVector");
this.dimensions = gl.getUniformLocation(program, "dimensions");
this.uSampler = gl.getUniformLocation(program, 'uSampler');
this.projectionVector = gl.getUniformLocation(program, 'projectionVector');
this.offsetVector = gl.getUniformLocation(program, 'offsetVector');
this.dimensions = gl.getUniformLocation(program, 'dimensions');
// get and store the attributes
this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
this.colorAttribute = gl.getAttribLocation(program, "aColor");
this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord");
this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition');
this.colorAttribute = gl.getAttribLocation(program, 'aColor');
this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord');
// add those custom shaders!
for (var key in this.uniforms)
{
@ -64,7 +63,7 @@ PIXI.PixiShader.prototype.init = function()
}
this.initUniforms();
this.program = program;
};
@ -80,13 +79,14 @@ PIXI.PixiShader.prototype.initUniforms = function()
this.textureCount = 1;
var uniform;
for (var key in this.uniforms)
for (var key in this.uniforms)
{
var uniform = this.uniforms[key];
uniform = this.uniforms[key];
var type = uniform.type;
if (type == 'sampler2D')
if (type === 'sampler2D')
{
uniform._init = false;
@ -95,21 +95,21 @@ PIXI.PixiShader.prototype.initUniforms = function()
this.initSampler2D(uniform);
}
}
else if (type == 'mat2' || type == 'mat3' || type == 'mat4')
else if (type === 'mat2' || type === 'mat3' || type === 'mat4')
{
// These require special handling
uniform.glMatrix = true;
uniform.glValueLength = 1;
if (type == 'mat2')
if (type === 'mat2')
{
uniform.glFunc = PIXI.gl.uniformMatrix2fv;
}
else if (type == 'mat3')
else if (type === 'mat3')
{
uniform.glFunc = PIXI.gl.uniformMatrix3fv;
}
else if (type == 'mat4')
else if (type === 'mat4')
{
uniform.glFunc = PIXI.gl.uniformMatrix4fv;
}
@ -119,15 +119,15 @@ PIXI.PixiShader.prototype.initUniforms = function()
// GL function reference
uniform.glFunc = PIXI.gl['uniform' + type];
if (type == '2f' || type == '2i')
if (type === '2f' || type === '2i')
{
uniform.glValueLength = 2;
}
else if (type == '3f' || type == '3i')
else if (type === '3f' || type === '3i')
{
uniform.glValueLength = 3;
}
else if (type == '4f' || type == '4i')
else if (type === '4f' || type === '4i')
{
uniform.glValueLength = 4;
}
@ -137,7 +137,7 @@ PIXI.PixiShader.prototype.initUniforms = function()
}
}
}
};
/**
@ -224,12 +224,12 @@ PIXI.PixiShader.prototype.syncUniforms = function()
var uniform;
// This would probably be faster in an array and it would guarantee key order
for (var key in this.uniforms)
for (var key in this.uniforms)
{
uniform = this.uniforms[key];
if (uniform.glValueLength == 1)
if (uniform.glValueLength === 1)
{
if (uniform.glMatrix === true)
{
@ -240,19 +240,19 @@ PIXI.PixiShader.prototype.syncUniforms = function()
uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value);
}
}
else if (uniform.glValueLength == 2)
else if (uniform.glValueLength === 2)
{
uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y);
}
else if (uniform.glValueLength == 3)
else if (uniform.glValueLength === 3)
{
uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z);
}
else if (uniform.glValueLength == 4)
else if (uniform.glValueLength === 4)
{
uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z, uniform.value.w);
}
else if (uniform.type == 'sampler2D')
else if (uniform.type === 'sampler2D')
{
if (uniform._init)
{
@ -267,26 +267,25 @@ PIXI.PixiShader.prototype.syncUniforms = function()
}
}
}
};
PIXI.PixiShader.defaultVertexSrc = [
"attribute vec2 aVertexPosition;",
"attribute vec2 aTextureCoord;",
"attribute float aColor;",
'attribute vec2 aVertexPosition;',
'attribute vec2 aTextureCoord;',
'attribute float aColor;',
"uniform vec2 projectionVector;",
"uniform vec2 offsetVector;",
"varying vec2 vTextureCoord;",
'uniform vec2 projectionVector;',
'uniform vec2 offsetVector;',
'varying vec2 vTextureCoord;',
"varying float vColor;",
'varying float vColor;',
"const vec2 center = vec2(-1.0, 1.0);",
"void main(void) {",
"gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);",
"vTextureCoord = aTextureCoord;",
"vColor = aColor;",
"}"
'const vec2 center = vec2(-1.0, 1.0);',
'void main(void) {',
' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);',
' vTextureCoord = aTextureCoord;',
' vColor = aColor;',
'}'
];

83
src/pixi/renderers/webgl/PrimitiveShader.js
View file

@ -5,53 +5,54 @@
PIXI.PrimitiveShader = function()
{
// the webGL program..
this.program;
// the webGL program..
this.program = null;
this.fragmentSrc = [
"precision mediump float;",
"varying vec4 vColor;",
"void main(void) {",
"gl_FragColor = vColor;",
"}"
'precision mediump float;',
'varying vec4 vColor;',
'void main(void) {',
' gl_FragColor = vColor;',
'}'
];
this.vertexSrc = [
"attribute vec2 aVertexPosition;",
"attribute vec4 aColor;",
"uniform mat3 translationMatrix;",
"uniform vec2 projectionVector;",
"uniform vec2 offsetVector;",
"uniform float alpha;",
"varying vec4 vColor;",
"void main(void) {",
"vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);",
"v -= offsetVector.xyx;",
"gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);",
"vColor = aColor * alpha;",
"}"
'attribute vec2 aVertexPosition;',
'attribute vec4 aColor;',
'uniform mat3 translationMatrix;',
'uniform vec2 projectionVector;',
'uniform vec2 offsetVector;',
'uniform float alpha;',
'varying vec4 vColor;',
'void main(void) {',
' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);',
' v -= offsetVector.xyx;',
' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);',
' vColor = aColor * alpha;',
'}'
];
}
};
PIXI.PrimitiveShader.prototype.init = function()
{
var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc);
var gl = PIXI.gl;
gl.useProgram(program);
// get and store the uniforms for the shader
this.projectionVector = gl.getUniformLocation(program, "projectionVector");
this.offsetVector = gl.getUniformLocation(program, "offsetVector");
// get and store the attributes
this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
this.colorAttribute = gl.getAttribLocation(program, "aColor");
this.translationMatrix = gl.getUniformLocation(program, "translationMatrix");
this.alpha = gl.getUniformLocation(program, "alpha");
var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc);
this.program = program;
}
var gl = PIXI.gl;
gl.useProgram(program);
// get and store the uniforms for the shader
this.projectionVector = gl.getUniformLocation(program, 'projectionVector');
this.offsetVector = gl.getUniformLocation(program, 'offsetVector');
// get and store the attributes
this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition');
this.colorAttribute = gl.getAttribLocation(program, 'aColor');
this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix');
this.alpha = gl.getUniformLocation(program, 'alpha');
this.program = program;
};

98
src/pixi/renderers/webgl/StripShader.js
View file

@ -5,61 +5,63 @@
PIXI.StripShader = function()
{
// the webGL program..
this.program;
// the webGL program..
this.program = null;
this.fragmentSrc = [
"precision mediump float;",
"varying vec2 vTextureCoord;",
"varying float vColor;",
"uniform float alpha;",
"uniform sampler2D uSampler;",
"void main(void) {",
"gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));",
"gl_FragColor = gl_FragColor * alpha;",
"}"
'precision mediump float;',
'varying vec2 vTextureCoord;',
'varying float vColor;',
'uniform float alpha;',
'uniform sampler2D uSampler;',
'void main(void) {',
' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));',
' gl_FragColor = gl_FragColor * alpha;',
'}'
];
this.vertexSrc = [
"attribute vec2 aVertexPosition;",
"attribute vec2 aTextureCoord;",
"attribute float aColor;",
"uniform mat3 translationMatrix;",
"uniform vec2 projectionVector;",
"varying vec2 vTextureCoord;",
"varying vec2 offsetVector;",
"varying float vColor;",
"void main(void) {",
"vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);",
"v -= offsetVector.xyx;",
"gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);",
"vTextureCoord = aTextureCoord;",
"vColor = aColor;",
"}"
'attribute vec2 aVertexPosition;',
'attribute vec2 aTextureCoord;',
'attribute float aColor;',
'uniform mat3 translationMatrix;',
'uniform vec2 projectionVector;',
'varying vec2 vTextureCoord;',
'varying vec2 offsetVector;',
'varying float vColor;',
'void main(void) {',
' vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);',
' v -= offsetVector.xyx;',
' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);',
' vTextureCoord = aTextureCoord;',
' vColor = aColor;',
'}'
];
}
};
PIXI.StripShader.prototype.init = function()
{
var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc)
var gl = PIXI.gl;
var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc);
var gl = PIXI.gl;
gl.useProgram(program);
// get and store the uniforms for the shader
this.uSampler = gl.getUniformLocation(program, "uSampler");
this.projectionVector = gl.getUniformLocation(program, "projectionVector");
this.offsetVector = gl.getUniformLocation(program, "offsetVector");
this.colorAttribute = gl.getAttribLocation(program, "aColor");
//this.dimensions = gl.getUniformLocation(this.program, "dimensions");
// get and store the attributes
this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord");
this.translationMatrix = gl.getUniformLocation(program, "translationMatrix");
this.alpha = gl.getUniformLocation(program, "alpha");
this.program = program;
}
// get and store the uniforms for the shader
this.uSampler = gl.getUniformLocation(program, 'uSampler');
this.projectionVector = gl.getUniformLocation(program, 'projectionVector');
this.offsetVector = gl.getUniformLocation(program, 'offsetVector');
this.colorAttribute = gl.getAttribLocation(program, 'aColor');
//this.dimensions = gl.getUniformLocation(this.program, 'dimensions');
// get and store the attributes
this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition');
this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord');
this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix');
this.alpha = gl.getUniformLocation(program, 'alpha');
this.program = program;
};

120
src/pixi/renderers/webgl/WebGLBatch.js
View file

@ -9,7 +9,7 @@ PIXI._batchs = [];
*/
PIXI._getBatch = function(gl)
{
if(PIXI._batchs.length == 0)
if(PIXI._batchs.length === 0)
{
return new PIXI.WebGLBatch(gl);
}
@ -17,27 +17,27 @@ PIXI._getBatch = function(gl)
{
return PIXI._batchs.pop();
}
}
};
/**
* @private
*/
PIXI._returnBatch = function(batch)
{
batch.clean();
batch.clean();
PIXI._batchs.push(batch);
}
};
/**
* @private
*/
PIXI._restoreBatchs = function(gl)
{
for (var i=0; i < PIXI._batchs.length; i++)
for (var i=0; i < PIXI._batchs.length; i++)
{
PIXI._batchs[i].restoreLostContext(gl);
};
}
PIXI._batchs[i].restoreLostContext(gl);
}
};
/**
* A WebGLBatch Enables a group of sprites to be drawn using the same settings.
@ -54,7 +54,7 @@ PIXI._restoreBatchs = function(gl)
PIXI.WebGLBatch = function(gl)
{
this.gl = gl;
this.size = 0;
this.vertexBuffer = gl.createBuffer();
@ -63,7 +63,7 @@ PIXI.WebGLBatch = function(gl)
this.colorBuffer = gl.createBuffer();
this.blendMode = PIXI.blendModes.NORMAL;
this.dynamicSize = 1;
}
};
// constructor
PIXI.WebGLBatch.prototype.constructor = PIXI.WebGLBatch;
@ -83,9 +83,9 @@ PIXI.WebGLBatch.prototype.clean = function()
this.texture = null;
this.last = null;
this.size = 0;
this.head;
this.tail;
}
this.head = null;
this.tail = null;
};
/**
* Recreates the buffers in the event of a context loss
@ -100,7 +100,7 @@ PIXI.WebGLBatch.prototype.restoreLostContext = function(gl)
this.indexBuffer = gl.createBuffer();
this.uvBuffer = gl.createBuffer();
this.colorBuffer = gl.createBuffer();
}
};
/**
* inits the batch's texture and blend mode based if the supplied sprite
@ -108,7 +108,7 @@ PIXI.WebGLBatch.prototype.restoreLostContext = function(gl)
* @method init
* @param sprite {Sprite} the first sprite to be added to the batch. Only sprites with
* the same base texture and blend mode will be allowed to be added to this batch
*/
*/
PIXI.WebGLBatch.prototype.init = function(sprite)
{
sprite.batch = this;
@ -120,7 +120,7 @@ PIXI.WebGLBatch.prototype.init = function(sprite)
this.size = 1;
this.growBatch();
}
};
/**
* inserts a sprite before the specified sprite
@ -128,7 +128,7 @@ PIXI.WebGLBatch.prototype.init = function(sprite)
* @method insertBefore
* @param sprite {Sprite} the sprite to be added
* @param nextSprite {nextSprite} the first sprite will be inserted before this sprite
*/
*/
PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite)
{
this.size++;
@ -148,7 +148,7 @@ PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite)
{
this.head = sprite;
}
}
};
/**
* inserts a sprite after the specified sprite
@ -156,7 +156,7 @@ PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite)
* @method insertAfter
* @param sprite {Sprite} the sprite to be added
* @param previousSprite {Sprite} the first sprite will be inserted after this sprite
*/
*/
PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite)
{
this.size++;
@ -175,21 +175,21 @@ PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite)
}
else
{
this.tail = sprite
this.tail = sprite;
}
}
};
/**
* removes a sprite from the batch
*
* @method remove
* @param sprite {Sprite} the sprite to be removed
*/
*/
PIXI.WebGLBatch.prototype.remove = function(sprite)
{
this.size--;
if(this.size == 0)
if(this.size === 0)
{
sprite.batch = null;
sprite.__prev = null;
@ -214,14 +214,14 @@ PIXI.WebGLBatch.prototype.remove = function(sprite)
else
{
this.tail = sprite.__prev;
this.tail.__next = null
this.tail.__next = null;
}
sprite.batch = null;
sprite.__next = null;
sprite.__prev = null;
this.dirty = true;
}
};
/**
* Splits the batch into two with the specified sprite being the start of the new batch.
@ -262,13 +262,13 @@ PIXI.WebGLBatch.prototype.split = function(sprite)
this.size -= tempSize;
return batch;
}
};
/**
* Merges two batchs together
*
* @method merge
* @param batch {WebGLBatch} the batch that will be merged
* @param batch {WebGLBatch} the batch that will be merged
*/
PIXI.WebGLBatch.prototype.merge = function(batch)
{
@ -287,7 +287,7 @@ PIXI.WebGLBatch.prototype.merge = function(batch)
sprite.batch = this;
sprite = sprite.__next;
}
}
};
/**
* Grows the size of the batch. As the elements in the batch cannot have a dynamic size this
@ -299,14 +299,15 @@ PIXI.WebGLBatch.prototype.merge = function(batch)
PIXI.WebGLBatch.prototype.growBatch = function()
{
var gl = this.gl;
if( this.size == 1)
if( this.size === 1)
{
this.dynamicSize = 1;
}
else
{
this.dynamicSize = this.size * 1.5
this.dynamicSize = this.size * 1.5;
}
// grow verts
this.verticies = new Float32Array(this.dynamicSize * 8);
@ -325,10 +326,10 @@ PIXI.WebGLBatch.prototype.growBatch = function()
this.dirtyColors = true;
this.indices = new Uint16Array(this.dynamicSize * 6);
this.indices = new Uint16Array(this.dynamicSize * 6);
var length = this.indices.length/6;
for (var i=0; i < length; i++)
for (var i = 0; i < length; i++)
{
var index2 = i * 6;
var index3 = i * 4;
@ -338,11 +339,11 @@ PIXI.WebGLBatch.prototype.growBatch = function()
this.indices[index2 + 3] = index3 + 0;
this.indices[index2 + 4] = index3 + 2;
this.indices[index2 + 5] = index3 + 3;
};
}
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW);
}
};
/**
* Refresh's all the data in the batch and sync's it with the webGL buffers
@ -351,16 +352,13 @@ PIXI.WebGLBatch.prototype.growBatch = function()
*/
PIXI.WebGLBatch.prototype.refresh = function()
{
var gl = this.gl;
if (this.dynamicSize < this.size)
{
this.growBatch();
}
var indexRun = 0;
var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index;
var a, b, c, d, tx, ty;
var index, colorIndex;
var displayObject = this.head;
@ -381,7 +379,7 @@ PIXI.WebGLBatch.prototype.refresh = function()
this.uvs[index +3] = frame.y / th;
this.uvs[index +4] = (frame.x + frame.width) / tw;
this.uvs[index +5] = (frame.y + frame.height) / th;
this.uvs[index +5] = (frame.y + frame.height) / th;
this.uvs[index +6] = frame.x / tw;
this.uvs[index +7] = (frame.y + frame.height) / th;
@ -393,12 +391,12 @@ PIXI.WebGLBatch.prototype.refresh = function()
displayObject = displayObject.__next;
indexRun ++;
indexRun++;
}
this.dirtyUVS = true;
this.dirtyColors = true;
}
};
/**
* Updates all the relevant geometry and uploads the data to the GPU
@ -407,8 +405,7 @@ PIXI.WebGLBatch.prototype.refresh = function()
*/
PIXI.WebGLBatch.prototype.update = function()
{
var gl = this.gl;
var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, index2, index3
var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index;
var a, b, c, d, tx, ty;
@ -418,7 +415,7 @@ PIXI.WebGLBatch.prototype.update = function()
var verticies = this.verticies;
var uvs = this.uvs;
var colors = this.colors;
while(displayObject)
{
if(displayObject.vcount === PIXI.visibleCount)
@ -446,17 +443,17 @@ PIXI.WebGLBatch.prototype.update = function()
tx = worldTransform[2];
ty = worldTransform[5];
verticies[index + 0 ] = a * w1 + c * h1 + tx;
verticies[index + 0 ] = a * w1 + c * h1 + tx;
verticies[index + 1 ] = d * h1 + b * w1 + ty;
verticies[index + 2 ] = a * w0 + c * h1 + tx;
verticies[index + 3 ] = d * h1 + b * w0 + ty;
verticies[index + 2 ] = a * w0 + c * h1 + tx;
verticies[index + 3 ] = d * h1 + b * w0 + ty;
verticies[index + 4 ] = a * w0 + c * h0 + tx;
verticies[index + 5 ] = d * h0 + b * w0 + ty;
verticies[index + 4 ] = a * w0 + c * h0 + tx;
verticies[index + 5 ] = d * h0 + b * w0 + ty;
verticies[index + 6] = a * w1 + c * h0 + tx;
verticies[index + 7] = d * h0 + b * w1 + ty;
verticies[index + 6] = a * w1 + c * h0 + tx;
verticies[index + 7] = d * h0 + b * w1 + ty;
if(displayObject.updateFrame || displayObject.texture.updateFrame)
{
@ -475,7 +472,7 @@ PIXI.WebGLBatch.prototype.update = function()
uvs[index +3] = frame.y / th;
uvs[index +4] = (frame.x + frame.width) / tw;
uvs[index +5] = (frame.y + frame.height) / th;
uvs[index +5] = (frame.y + frame.height) / th;
uvs[index +6] = frame.x / tw;
uvs[index +7] = (frame.y + frame.height) / th;
@ -484,7 +481,7 @@ PIXI.WebGLBatch.prototype.update = function()
}
// TODO this probably could do with some optimisation....
if(displayObject.cacheAlpha != displayObject.worldAlpha)
if(displayObject.cacheAlpha !== displayObject.worldAlpha)
{
displayObject.cacheAlpha = displayObject.worldAlpha;
@ -502,8 +499,8 @@ PIXI.WebGLBatch.prototype.update = function()
indexRun++;
displayObject = displayObject.__next;
}
}
}
};
/**
* Draws the batch to the frame buffer
@ -514,15 +511,16 @@ PIXI.WebGLBatch.prototype.render = function(start, end)
{
start = start || 0;
if(end == undefined)end = this.size;
if(end === undefined)
end = this.size;
if(this.dirty)
{
this.refresh();
this.dirty = false;
}
if (this.size == 0)return;
if (this.size === 0)return;
this.update();
var gl = this.gl;
@ -530,13 +528,13 @@ PIXI.WebGLBatch.prototype.render = function(start, end)
//TODO optimize this!
var shaderProgram = PIXI.defaultShader;
//gl.useProgram(shaderProgram);
// update the verts..
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
// ok..
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies)
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies);
gl.vertexAttribPointer(shaderProgram.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
// update the uvs
//var isDefault = (shaderProgram == PIXI.shaderProgram)
@ -571,4 +569,4 @@ PIXI.WebGLBatch.prototype.render = function(start, end)
// DRAW THAT this!
gl.drawElements(gl.TRIANGLES, len * 6, gl.UNSIGNED_SHORT, start * 2 * 6 );
}
};

823
src/pixi/renderers/webgl/WebGLFilterManager.js
View file

@ -5,524 +5,507 @@
PIXI.WebGLFilterManager = function(transparent)
{
this.transparent = transparent;
this.filterStack = [];
this.texturePool = [];
this.offsetX = 0;
this.offsetY = 0;
this.initShaderBuffers();
}
this.transparent = transparent;
this.filterStack = [];
this.texturePool = [];
this.offsetX = 0;
this.offsetY = 0;
this.initShaderBuffers();
};
// API
PIXI.WebGLFilterManager.prototype.begin = function(projection, buffer)
{
this.width = projection.x * 2;
this.height = -projection.y * 2;
this.buffer = buffer;
}
this.width = projection.x * 2;
this.height = -projection.y * 2;
this.buffer = buffer;
};
PIXI.WebGLFilterManager.prototype.pushFilter = function(filterBlock)
{
var gl = PIXI.gl;
var gl = PIXI.gl;
// filter program
// OPTIMISATION - the first filter is free if its a simple color change?
this.filterStack.push(filterBlock);
// filter program
// OPTIMISATION - the first filter is free if its a simple color change?
this.filterStack.push(filterBlock);
var filter = filterBlock.filterPasses[0];
var filter = filterBlock.filterPasses[0];
this.offsetX += filterBlock.target.filterArea.x;
this.offsetY += filterBlock.target.filterArea.y;
this.offsetX += filterBlock.target.filterArea.x;
this.offsetY += filterBlock.target.filterArea.y;
var texture = this.texturePool.pop();
if(!texture)
{
texture = new PIXI.FilterTexture(this.width, this.height);
}
else
{
texture.resize(this.width, this.height);
}
var texture = this.texturePool.pop();
if(!texture)
{
texture = new PIXI.FilterTexture(this.width, this.height);
}
else
{
texture.resize(this.width, this.height);
}
gl.bindTexture(gl.TEXTURE_2D, texture.texture);
this.getBounds(filterBlock.target);
// addpadding?
//displayObject.filterArea.x
gl.bindTexture(gl.TEXTURE_2D, texture.texture);
var filterArea = filterBlock.target.filterArea;
this.getBounds(filterBlock.target);
var padidng = filter.padding;
filterArea.x -= padidng;
filterArea.y -= padidng;
filterArea.width += padidng * 2;
filterArea.height += padidng * 2;
// addpadding?
//displayObject.filterArea.x
// cap filter to screen size..
if(filterArea.x < 0)filterArea.x = 0;
if(filterArea.width > this.width)filterArea.width = this.width;
if(filterArea.y < 0)filterArea.y = 0;
if(filterArea.height > this.height)filterArea.height = this.height;
var filterArea = filterBlock.target.filterArea;
var padidng = filter.padding;
filterArea.x -= padidng;
filterArea.y -= padidng;
filterArea.width += padidng * 2;
filterArea.height += padidng * 2;
//gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer);
// console.log(filterArea)
// set view port
gl.viewport(0, 0, filterArea.width, filterArea.height);
PIXI.projection.x = filterArea.width/2;
PIXI.projection.y = -filterArea.height/2;
PIXI.offset.x = -filterArea.x;
PIXI.offset.y = -filterArea.y;
// cap filter to screen size..
if(filterArea.x < 0)filterArea.x = 0;
if(filterArea.width > this.width)filterArea.width = this.width;
if(filterArea.y < 0)filterArea.y = 0;
if(filterArea.height > this.height)filterArea.height = this.height;
//console.log(PIXI.defaultShader.projectionVector)
// update projection
gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2);
gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y);
//PIXI.primitiveProgram
//gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer);
gl.colorMask(true, true, true, true);
gl.clearColor(0,0,0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
//filter.texture = texture;
filterBlock._glFilterTexture = texture;
//console.log(filterArea)
// set view port
gl.viewport(0, 0, filterArea.width, filterArea.height);
//console.log("PUSH")
}
PIXI.projection.x = filterArea.width/2;
PIXI.projection.y = -filterArea.height/2;
PIXI.offset.x = -filterArea.x;
PIXI.offset.y = -filterArea.y;
//console.log(PIXI.defaultShader.projectionVector)
// update projection
gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2);
gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y);
//PIXI.primitiveProgram
gl.colorMask(true, true, true, true);
gl.clearColor(0,0,0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
//filter.texture = texture;
filterBlock._glFilterTexture = texture;
//console.log("PUSH")
};
PIXI.WebGLFilterManager.prototype.popFilter = function()
{
var gl = PIXI.gl;
var filterBlock = this.filterStack.pop();
var gl = PIXI.gl;
var filterBlock = this.filterStack.pop();
var filterArea = filterBlock.target.filterArea;
var texture = filterBlock._glFilterTexture;
if(filterBlock.filterPasses.length > 1)
{
gl.viewport(0, 0, filterArea.width, filterArea.height);
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
this.vertexArray[0] = 0;
this.vertexArray[1] = filterArea.height;
this.vertexArray[2] = filterArea.width;
this.vertexArray[3] = filterArea.height;
this.vertexArray[4] = 0;
this.vertexArray[5] = 0;
this.vertexArray[6] = filterArea.width;
this.vertexArray[7] = 0;
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray);
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
// nnow set the uvs..
this.uvArray[2] = filterArea.width/this.width;
this.uvArray[5] = filterArea.height/this.height;
this.uvArray[6] = filterArea.width/this.width;
this.uvArray[7] = filterArea.height/this.height;
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray);
var inputTexture = texture;
var outputTexture = this.texturePool.pop();
if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height);
// need to clear this FBO as it may have some left over elements from a prvious filter.
gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer );
gl.clear(gl.COLOR_BUFFER_BIT);
gl.disable(gl.BLEND);
for (var i = 0; i < filterBlock.filterPasses.length-1; i++)
{
var filterPass = filterBlock.filterPasses[i];
gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer );
// set texture
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture);
// draw texture..
//filterPass.applyFilterPass(filterArea.width, filterArea.height);
this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height);
// swap the textures..
var temp = inputTexture;
inputTexture = outputTexture;
outputTexture = temp;
}
gl.enable(gl.BLEND);
texture = inputTexture;
this.texturePool.push(outputTexture);
}
var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1];
this.offsetX -= filterArea.x;
this.offsetY -= filterArea.y;
var sizeX = this.width;
var sizeY = this.height;
var offsetX = 0;
var offsetY = 0;
var buffer = this.buffer;
// time to render the filters texture to the previous scene
if(this.filterStack.length === 0)
{
gl.colorMask(true, true, true, this.transparent);
}
else
{
var currentFilter = this.filterStack[this.filterStack.length-1];
filterArea = currentFilter.target.filterArea;
sizeX = filterArea.width;
sizeY = filterArea.height;
offsetX = filterArea.x;
offsetY = filterArea.y;
buffer = currentFilter._glFilterTexture.frameBuffer;
}
var filterArea = filterBlock.target.filterArea;
// TODO need toremove thease global elements..
PIXI.projection.x = sizeX/2;
PIXI.projection.y = -sizeY/2;
var texture = filterBlock._glFilterTexture;
PIXI.offset.x = offsetX;
PIXI.offset.y = offsetY;
if(filterBlock.filterPasses.length > 1)
{
gl.viewport(0, 0, filterArea.width, filterArea.height);
filterArea = filterBlock.target.filterArea;
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
this.vertexArray[0] = 0;
this.vertexArray[1] = filterArea.height;
this.vertexArray[2] = filterArea.width;
this.vertexArray[3] = filterArea.height;
this.vertexArray[4] = 0;
this.vertexArray[5] = 0;
this.vertexArray[6] = filterArea.width;
this.vertexArray[7] = 0;
var x = filterArea.x-offsetX;
var y = filterArea.y-offsetY;
// update the buffers..
// make sure to flip the y!
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray);
this.vertexArray[0] = x;
this.vertexArray[1] = y + filterArea.height;
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
// nnow set the uvs..
this.uvArray[2] = filterArea.width/this.width;
this.uvArray[5] = filterArea.height/this.height;
this.uvArray[6] = filterArea.width/this.width;
this.uvArray[7] = filterArea.height/this.height;
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray);
this.vertexArray[2] = x + filterArea.width;
this.vertexArray[3] = y + filterArea.height;
var inputTexture = texture;
var outputTexture = this.texturePool.pop();
if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height);
// need to clear this FBO as it may have some left over elements from a prvious filter.
gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer );
gl.clear(gl.COLOR_BUFFER_BIT);
gl.disable(gl.BLEND);
for (var i = 0; i < filterBlock.filterPasses.length-1; i++)
{
var filterPass = filterBlock.filterPasses[i];
gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer );
// set texture
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture);
// draw texture..
//filterPass.applyFilterPass(filterArea.width, filterArea.height);
this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height);
this.vertexArray[4] = x;
this.vertexArray[5] = y;
// swap the textures..
var temp = inputTexture;
inputTexture = outputTexture;
outputTexture = temp;
};
this.vertexArray[6] = x + filterArea.width;
this.vertexArray[7] = y;
gl.enable(gl.BLEND);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray);
texture = inputTexture;
this.texturePool.push(outputTexture);
}
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1];
this.offsetX -= filterArea.x;
this.offsetY -= filterArea.y;
this.uvArray[2] = filterArea.width/this.width;
this.uvArray[5] = filterArea.height/this.height;
this.uvArray[6] = filterArea.width/this.width;
this.uvArray[7] = filterArea.height/this.height;
var sizeX = this.width;
var sizeY = this.height;
var offsetX = 0;
var offsetY = 0;
var buffer = this.buffer;
// time to render the filters texture to the previous scene
if(this.filterStack.length === 0)
{
gl.colorMask(true, true, true, this.transparent);
}
else
{
var currentFilter = this.filterStack[this.filterStack.length-1];
var filterArea = currentFilter.target.filterArea;
sizeX = filterArea.width;
sizeY = filterArea.height;
offsetX = filterArea.x;
offsetY = filterArea.y;
buffer = currentFilter._glFilterTexture.frameBuffer;
}
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray);
// TODO need toremove thease global elements..
PIXI.projection.x = sizeX/2;
PIXI.projection.y = -sizeY/2;
gl.viewport(0, 0, sizeX, sizeY);
// bind the buffer
gl.bindFramebuffer(gl.FRAMEBUFFER, buffer );
PIXI.offset.x = offsetX;
PIXI.offset.y = offsetY;
var filterArea = filterBlock.target.filterArea;
var x = filterArea.x-offsetX;
var y = filterArea.y-offsetY;
// update the buffers..
// make sure to flip the y!
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
this.vertexArray[0] = x;
this.vertexArray[1] = y + filterArea.height;
this.vertexArray[2] = x + filterArea.width;
this.vertexArray[3] = y + filterArea.height;
this.vertexArray[4] = x;
this.vertexArray[5] = y;
this.vertexArray[6] = x + filterArea.width;
this.vertexArray[7] = y;
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray);
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
this.uvArray[2] = filterArea.width/this.width;
this.uvArray[5] = filterArea.height/this.height;
this.uvArray[6] = filterArea.width/this.width;
this.uvArray[7] = filterArea.height/this.height;
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray);
gl.viewport(0, 0, sizeX, sizeY);
// bind the buffer
gl.bindFramebuffer(gl.FRAMEBUFFER, buffer );
// set texture
// set texture
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture.texture);
// apply!
//filter.applyFilterPass(sizeX, sizeY);
this.applyFilterPass(filter, filterArea, sizeX, sizeY);
gl.bindTexture(gl.TEXTURE_2D, texture.texture);
// now restore the regular shader..
// apply!
//filter.applyFilterPass(sizeX, sizeY);
this.applyFilterPass(filter, filterArea, sizeX, sizeY);
// now restore the regular shader..
gl.useProgram(PIXI.defaultShader.program);
gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2);
gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY);
gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2);
gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY);
// return the texture to the pool
this.texturePool.push(texture);
filterBlock._glFilterTexture = null;
}
// return the texture to the pool
this.texturePool.push(texture);
filterBlock._glFilterTexture = null;
};
PIXI.WebGLFilterManager.prototype.applyFilterPass = function(filter, filterArea, width, height)
{
// use program
var gl = PIXI.gl;
// use program
var gl = PIXI.gl;
var shader = filter.shader;
if(!filter.shader)
{
var shader = new PIXI.PixiShader();
shader.fragmentSrc = filter.fragmentSrc;
shader.uniforms = filter.uniforms;
shader.init();
filter.shader = shader;
}
if(!shader)
{
shader = new PIXI.PixiShader();
var shader = filter.shader;
// set the shader
gl.useProgram(shader.program);
shader.fragmentSrc = filter.fragmentSrc;
shader.uniforms = filter.uniforms;
shader.init();
gl.uniform2f(shader.projectionVector, width/2, -height/2);
gl.uniform2f(shader.offsetVector, 0,0)
filter.shader = shader;
}
if(filter.uniforms.dimensions)
{
//console.log(filter.uniforms.dimensions)
filter.uniforms.dimensions.value[0] = this.width;//width;
filter.uniforms.dimensions.value[1] = this.height;//height;
filter.uniforms.dimensions.value[2] = this.vertexArray[0];
filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height;
// console.log(this.vertexArray[5])
}
// set the shader
gl.useProgram(shader.program);
shader.syncUniforms();
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
gl.uniform2f(shader.projectionVector, width/2, -height/2);
gl.uniform2f(shader.offsetVector, 0,0);
if(filter.uniforms.dimensions)
{
//console.log(filter.uniforms.dimensions)
filter.uniforms.dimensions.value[0] = this.width;//width;
filter.uniforms.dimensions.value[1] = this.height;//height;
filter.uniforms.dimensions.value[2] = this.vertexArray[0];
filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height;
// console.log(this.vertexArray[5])
}
shader.syncUniforms();
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
// draw the filter...
// draw the filter...
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 );
}
};
PIXI.WebGLFilterManager.prototype.initShaderBuffers = function()
{
var gl = PIXI.gl;
// create some buffers
this.vertexBuffer = gl.createBuffer();
this.uvBuffer = gl.createBuffer();
this.indexBuffer = gl.createBuffer();
// bind and upload the vertexs..
// keep a refferance to the vertexFloatData..
this.vertexArray = new Float32Array([0.0, 0.0,
1.0, 0.0,
0.0, 1.0,
1.0, 1.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
gl.bufferData(
gl.ARRAY_BUFFER,
this.vertexArray,
var gl = PIXI.gl;
// create some buffers
this.vertexBuffer = gl.createBuffer();
this.uvBuffer = gl.createBuffer();
this.indexBuffer = gl.createBuffer();
// bind and upload the vertexs..
// keep a refferance to the vertexFloatData..
this.vertexArray = new Float32Array([0.0, 0.0,
1.0, 0.0,
0.0, 1.0,
1.0, 1.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
gl.bufferData(
gl.ARRAY_BUFFER,
this.vertexArray,
gl.STATIC_DRAW);
// bind and upload the uv buffer
this.uvArray = new Float32Array([0.0, 0.0,
1.0, 0.0,
0.0, 1.0,
1.0, 1.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
gl.bufferData(
gl.ARRAY_BUFFER,
this.uvArray,
this.uvArray = new Float32Array([0.0, 0.0,
1.0, 0.0,
0.0, 1.0,
1.0, 1.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
gl.bufferData(
gl.ARRAY_BUFFER,
this.uvArray,
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]),
// 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);
}
};
PIXI.WebGLFilterManager.prototype.getBounds = function(displayObject)
{
// time to get the width and height of the object!
var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, doTest;
var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4;
// time to get the width and height of the object!
var worldTransform, width, height, aX, aY, w0, w1, h0, h1, doTest;
var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4;
var tempObject = displayObject.first;
var testObject = displayObject.last._iNext;
var maxX = -Infinity;
var maxY = -Infinity;
var minX = Infinity;
var minY = Infinity;
do
{
// TODO can be optimized! - what if there is no scale / rotation?
if(tempObject.visible)
{
if(tempObject instanceof PIXI.Sprite)
{
width = tempObject.texture.frame.width;
height = tempObject.texture.frame.height;
var tempObject = displayObject.first;
var testObject = displayObject.last._iNext;
// TODO trim??
aX = tempObject.anchor.x;
aY = tempObject.anchor.y;
w0 = width * (1-aX);
w1 = width * -aX;
var maxX = -Infinity;
var maxY = -Infinity;
h0 = height * (1-aY);
h1 = height * -aY;
var minX = Infinity;
var minY = Infinity;
doTest = true;
}
else if(tempObject instanceof PIXI.Graphics)
{
tempObject.updateFilterBounds();
do
{
// TODO can be optimized! - what if there is no scale / rotation?
var bounds = tempObject.bounds;
if(tempObject.visible)
{
if(tempObject instanceof PIXI.Sprite)
{
width = tempObject.texture.frame.width;
height = tempObject.texture.frame.height;
width = bounds.width;
height = bounds.height;
// TODO trim??
aX = tempObject.anchor.x;
aY = tempObject.anchor.y;
w0 = width * (1-aX);
w1 = width * -aX;
w0 = bounds.x
w1 = bounds.x + bounds.width;
h0 = height * (1-aY);
h1 = height * -aY;
h0 = bounds.y
h1 = bounds.y + bounds.height;
doTest = true;
}
else if(tempObject instanceof PIXI.Graphics)
{
tempObject.updateFilterBounds();
doTest = true;
}
}
if(doTest)
{
worldTransform = tempObject.worldTransform;
var bounds = tempObject.bounds;
a = worldTransform[0];
b = worldTransform[3];
c = worldTransform[1];
d = worldTransform[4];
tx = worldTransform[2];
ty = worldTransform[5];
width = bounds.width;
height = bounds.height;
x1 = a * w1 + c * h1 + tx;
y1 = d * h1 + b * w1 + ty;
w0 = bounds.x;
w1 = bounds.x + bounds.width;
x2 = a * w0 + c * h1 + tx;
y2 = d * h1 + b * w0 + ty;
h0 = bounds.y;
h1 = bounds.y + bounds.height;
x3 = a * w0 + c * h0 + tx;
y3 = d * h0 + b * w0 + ty;
doTest = true;
}
}
x4 = a * w1 + c * h0 + tx;
y4 = d * h0 + b * w1 + ty;
if(doTest)
{
worldTransform = tempObject.worldTransform;
minX = x1 < minX ? x1 : minX;
minX = x2 < minX ? x2 : minX;
minX = x3 < minX ? x3 : minX;
minX = x4 < minX ? x4 : minX;
minY = y1 < minY ? y1 : minY;
minY = y2 < minY ? y2 : minY;
minY = y3 < minY ? y3 : minY;
minY = y4 < minY ? y4 : minY;
maxX = x1 > maxX ? x1 : maxX;
maxX = x2 > maxX ? x2 : maxX;
maxX = x3 > maxX ? x3 : maxX;
maxX = x4 > maxX ? x4 : maxX;
maxY = y1 > maxY ? y1 : maxY;
maxY = y2 > maxY ? y2 : maxY;
maxY = y3 > maxY ? y3 : maxY;
maxY = y4 > maxY ? y4 : maxY;
}
a = worldTransform[0];
b = worldTransform[3];
c = worldTransform[1];
d = worldTransform[4];
tx = worldTransform[2];
ty = worldTransform[5];
doTest = false;
tempObject = tempObject._iNext;
x1 = a * w1 + c * h1 + tx;
y1 = d * h1 + b * w1 + ty;
}
while(tempObject != testObject)
// maximum bounds is the size of the screen..
//minX = minX > 0 ? minX : 0;
//minY = minY > 0 ? minY : 0;
x2 = a * w0 + c * h1 + tx;
y2 = d * h1 + b * w0 + ty;
displayObject.filterArea.x = minX;
displayObject.filterArea.y = minY;
x3 = a * w0 + c * h0 + tx;
y3 = d * h0 + b * w0 + ty;
// console.log(maxX+ " : " + minX)
displayObject.filterArea.width = maxX - minX;
displayObject.filterArea.height = maxY - minY;
}
x4 = a * w1 + c * h0 + tx;
y4 = d * h0 + b * w1 + ty;
minX = x1 < minX ? x1 : minX;
minX = x2 < minX ? x2 : minX;
minX = x3 < minX ? x3 : minX;
minX = x4 < minX ? x4 : minX;
minY = y1 < minY ? y1 : minY;
minY = y2 < minY ? y2 : minY;
minY = y3 < minY ? y3 : minY;
minY = y4 < minY ? y4 : minY;
maxX = x1 > maxX ? x1 : maxX;
maxX = x2 > maxX ? x2 : maxX;
maxX = x3 > maxX ? x3 : maxX;
maxX = x4 > maxX ? x4 : maxX;
maxY = y1 > maxY ? y1 : maxY;
maxY = y2 > maxY ? y2 : maxY;
maxY = y3 > maxY ? y3 : maxY;
maxY = y4 > maxY ? y4 : maxY;
}
doTest = false;
tempObject = tempObject._iNext;
}
while(tempObject !== testObject);
// maximum bounds is the size of the screen..
//minX = minX > 0 ? minX : 0;
//minY = minY > 0 ? minY : 0;
displayObject.filterArea.x = minX;
displayObject.filterArea.y = minY;
// console.log(maxX+ " : " + minX)
displayObject.filterArea.width = maxX - minX;
displayObject.filterArea.height = maxY - minY;
};
PIXI.FilterTexture = function(width, height)
{
var gl = PIXI.gl;
var gl = PIXI.gl;
// next time to create a frame buffer and texture
this.frameBuffer = gl.createFramebuffer();
this.frameBuffer = gl.createFramebuffer();
this.texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, this.texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer );
gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer );
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0);
this.resize(width, height);
}
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer );
gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer );
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0);
this.resize(width, height);
};
PIXI.FilterTexture.prototype.resize = function(width, height)
{
if(this.width == width && this.height == height)return;
if(this.width === width && this.height === height) return;
this.width = width;
this.height = height;
this.width = width;
this.height = height;
var gl = PIXI.gl;
var gl = PIXI.gl;
gl.bindTexture(gl.TEXTURE_2D, this.texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
}
gl.bindTexture(gl.TEXTURE_2D, this.texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
};

326
src/pixi/renderers/webgl/WebGLGraphics.js
View file

@ -9,8 +9,8 @@
*/
PIXI.WebGLGraphics = function()
{
}
};
/**
* Renders the graphics object
@ -24,61 +24,60 @@ PIXI.WebGLGraphics = function()
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
{
var gl = PIXI.gl;
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0,
buffer:gl.createBuffer(),
indexBuffer:gl.createBuffer()};
if(graphics.dirty)
{
graphics.dirty = false;
if(graphics.clearDirty)
{
graphics.clearDirty = false;
graphics._webGL.lastIndex = 0;
graphics._webGL.points = [];
graphics._webGL.indices = [];
}
PIXI.WebGLGraphics.updateGraphics(graphics);
}
PIXI.activatePrimitiveShader();
// This could be speeded up fo sure!
var m = PIXI.mat3.clone(graphics.worldTransform);
PIXI.mat3.transpose(m);
// set the matrix transform for the
// set the matrix transform for the
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
gl.uniformMatrix3fv(PIXI.primitiveShader.translationMatrix, false, m);
gl.uniform2f(PIXI.primitiveShader.projectionVector, projection.x, -projection.y);
gl.uniform2f(PIXI.primitiveShader.offsetVector, -PIXI.offset.x, -PIXI.offset.y);
gl.uniform1f(PIXI.primitiveShader.alpha, graphics.worldAlpha);
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
gl.vertexAttribPointer(PIXI.primitiveShader.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0);
gl.vertexAttribPointer(PIXI.primitiveShader.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4);
// set the index buffer!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer);
gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 );
PIXI.deactivatePrimitiveShader();
// return to default shader...
// PIXI.activateShader(PIXI.defaultShader);
}
};
/**
* Updates the graphics object
@ -90,47 +89,47 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
*/
PIXI.WebGLGraphics.updateGraphics = function(graphics)
{
for (var i=graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++)
for (var i = graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++)
{
var data = graphics.graphicsData[i];
if(data.type == PIXI.Graphics.POLY)
if(data.type === PIXI.Graphics.POLY)
{
if(data.fill)
{
if(data.points.length>3)
PIXI.WebGLGraphics.buildPoly(data, graphics._webGL);
if(data.points.length>3)
PIXI.WebGLGraphics.buildPoly(data, graphics._webGL);
}
if(data.lineWidth > 0)
{
PIXI.WebGLGraphics.buildLine(data, graphics._webGL);
}
}
else if(data.type == PIXI.Graphics.RECT)
else if(data.type === PIXI.Graphics.RECT)
{
PIXI.WebGLGraphics.buildRectangle(data, graphics._webGL);
}
else if(data.type == PIXI.Graphics.CIRC || data.type == PIXI.Graphics.ELIP)
else if(data.type === PIXI.Graphics.CIRC || data.type === PIXI.Graphics.ELIP);
{
PIXI.WebGLGraphics.buildCircle(data, graphics._webGL);
}
};
}
graphics._webGL.lastIndex = graphics.graphicsData.length;
var gl = PIXI.gl;
graphics._webGL.glPoints = new Float32Array(graphics._webGL.points);
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW);
graphics._webGL.glIndicies = new Uint16Array(graphics._webGL.indices);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.glIndicies, gl.STATIC_DRAW);
}
};
/**
* Builds a rectangle to draw
@ -145,45 +144,45 @@ PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
{
// --- //
// need to convert points to a nice regular data
//
//
var rectData = graphicsData.points;
var x = rectData[0];
var y = rectData[1];
var width = rectData[2];
var height = rectData[3];
if(graphicsData.fill)
{
var color = HEXtoRGB(graphicsData.fillColor);
var color = PIXI.hex2rgb(graphicsData.fillColor);
var alpha = graphicsData.fillAlpha;
var r = color[0] * alpha;
var g = color[1] * alpha;
var b = color[2] * alpha;
var verts = webGLData.points;
var indices = webGLData.indices;
var vertPos = verts.length/6;
// start
verts.push(x, y);
verts.push(r, g, b, alpha);
verts.push(x + width, y);
verts.push(r, g, b, alpha);
verts.push(x , y + height);
verts.push(r, g, b, alpha);
verts.push(x + width, y + height);
verts.push(r, g, b, alpha);
// insert 2 dead triangles..
indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3)
indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3);
}
if(graphicsData.lineWidth)
{
graphicsData.points = [x, y,
@ -191,11 +190,10 @@ PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
x + width, y + height,
x, y + height,
x, y];
PIXI.WebGLGraphics.buildLine(graphicsData, webGLData);
}
}
};
/**
* Builds a circle to draw
@ -210,60 +208,61 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
{
// --- //
// need to convert points to a nice regular data
//
//
var rectData = graphicsData.points;
var x = rectData[0];
var y = rectData[1];
var width = rectData[2];
var height = rectData[3];
var totalSegs = 40;
var seg = (Math.PI * 2) / totalSegs ;
var i = 0;
if(graphicsData.fill)
{
var color = HEXtoRGB(graphicsData.fillColor);
var color = PIXI.hex2rgb(graphicsData.fillColor);
var alpha = graphicsData.fillAlpha;
var r = color[0] * alpha;
var g = color[1] * alpha;
var b = color[2] * alpha;
var verts = webGLData.points;
var indices = webGLData.indices;
var vecPos = verts.length/6;
indices.push(vecPos);
for (var i=0; i < totalSegs + 1 ; i++)
for (i = 0; i < totalSegs + 1 ; i++)
{
verts.push(x,y, r, g, b, alpha);
verts.push(x + Math.sin(seg * i) * width,
y + Math.cos(seg * i) * height,
r, g, b, alpha);
indices.push(vecPos++, vecPos++);
};
}
indices.push(vecPos-1);
}
if(graphicsData.lineWidth)
{
graphicsData.points = [];
for (var i=0; i < totalSegs + 1; i++)
for (i = 0; i < totalSegs + 1; i++)
{
graphicsData.points.push(x + Math.sin(seg * i) * width,
y + Math.cos(seg * i) * height)
};
y + Math.cos(seg * i) * height);
}
PIXI.WebGLGraphics.buildLine(graphicsData, webGLData);
}
}
};
/**
* Builds a line to draw
@ -277,97 +276,96 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
{
// TODO OPTIMISE!
var wrap = true;
var i = 0;
var points = graphicsData.points;
if(points.length == 0)return;
if(points.length === 0)return;
// if the line width is an odd number add 0.5 to align to a whole pixel
if(graphicsData.lineWidth%2)
{
for (var i = 0; i < points.length; i++) {
for (i = 0; i < points.length; i++) {
points[i] += 0.5;
};
}
}
// get first and last point.. figure out the middle!
var firstPoint = new PIXI.Point( points[0], points[1] );
var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] );
// if the first point is the last point - goona have issues :)
if(firstPoint.x == lastPoint.x && firstPoint.y == lastPoint.y)
if(firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y)
{
points.pop();
points.pop();
lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] );
var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5;
var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5;
points.unshift(midPointX, midPointY);
points.push(midPointX, midPointY)
points.push(midPointX, midPointY);
}
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length / 2;
var indexCount = points.length;
var indexStart = verts.length/6;
// DRAW the Line
var width = graphicsData.lineWidth / 2;
// sort color
var color = HEXtoRGB(graphicsData.lineColor);
var color = PIXI.hex2rgb(graphicsData.lineColor);
var alpha = graphicsData.lineAlpha;
var r = color[0] * alpha;
var g = color[1] * alpha;
var b = color[2] * alpha;
var p1x, p1y, p2x, p2y, p3x, p3y;
var px, py, p1x, p1y, p2x, p2y, p3x, p3y;
var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
var ipx, ipy;
var a1, b1, c1, a2, b2, c2;
var denom, pdist, dist;
p1x = points[0];
p1y = points[1];
p2x = points[2];
p2y = points[3];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
// start
verts.push(p1x - perpx , p1y - perpy,
r, g, b, alpha);
verts.push(p1x + perpx , p1y + perpy,
r, g, b, alpha);
for (var i = 1; i < length-1; i++)
for (i = 1; i < length-1; i++)
{
p1x = points[(i-1)*2];
p1y = points[(i-1)*2 + 1];
p2x = points[(i)*2]
p2y = points[(i)*2 + 1]
p2x = points[(i)*2];
p2y = points[(i)*2 + 1];
p3x = points[(i+1)*2];
p3y = points[(i+1)*2 + 1];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
@ -376,62 +374,62 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
perp2x = -(p2y - p3y);
perp2y = p2x - p3x;
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
perp2x /= dist;
perp2y /= dist;
perp2x *= width;
perp2y *= width;
a1 = (-perpy + p1y) - (-perpy + p2y);
b1 = (-perpx + p2x) - (-perpx + p1x);
c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
a2 = (-perp2y + p3y) - (-perp2y + p2y);
b2 = (-perp2x + p2x) - (-perp2x + p3x);
c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
denom = a1*b2 - a2*b1;
if(Math.abs(denom) < 0.1 )
if(Math.abs(denom) < 0.1 )
{
denom+=10.1;
verts.push(p2x - perpx , p2y - perpy,
r, g, b, alpha);
verts.push(p2x + perpx , p2y + perpy,
r, g, b, alpha);
continue;
}
px = (b1*c2 - b2*c1)/denom;
py = (a2*c1 - a1*c2)/denom;
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
if(pdist > 140 * 140)
{
perp3x = perpx - perp2x;
perp3y = perpy - perp2y;
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
perp3x /= dist;
perp3y /= dist;
perp3x *= width;
perp3y *= width;
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
verts.push(p2x + perp3x, p2y +perp3y);
verts.push(r, g, b, alpha);
verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha);
indexCount++;
}
else
@ -439,42 +437,42 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
verts.push(px , py);
verts.push(r, g, b, alpha);
verts.push(p2x - (px-p2x), p2y - (py - p2y));
verts.push(r, g, b, alpha);
}
}
p1x = points[(length-2)*2]
p1y = points[(length-2)*2 + 1]
p2x = points[(length-1)*2]
p2y = points[(length-1)*2 + 1]
perpx = -(p1y - p2y)
p1x = points[(length-2)*2];
p1y = points[(length-2)*2 + 1];
p2x = points[(length-1)*2];
p2y = points[(length-1)*2 + 1];
perpx = -(p1y - p2y);
perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist;
perpy /= dist;
perpx *= width;
perpy *= width;
verts.push(p2x - perpx , p2y - perpy)
verts.push(p2x - perpx , p2y - perpy);
verts.push(r, g, b, alpha);
verts.push(p2x + perpx , p2y + perpy)
verts.push(p2x + perpx , p2y + perpy);
verts.push(r, g, b, alpha);
indices.push(indexStart);
for (var i=0; i < indexCount; i++)
for (i = 0; i < indexCount; i++)
{
indices.push(indexStart++);
};
}
indices.push(indexStart-1);
}
};
/**
* Builds a polygon to draw
@ -489,44 +487,38 @@ PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
{
var points = graphicsData.points;
if(points.length < 6)return;
// get first and last point.. figure out the middle!
var verts = webGLData.points;
var indices = webGLData.indices;
var length = points.length / 2;
// sort color
var color = HEXtoRGB(graphicsData.fillColor);
var color = PIXI.hex2rgb(graphicsData.fillColor);
var alpha = graphicsData.fillAlpha;
var r = color[0] * alpha;
var g = color[1] * alpha;
var b = color[2] * alpha;
var triangles = PIXI.PolyK.Triangulate(points);
var vertPos = verts.length / 6;
for (var i=0; i < triangles.length; i+=3)
var i = 0;
for (i = 0; i < triangles.length; i+=3)
{
indices.push(triangles[i] + vertPos);
indices.push(triangles[i] + vertPos);
indices.push(triangles[i+1] + vertPos);
indices.push(triangles[i+2] +vertPos);
indices.push(triangles[i+2] + vertPos);
};
for (var i = 0; i < length; i++)
}
for (i = 0; i < length; i++)
{
verts.push(points[i * 2], points[i * 2 + 1],
r, g, b, alpha);
};
}
function HEXtoRGB(hex) {
return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255];
}
}
};

412
src/pixi/renderers/webgl/WebGLRenderGroup.js
View file

@ -18,16 +18,16 @@
PIXI.WebGLRenderGroup = function(gl, transparent)
{
this.gl = gl;
this.root;
this.backgroundColor;
this.transparent = transparent == undefined ? true : transparent;
this.root = null;
this.backgroundColor = undefined;
this.transparent = transparent === undefined ? true : transparent;
this.batchs = [];
this.toRemove = [];
console.log(this.transparent)
//console.log(this.transparent);
this.filterManager = new PIXI.WebGLFilterManager(this.transparent);
}
};
// constructor
PIXI.WebGLRenderGroup.prototype.constructor = PIXI.WebGLRenderGroup;
@ -37,22 +37,22 @@ PIXI.WebGLRenderGroup.prototype.constructor = PIXI.WebGLRenderGroup;
*
* @method setRenderable
* @param displayObject {DisplayObject}
* @private
* @private
*/
PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
{
// has this changed??
if(this.root)this.removeDisplayObjectAndChildren(this.root);
displayObject.worldVisible = displayObject.visible;
// soooooo //
// to check if any batchs exist already??
// TODO what if its already has an object? should remove it
this.root = displayObject;
this.addDisplayObjectAndChildren(displayObject);
}
};
/**
* Renders the stage to its webgl view
@ -63,32 +63,31 @@ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject)
PIXI.WebGLRenderGroup.prototype.render = function(projection, buffer)
{
PIXI.WebGLRenderer.updateTextures();
var gl = this.gl;
gl.uniform2f(PIXI.defaultShader.projectionVector, projection.x, projection.y);
this.filterManager.begin(projection, buffer);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
// will render all the elements in the group
var renderable;
for (var i=0; i < this.batchs.length; i++)
for (var i=0; i < this.batchs.length; i++)
{
renderable = this.batchs[i];
if(renderable instanceof PIXI.WebGLBatch)
{
this.batchs[i].render();
continue;
}
// render special
this.renderSpecial(renderable, projection);
}
}
};
/**
* Renders a specific displayObject
@ -109,13 +108,16 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
// to do!
// render part of the scene...
var startIndex;
var startBatchIndex;
var endIndex;
var endBatchIndex;
var endBatch;
var head;
/*
* LOOK FOR THE NEXT SPRITE
* This part looks for the closest next sprite that can go into a batch
@ -130,25 +132,24 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
}
var startBatch = nextRenderable.batch;
//console.log(nextRenderable);
//console.log(renderable)
if(nextRenderable instanceof PIXI.Sprite)
{
startBatch = nextRenderable.batch;
var head = startBatch.head;
var next = head;
head = startBatch.head;
// ok now we have the batch.. need to find the start index!
if(head == nextRenderable)
if(head === nextRenderable)
{
startIndex = 0;
}
else
{
startIndex = 1;
while(head.__next != nextRenderable)
while(head.__next !== nextRenderable)
{
startIndex++;
head = head.__next;
@ -159,7 +160,7 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
{
startBatch = nextRenderable;
}
// Get the LAST renderable object
var lastRenderable = displayObject.last;
while(lastRenderable._iPrev)
@ -167,22 +168,22 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
if(lastRenderable.renderable && lastRenderable.__renderGroup)break;
lastRenderable = lastRenderable._iNext;
}
if(lastRenderable instanceof PIXI.Sprite)
{
endBatch = lastRenderable.batch;
var head = endBatch.head;
if(head == lastRenderable)
head = endBatch.head;
if(head === lastRenderable)
{
endIndex = 0;
}
else
{
endIndex = 1;
while(head.__next != lastRenderable)
while(head.__next !== lastRenderable)
{
endIndex++;
head = head.__next;
@ -193,11 +194,11 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
{
endBatch = lastRenderable;
}
//console.log(endBatch);
// TODO - need to fold this up a bit!
if(startBatch == endBatch)
if(startBatch === endBatch)
{
if(startBatch instanceof PIXI.WebGLBatch)
{
@ -209,11 +210,11 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
}
return;
}
// now we have first and last!
startBatchIndex = this.batchs.indexOf(startBatch);
endBatchIndex = this.batchs.indexOf(endBatch);
// DO the first batch
if(startBatch instanceof PIXI.WebGLBatch)
{
@ -223,12 +224,13 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
{
this.renderSpecial(startBatch, projection);
}
// DO the middle batchs..
for (var i=startBatchIndex+1; i < endBatchIndex; i++)
var renderable;
for (var i = startBatchIndex+1; i < endBatchIndex; i++)
{
renderable = this.batchs[i];
if(renderable instanceof PIXI.WebGLBatch)
{
this.batchs[i].render();
@ -238,7 +240,7 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
this.renderSpecial(renderable, projection);
}
}
// DO the last batch..
if(endBatch instanceof PIXI.WebGLBatch)
{
@ -248,7 +250,7 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
{
this.renderSpecial(endBatch, projection);
}
}
};
/**
* Renders a specific renderable
@ -260,8 +262,8 @@ PIXI.WebGLRenderGroup.prototype.renderSpecific = function(displayObject, project
*/
PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection)
{
var worldVisible = renderable.vcount === PIXI.visibleCount
var worldVisible = renderable.vcount === PIXI.visibleCount;
if(renderable instanceof PIXI.TilingSprite)
@ -284,9 +286,8 @@ PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection)
{
this.handleFilterBlock(renderable, projection);
}
}
};
flip = false;
var maskStack = [];
var maskPosition = 0;
@ -298,30 +299,30 @@ PIXI.WebGLRenderGroup.prototype.handleFilterBlock = function(filterBlock, projec
* for now only masks are supported..
*/
var gl = PIXI.gl;
if(filterBlock.open)
{
if(filterBlock.data instanceof Array)
{
this.filterManager.pushFilter(filterBlock);
// ok so..
}
else
{
{
maskPosition++;
maskStack.push(filterBlock)
maskStack.push(filterBlock);
gl.enable(gl.STENCIL_TEST);
gl.colorMask(false, false, false, false);
gl.stencilFunc(gl.ALWAYS,1,1);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR);
PIXI.WebGLGraphics.renderGraphics(filterBlock.data, projection);
gl.colorMask(true, true, true, true);
gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP);
@ -335,27 +336,26 @@ PIXI.WebGLRenderGroup.prototype.handleFilterBlock = function(filterBlock, projec
}
else
{
var maskData = maskStack.pop(filterBlock)
var maskData = maskStack.pop(filterBlock);
if(maskData)
{
gl.colorMask(false, false, false, false);
gl.stencilFunc(gl.ALWAYS,1,1);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR);
PIXI.WebGLGraphics.renderGraphics(maskData.data, projection);
gl.colorMask(true, true, true, true);
gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length);
gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP);
};
}
gl.disable(gl.STENCIL_TEST);
}
}
}
};
/**
* Updates a webgl texture
@ -366,23 +366,23 @@ PIXI.WebGLRenderGroup.prototype.handleFilterBlock = function(filterBlock, projec
*/
PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
{
// TODO definitely can optimse this function..
this.removeObject(displayObject);
/*
* LOOK FOR THE PREVIOUS RENDERABLE
* This part looks for the closest previous sprite that can go into a batch
* It keeps going back until it finds a sprite or the stage
*/
var previousRenderable = displayObject.first;
while(previousRenderable != this.root)
while(previousRenderable !== this.root)
{
previousRenderable = previousRenderable._iPrev;
if(previousRenderable.renderable && previousRenderable.__renderGroup)break;
}
/*
* LOOK FOR THE NEXT SPRITE
* This part looks for the closest next sprite that can go into a batch
@ -395,9 +395,9 @@ PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject)
nextRenderable = nextRenderable._iNext;
if(nextRenderable.renderable && nextRenderable.__renderGroup)break;
}
this.insertObject(displayObject, previousRenderable, nextRenderable);
}
};
/**
* Adds filter blocks
@ -417,13 +417,13 @@ PIXI.WebGLRenderGroup.prototype.addFilterBlocks = function(start, end)
* It keeps going back until it finds a sprite or the stage
*/
var previousRenderable = start;
while(previousRenderable != this.root.first)
while(previousRenderable !== this.root.first)
{
previousRenderable = previousRenderable._iPrev;
if(previousRenderable.renderable && previousRenderable.__renderGroup)break;
}
this.insertAfter(start, previousRenderable);
/*
* LOOK FOR THE NEXT SPRITE
* This part looks for the closest next sprite that can go into a batch
@ -431,13 +431,13 @@ PIXI.WebGLRenderGroup.prototype.addFilterBlocks = function(start, end)
* scene graph
*/
var previousRenderable2 = end;
while(previousRenderable2 != this.root.first)
while(previousRenderable2 !== this.root.first)
{
previousRenderable2 = previousRenderable2._iPrev;
if(previousRenderable2.renderable && previousRenderable2.__renderGroup)break;
}
this.insertAfter(end, previousRenderable2);
}
};
/**
* Remove filter blocks
@ -451,7 +451,7 @@ PIXI.WebGLRenderGroup.prototype.removeFilterBlocks = function(start, end)
{
this.removeObject(start);
this.removeObject(end);
}
};
/**
* Adds a display object and children to the webgl context
@ -463,20 +463,20 @@ PIXI.WebGLRenderGroup.prototype.removeFilterBlocks = function(start, end)
PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayObject)
{
if(displayObject.__renderGroup)displayObject.__renderGroup.removeDisplayObjectAndChildren(displayObject);
/*
* LOOK FOR THE PREVIOUS RENDERABLE
* This part looks for the closest previous sprite that can go into a batch
* It keeps going back until it finds a sprite or the stage
*/
var previousRenderable = displayObject.first;
while(previousRenderable != this.root.first)
while(previousRenderable !== this.root.first)
{
previousRenderable = previousRenderable._iPrev;
if(previousRenderable.renderable && previousRenderable.__renderGroup)break;
}
/*
* LOOK FOR THE NEXT SPRITE
* This part looks for the closest next sprite that can go into a batch
@ -489,26 +489,27 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayOb
nextRenderable = nextRenderable._iNext;
if(nextRenderable.renderable && nextRenderable.__renderGroup)break;
}
// one the display object hits this. we can break the loop
// one the display object hits this. we can break the loop
var tempObject = displayObject.first;
var testObject = displayObject.last._iNext;
do
do
{
tempObject.__renderGroup = this;
if(tempObject.renderable)
{
this.insertObject(tempObject, previousRenderable, nextRenderable);
previousRenderable = tempObject;
}
tempObject = tempObject._iNext;
}
while(tempObject != testObject)
}
while(tempObject !== testObject);
};
/**
* Removes a display object and children to the webgl context
@ -519,18 +520,16 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayOb
*/
PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displayObject)
{
if(displayObject.__renderGroup != this)return;
// var displayObject = displayObject.first;
var lastObject = displayObject.last;
do
if(displayObject.__renderGroup !== this) return;
do
{
displayObject.__renderGroup = null;
if(displayObject.renderable)this.removeObject(displayObject);
displayObject = displayObject._iNext;
}
while(displayObject)
}
while(displayObject);
};
/**
* Inserts a displayObject into the linked list
@ -546,22 +545,23 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
// while looping below THE OBJECT MAY NOT HAVE BEEN ADDED
var previousSprite = previousObject;
var nextSprite = nextObject;
var index, batch;
/*
* so now we have the next renderable and the previous renderable
*
*
*/
if(displayObject instanceof PIXI.Sprite)
{
var previousBatch
var nextBatch
var previousBatch;
var nextBatch;
if(previousSprite instanceof PIXI.Sprite)
{
previousBatch = previousSprite.batch;
if(previousBatch)
{
if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode)
if(previousBatch.texture === displayObject.texture.baseTexture && previousBatch.blendMode === displayObject.blendMode)
{
previousBatch.insertAfter(displayObject, previousSprite);
return;
@ -573,40 +573,40 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
// TODO reword!
previousBatch = previousSprite;
}
if(nextSprite)
{
if(nextSprite instanceof PIXI.Sprite)
{
nextBatch = nextSprite.batch;
//batch may not exist if item was added to the display list but not to the webGL
if(nextBatch)
{
if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode)
if(nextBatch.texture === displayObject.texture.baseTexture && nextBatch.blendMode === displayObject.blendMode)
{
nextBatch.insertBefore(displayObject, nextSprite);
return;
}
else
{
if(nextBatch == previousBatch)
if(nextBatch === previousBatch)
{
// THERE IS A SPLIT IN THIS BATCH! //
var splitBatch = previousBatch.split(nextSprite);
// COOL!
// add it back into the array
// add it back into the array
/*
* OOPS!
* seems the new sprite is in the middle of a batch
* lets split it..
* lets split it..
*/
var batch = PIXI.WebGLRenderer.getBatch();
batch = PIXI.WebGLRenderer.getBatch();
var index = this.batchs.indexOf( previousBatch );
index = this.batchs.indexOf( previousBatch );
batch.init(displayObject);
this.batchs.splice(index+1, 0, batch, splitBatch);
return;
}
}
@ -615,39 +615,39 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
else
{
// TODO re-word!
nextBatch = nextSprite;
}
}
/*
* looks like it does not belong to any batch!
* but is also not intersecting one..
* time to create anew one!
*/
var batch = PIXI.WebGLRenderer.getBatch();
batch = PIXI.WebGLRenderer.getBatch();
batch.init(displayObject);
if(previousBatch) // if this is invalid it means
if(previousBatch) // if this is invalid it means
{
var index = this.batchs.indexOf( previousBatch );
index = this.batchs.indexOf( previousBatch );
this.batchs.splice(index+1, 0, batch);
}
else
{
this.batchs.push(batch);
}
return;
}
else if(displayObject instanceof PIXI.TilingSprite)
{
// add to a batch!!
this.initTilingSprite(displayObject);
// this.batchs.push(displayObject);
}
else if(displayObject instanceof PIXI.Strip)
{
@ -655,20 +655,21 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
this.initStrip(displayObject);
// this.batchs.push(displayObject);
}
/*
else if(displayObject)// instanceof PIXI.Graphics)
{
//displayObject.initWebGL(this);
// add to a batch!!
//this.initStrip(displayObject);
//this.batchs.push(displayObject);
}
this.insertAfter(displayObject, previousSprite);
// insert and SPLIT!
*/
}
this.insertAfter(displayObject, previousSprite);
// insert and SPLIT!
};
/**
* Inserts a displayObject into the linked list
@ -680,36 +681,38 @@ PIXI.WebGLRenderGroup.prototype.insertObject = function(displayObject, previousO
*/
PIXI.WebGLRenderGroup.prototype.insertAfter = function(item, displayObject)
{
var index;
if(displayObject instanceof PIXI.Sprite)
{
var previousBatch = displayObject.batch;
if(previousBatch)
{
// so this object is in a batch!
// is it not? need to split the batch
if(previousBatch.tail == displayObject)
if(previousBatch.tail === displayObject)
{
// is it tail? insert in to batchs
var index = this.batchs.indexOf( previousBatch );
// is it tail? insert in to batchs
index = this.batchs.indexOf( previousBatch );
this.batchs.splice(index+1, 0, item);
}
else
{
// TODO MODIFY ADD / REMOVE CHILD TO ACCOUNT FOR FILTERS (also get prev and next) //
// THERE IS A SPLIT IN THIS BATCH! //
var splitBatch = previousBatch.split(displayObject.__next);
// COOL!
// add it back into the array
// add it back into the array
/*
* OOPS!
* seems the new sprite is in the middle of a batch
* lets split it..
* lets split it..
*/
var index = this.batchs.indexOf( previousBatch );
index = this.batchs.indexOf( previousBatch );
this.batchs.splice(index+1, 0, item, splitBatch);
}
}
@ -720,10 +723,10 @@ PIXI.WebGLRenderGroup.prototype.insertAfter = function(item, displayObject)
}
else
{
var index = this.batchs.indexOf( displayObject );
index = this.batchs.indexOf( displayObject );
this.batchs.splice(index+1, 0, item);
}
}
};
/**
* Removes a displayObject from the linked list
@ -736,26 +739,26 @@ PIXI.WebGLRenderGroup.prototype.removeObject = function(displayObject)
{
// loop through children..
// display object //
// add a child from the render group..
// remove it and all its children!
//displayObject.cacheVisible = false;//displayObject.visible;
/*
* removing is a lot quicker..
*
*
*/
var batchToRemove;
if(displayObject instanceof PIXI.Sprite)
{
// should always have a batch!
var batch = displayObject.batch;
if(!batch)return; // this means the display list has been altered befre rendering
batch.remove(displayObject);
if(batch.size==0)
if(batch.size === 0)
{
batchToRemove = batch;
}
@ -764,44 +767,44 @@ PIXI.WebGLRenderGroup.prototype.removeObject = function(displayObject)
{
batchToRemove = displayObject;
}
/*
* Looks like there is somthing that needs removing!
*/
if(batchToRemove)
if(batchToRemove)
{
var index = this.batchs.indexOf( batchToRemove );
if(index == -1)return;// this means it was added then removed before rendered
if(index === -1)return;// this means it was added then removed before rendered
// ok so.. check to see if you adjacent batchs should be joined.
// TODO may optimise?
if(index == 0 || index == this.batchs.length-1)
if(index === 0 || index === this.batchs.length-1)
{
// wha - eva! just get of the empty batch!
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove);
return;
}
if(this.batchs[index-1] instanceof PIXI.WebGLBatch && this.batchs[index+1] instanceof PIXI.WebGLBatch)
{
if(this.batchs[index-1].texture == this.batchs[index+1].texture && this.batchs[index-1].blendMode == this.batchs[index+1].blendMode)
if(this.batchs[index-1].texture === this.batchs[index+1].texture && this.batchs[index-1].blendMode === this.batchs[index+1].blendMode)
{
//console.log("MERGE")
this.batchs[index-1].merge(this.batchs[index+1]);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove);
PIXI.WebGLRenderer.returnBatch(this.batchs[index+1]);
this.batchs.splice(index, 2);
return;
}
}
this.batchs.splice(index, 1);
if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove);
}
}
};
/**
@ -816,26 +819,26 @@ PIXI.WebGLRenderGroup.prototype.initTilingSprite = function(sprite)
var gl = this.gl;
// make the texture tilable..
sprite.verticies = new Float32Array([0, 0,
sprite.width, 0,
sprite.width, sprite.height,
0, sprite.height]);
sprite.uvs = new Float32Array([0, 0,
1, 0,
1, 1,
0, 1]);
sprite.colors = new Float32Array([1,1,1,1]);
sprite.indices = new Uint16Array([0, 1, 3,2])//, 2]);
sprite.indices = new Uint16Array([0, 1, 3,2]); //, 2]);
sprite._vertexBuffer = gl.createBuffer();
sprite._indexBuffer = gl.createBuffer();
sprite._uvBuffer = gl.createBuffer();
sprite._colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, sprite._vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, sprite.verticies, gl.STATIC_DRAW);
@ -847,7 +850,7 @@ PIXI.WebGLRenderGroup.prototype.initTilingSprite = function(sprite)
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sprite._indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sprite.indices, gl.STATIC_DRAW);
// return ( (x > 0) && ((x & (x - 1)) == 0) );
if(sprite.texture.baseTexture._glTexture)
@ -861,7 +864,7 @@ PIXI.WebGLRenderGroup.prototype.initTilingSprite = function(sprite)
{
sprite.texture.baseTexture._powerOf2 = true;
}
}
};
/**
* Renders a Strip
@ -879,18 +882,16 @@ PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
var shader = PIXI.stripShader;
var program = shader.program;
var m = PIXI.mat3.clone(strip.worldTransform);
PIXI.mat3.transpose(m);
// console.log(projection)
// set the matrix transform for the
// set the matrix transform for the
gl.uniformMatrix3fv(shader.translationMatrix, false, m);
gl.uniform2f(shader.projectionVector, projection.x, projection.y);
gl.uniform2f(shader.offsetVector, -PIXI.offset.x, -PIXI.offset.y);
gl.uniform1f(shader.alpha, strip.worldAlpha);
/*
@ -903,24 +904,24 @@ PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR);
}
*/
//console.log("!!")
if(!strip.dirty)
{
{
gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies)
gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies);
gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
// update the uvs
gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer);
gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture);
gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer);
gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0);
// dont need to upload!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer);
}
@ -928,32 +929,32 @@ PIXI.WebGLRenderGroup.prototype.renderStrip = function(strip, projection)
{
strip.dirty = false;
gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW)
gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW);
gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
// update the uvs
gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW)
gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW);
gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture);
// console.log(strip.texture.baseTexture._glTexture)
gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW)
gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW);
gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0);
// dont need to upload!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW);
}
gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0);
PIXI.deactivateStripShader();
//gl.useProgram(PIXI.currentProgram);
}
};
/**
* Renders a TilingSprite
@ -967,35 +968,32 @@ PIXI.WebGLRenderGroup.prototype.renderTilingSprite = function(sprite, projection
{
var gl = this.gl;
var shaderProgram = PIXI.shaderProgram;
var tilePosition = sprite.tilePosition;
var tileScale = sprite.tileScale;
var offsetX = tilePosition.x/sprite.texture.baseTexture.width;
var offsetY = tilePosition.y/sprite.texture.baseTexture.height;
var scaleX = (sprite.width / sprite.texture.baseTexture.width) / tileScale.x;
var scaleY = (sprite.height / sprite.texture.baseTexture.height) / tileScale.y;
sprite.uvs[0] = 0 - offsetX;
sprite.uvs[1] = 0 - offsetY;
sprite.uvs[2] = (1 * scaleX) -offsetX;
sprite.uvs[3] = 0 - offsetY;
sprite.uvs[4] = (1 *scaleX) - offsetX;
sprite.uvs[5] = (1 *scaleY) - offsetY;
sprite.uvs[6] = 0 - offsetX;
sprite.uvs[7] = (1 *scaleY) - offsetY;
gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs)
gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs);
this.renderStrip(sprite, projectionMatrix);
}
};
/**
* Initializes a strip to be rendered
@ -1008,13 +1006,12 @@ PIXI.WebGLRenderGroup.prototype.initStrip = function(strip)
{
// build the strip!
var gl = this.gl;
var shaderProgram = this.shaderProgram;
strip._vertexBuffer = gl.createBuffer();
strip._indexBuffer = gl.createBuffer();
strip._uvBuffer = gl.createBuffer();
strip._colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.DYNAMIC_DRAW);
@ -1024,8 +1021,7 @@ PIXI.WebGLRenderGroup.prototype.initStrip = function(strip)
gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW);
}
};

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

@ -6,7 +6,7 @@ PIXI._defaultFrame = new PIXI.Rectangle(0,0,1,1);
// an instance of the gl context..
// only one at the moment :/
PIXI.gl;
PIXI.gl = null;
/**
* the WebGLRenderer is draws the stage and all its content onto a webGL enabled canvas. This renderer
@ -21,7 +21,7 @@ PIXI.gl;
* @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 chrome at the moment)
*
*
*/
PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
{
@ -32,14 +32,14 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
this.width = width || 800;
this.height = height || 600;
this.view = view || document.createElement( 'canvas' );
this.view = view || document.createElement( 'canvas' );
this.view.width = this.width;
this.view.height = this.height;
// deal with losing context..
// deal with losing context..
var scope = this;
this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false)
this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false)
this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false);
this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false);
this.batchs = [];
@ -48,30 +48,30 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
antialias:!!antialias, // SPEED UP??
premultipliedAlpha:false,
stencil:true
}
};
//try 'experimental-webgl'
try {
PIXI.gl = this.gl = this.view.getContext("experimental-webgl", options);
PIXI.gl = this.gl = this.view.getContext('experimental-webgl', options);
} catch (e) {
//try 'webgl'
try {
PIXI.gl = this.gl = this.view.getContext("webgl", options);
} catch (e) {
PIXI.gl = this.gl = this.view.getContext('webgl', options);
} catch (e2) {
// fail, not able to get a context
throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this);
throw new Error(' This browser does not support webGL. Try using the canvas renderer' + this);
}
}
PIXI.initDefaultShaders();
// PIXI.activateDefaultShader();
var gl = this.gl;
gl.useProgram(PIXI.defaultShader.program);
@ -82,7 +82,7 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
gl.disable(gl.CULL_FACE);
gl.enable(gl.BLEND);
gl.colorMask(true, true, true, this.transparent);
gl.colorMask(true, true, true, this.transparent);
PIXI.projection = new PIXI.Point(400, 300);
PIXI.offset = new PIXI.Point(0, 0);
@ -96,7 +96,7 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl, this.transparent);
// this.stageRenderGroup. = this.transparent
}
};
// constructor
PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer;
@ -107,11 +107,11 @@ PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer;
* @static
* @method getBatch
* @return {WebGLBatch}
* @private
* @private
*/
PIXI.WebGLRenderer.getBatch = function()
{
if(PIXI._batchs.length == 0)
if(PIXI._batchs.length === 0)
{
return new PIXI.WebGLBatch(PIXI.WebGLRenderer.gl);
}
@ -119,7 +119,7 @@ PIXI.WebGLRenderer.getBatch = function()
{
return PIXI._batchs.pop();
}
}
};
/**
* Puts a batch back into the pool
@ -131,9 +131,9 @@ PIXI.WebGLRenderer.getBatch = function()
*/
PIXI.WebGLRenderer.returnBatch = function(batch)
{
batch.clean();
batch.clean();
PIXI._batchs.push(batch);
}
};
/**
* Renders the stage to its webGL view
@ -144,8 +144,8 @@ PIXI.WebGLRenderer.returnBatch = function(batch)
PIXI.WebGLRenderer.prototype.render = function(stage)
{
if(this.contextLost)return;
// if rendering a new stage clear the batchs..
if(this.__stage !== stage)
{
@ -155,33 +155,33 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
this.stageRenderGroup.setRenderable(stage);
}
// update any textures
// update any textures
PIXI.WebGLRenderer.updateTextures();
// update the scene graph
// update the scene graph
PIXI.visibleCount++;
stage.updateTransform();
var gl = this.gl;
// -- Does this need to be set every frame? -- //
gl.colorMask(true, true, true, this.transparent);
gl.viewport(0, 0, this.width, this.height);
gl.colorMask(true, true, true, this.transparent);
gl.viewport(0, 0, this.width, this.height);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent);
gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent);
gl.clear(gl.COLOR_BUFFER_BIT);
// HACK TO TEST
this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
PIXI.projection.x = this.width/2;
PIXI.projection.y = -this.height/2;
this.stageRenderGroup.render(PIXI.projection);
// interaction
// run interaction!
if(stage.interactive)
@ -193,18 +193,18 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
stage.interactionManager.setTarget(this);
}
}
// after rendering lets confirm all frames that have been uodated..
if(PIXI.Texture.frameUpdates.length > 0)
{
for (var i=0; i < PIXI.Texture.frameUpdates.length; i++)
for (var i=0; i < PIXI.Texture.frameUpdates.length; i++)
{
PIXI.Texture.frameUpdates[i].updateFrame = false;
};
}
PIXI.Texture.frameUpdates = [];
}
}
};
/**
* Updates the textures loaded into this webgl renderer
@ -215,12 +215,18 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
*/
PIXI.WebGLRenderer.updateTextures = function()
{
var i = 0;
//TODO break this out into a texture manager...
for (var i=0; i < PIXI.texturesToUpdate.length; i++) PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]);
for (var i=0; i < PIXI.texturesToDestroy.length; i++) PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]);
for (i = 0; i < PIXI.texturesToUpdate.length; i++)
PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]);
for (i = 0; i < PIXI.texturesToDestroy.length; i++)
PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]);
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
}
};
/**
* Updates a loaded webgl texture
@ -234,7 +240,7 @@ PIXI.WebGLRenderer.updateTexture = function(texture)
{
//TODO break this out into a texture manager...
var gl = PIXI.gl;
if(!texture._glTexture)
{
texture._glTexture = gl.createTexture();
@ -264,7 +270,7 @@ PIXI.WebGLRenderer.updateTexture = function(texture)
gl.bindTexture(gl.TEXTURE_2D, null);
}
}
};
/**
* Destroys a loaded webgl texture
@ -283,7 +289,7 @@ PIXI.WebGLRenderer.destroyTexture = function(texture)
texture._glTexture = gl.createTexture();
gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture);
}
}
};
/**
* resizes the webGL view to the specified width and height
@ -300,13 +306,13 @@ PIXI.WebGLRenderer.prototype.resize = function(width, height)
this.view.width = width;
this.view.height = height;
this.gl.viewport(0, 0, this.width, this.height);
this.gl.viewport(0, 0, this.width, this.height);
//var projectionMatrix = this.projectionMatrix;
PIXI.projection.x = this.width/2;
PIXI.projection.y = -this.height/2;
//PIXI.size.x = this.width/2;
//PIXI.size.y = -this.height/2;
@ -314,7 +320,7 @@ PIXI.WebGLRenderer.prototype.resize = function(width, height)
// projectionMatrix[5] = -2/this.height;
// projectionMatrix[12] = -1;
// projectionMatrix[13] = 1;
}
};
/**
* Handles a lost webgl context
@ -327,7 +333,7 @@ PIXI.WebGLRenderer.prototype.handleContextLost = function(event)
{
event.preventDefault();
this.contextLost = true;
}
};
/**
* Handles a restored webgl context
@ -336,28 +342,28 @@ PIXI.WebGLRenderer.prototype.handleContextLost = function(event)
* @param event {Event}
* @private
*/
PIXI.WebGLRenderer.prototype.handleContextRestored = function(event)
PIXI.WebGLRenderer.prototype.handleContextRestored = function()
{
this.gl = this.view.getContext("experimental-webgl", {
this.gl = this.view.getContext('experimental-webgl', {
alpha: true
});
this.initShaders();
this.initShaders();
for(var key in PIXI.TextureCache)
for(var key in PIXI.TextureCache)
{
var texture = PIXI.TextureCache[key].baseTexture;
texture._glTexture = null;
PIXI.WebGLRenderer.updateTexture(texture);
};
var texture = PIXI.TextureCache[key].baseTexture;
texture._glTexture = null;
PIXI.WebGLRenderer.updateTexture(texture);
}
for (var i=0; i < this.batchs.length; i++)
for (var i=0; i < this.batchs.length; i++)
{
this.batchs[i].restoreLostContext(this.gl)//
this.batchs[i].restoreLostContext(this.gl);
this.batchs[i].dirty = true;
};
}
PIXI._restoreBatchs(this.gl);
this.contextLost = false;
}
};

56
src/pixi/renderers/webgl/WebGLShaders.js
View file

@ -2,8 +2,7 @@
* @author Mat Groves http://matgroves.com/ @Doormat23
*/
PIXI.initDefaultShaders = function()
PIXI.initDefaultShaders = function()
{
PIXI.primitiveShader = new PIXI.PrimitiveShader();
PIXI.primitiveShader.init();
@ -14,53 +13,51 @@ PIXI.initDefaultShaders = function()
PIXI.defaultShader = new PIXI.PixiShader();
PIXI.defaultShader.init();
var gl = PIXI.gl;
var gl = PIXI.gl;
var shaderProgram = PIXI.defaultShader.program;
gl.useProgram(shaderProgram);
gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition);
gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute);
gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
}
};
PIXI.activatePrimitiveShader = function()
{
var gl = PIXI.gl;
gl.useProgram(PIXI.primitiveShader.program);
gl.disableVertexAttribArray(PIXI.defaultShader.aVertexPosition);
gl.disableVertexAttribArray(PIXI.defaultShader.colorAttribute);
gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
gl.enableVertexAttribArray(PIXI.primitiveShader.aVertexPosition);
gl.enableVertexAttribArray(PIXI.primitiveShader.colorAttribute);
}
};
PIXI.deactivatePrimitiveShader = function()
{
var gl = PIXI.gl;
gl.useProgram(PIXI.defaultShader.program);
gl.disableVertexAttribArray(PIXI.primitiveShader.aVertexPosition);
gl.disableVertexAttribArray(PIXI.primitiveShader.colorAttribute);
gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition);
gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute);
gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
}
};
PIXI.activateStripShader = function()
{
var gl = PIXI.gl;
gl.useProgram(PIXI.stripShader.program);
// gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
}
};
PIXI.deactivateStripShader = function()
{
@ -68,7 +65,7 @@ PIXI.deactivateStripShader = function()
gl.useProgram(PIXI.defaultShader.program);
//gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
}
};
/*
@ -78,12 +75,12 @@ SHADER COMPILER HELPERS
PIXI.CompileVertexShader = function(gl, shaderSrc)
{
return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER);
}
};
PIXI.CompileFragmentShader = function(gl, shaderSrc)
{
return PIXI._CompileShader(gl, shaderSrc, gl.FRAGMENT_SHADER);
}
};
PIXI._CompileShader = function(gl, shaderSrc, shaderType)
{
@ -93,29 +90,28 @@ PIXI._CompileShader = function(gl, shaderSrc, shaderType)
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.log(gl.getShaderInfoLog(shader));
window.console.log(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
};
PIXI.compileProgram = function(vertexSrc, fragmentSrc)
{
var gl = PIXI.gl;
var fragmentShader = PIXI.CompileFragmentShader(gl, fragmentSrc);
var vertexShader = PIXI.CompileVertexShader(gl, vertexSrc);
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
console.log("Could not initialise shaders");
}
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
window.console.log("Could not initialise shaders");
}
return shaderProgram;
}
};

27
src/pixi/text/BitmapText.js
View file

@ -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 Text Object will create a line(s) of text using bitmap font. To split a line you can use '\n', '\r' or '\r\n'
* You can generate the fnt files using
* http://www.angelcode.com/products/bmfont/ for windows or
* http://www.bmglyph.com/ for mac.
@ -13,8 +13,8 @@
* @constructor
* @param text {String} The copy that you would like the text to display
* @param style {Object} The style parameters
* @param style.font {String} The size (optional) and bitmap font id (required) eq "Arial" or "20px Arial" (must have loaded previously)
* @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right")
* @param style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously)
* @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right')
*/
PIXI.BitmapText = function(text, style)
{
@ -23,8 +23,7 @@ PIXI.BitmapText = function(text, style)
this.setText(text);
this.setStyle(style);
this.updateText();
this.dirty = false
this.dirty = false;
};
// constructor
@ -39,7 +38,7 @@ PIXI.BitmapText.prototype.constructor = PIXI.BitmapText;
*/
PIXI.BitmapText.prototype.setText = function(text)
{
this.text = text || " ";
this.text = text || ' ';
this.dirty = true;
};
@ -48,16 +47,16 @@ PIXI.BitmapText.prototype.setText = function(text)
*
* @method setStyle
* @param style {Object} The style parameters
* @param style.font {String} The size (optional) and bitmap font id (required) eq "Arial" or "20px Arial" (must have loaded previously)
* @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right")
* @param style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously)
* @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right')
*/
PIXI.BitmapText.prototype.setStyle = function(style)
{
style = style || {};
style.align = style.align || "left";
style.align = style.align || 'left';
this.style = style;
var font = style.font.split(" ");
var font = style.font.split(' ');
this.fontName = font[font.length - 1];
this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
@ -100,7 +99,7 @@ PIXI.BitmapText.prototype.updateText = function()
if(prevCharCode && charData[prevCharCode])
{
pos.x += 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;
@ -115,11 +114,11 @@ PIXI.BitmapText.prototype.updateText = function()
for(i = 0; i <= line; i++)
{
var alignOffset = 0;
if(this.style.align == "right")
if(this.style.align === 'right')
{
alignOffset = maxLineWidth - lineWidths[i];
}
else if(this.style.align == "center")
else if(this.style.align === 'center')
{
alignOffset = (maxLineWidth - lineWidths[i]) / 2;
}
@ -128,7 +127,7 @@ PIXI.BitmapText.prototype.updateText = function()
for(i = 0; i < chars.length; i++)
{
var c = new PIXI.Sprite(chars[i].texture)//PIXI.Sprite.fromFrame(chars[i].charCode);
var c = new PIXI.Sprite(chars[i].texture); //PIXI.Sprite.fromFrame(chars[i].charCode);
c.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
c.position.y = chars[i].position.y * scale;
c.scale.x = c.scale.y = scale;

66
src/pixi/text/Text.js
View file

@ -3,25 +3,25 @@
*/
/**
* A Text Object will create a line(s) of text to split a line you can use "\n"
* A Text Object will create a line(s) of text to split a line you can use '\n'
*
* @class Text
* @extends Sprite
* @constructor
* @param text {String} The copy that you would like the text to display
* @param [style] {Object} The style parameters
* @param [style.font] {String} default "bold 20pt Arial" The style and size of the font
* @param [style.fill="black"] {Object} A canvas fillstyle that will be used on the text eg "red", "#00FF00"
* @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right")
* @param [style.stroke] {String} A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
* @param [style.font] {String} default 'bold 20pt Arial' The style and size of the font
* @param [style.fill='black'] {Object} A canvas fillstyle that will be used on the text eg 'red', '#00FF00'
* @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right')
* @param [style.stroke] {String} A canvas fillstyle that will be used on the text stroke eg 'blue', '#FCFF00'
* @param [style.strokeThickness=0] {Number} A number that represents the thickness of the stroke. Default is 0 (no stroke)
* @param [style.wordWrap=false] {Boolean} Indicates if word wrap should be used
* @param [style.wordWrapWidth=100] {Number} The width at which text will wrap
*/
PIXI.Text = function(text, style)
{
this.canvas = document.createElement("canvas");
this.context = this.canvas.getContext("2d");
this.canvas = document.createElement('canvas');
this.context = this.canvas.getContext('2d');
PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
this.setText(text);
@ -40,10 +40,10 @@ PIXI.Text.prototype.constructor = PIXI.Text;
*
* @method setStyle
* @param [style] {Object} The style parameters
* @param [style.font="bold 20pt Arial"] {String} The style and size of the font
* @param [style.fill="black"] {Object} A canvas fillstyle that will be used on the text eg "red", "#00FF00"
* @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right")
* @param [style.stroke="black"] {String} A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
* @param [style.font='bold 20pt Arial'] {String} The style and size of the font
* @param [style.fill='black'] {Object} A canvas fillstyle that will be used on the text eg 'red', '#00FF00'
* @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right')
* @param [style.stroke='black'] {String} A canvas fillstyle that will be used on the text stroke eg 'blue', '#FCFF00'
* @param [style.strokeThickness=0] {Number} A number that represents the thickness of the stroke. Default is 0 (no stroke)
* @param [style.wordWrap=false] {Boolean} Indicates if word wrap should be used
* @param [style.wordWrapWidth=100] {Number} The width at which text will wrap
@ -51,10 +51,10 @@ PIXI.Text.prototype.constructor = PIXI.Text;
PIXI.Text.prototype.setStyle = function(style)
{
style = style || {};
style.font = style.font || "bold 20pt Arial";
style.fill = style.fill || "black";
style.align = style.align || "left";
style.stroke = style.stroke || "black"; //provide a default, see: https://github.com/GoodBoyDigital/pixi.js/issues/136
style.font = style.font || 'bold 20pt Arial';
style.fill = style.fill || 'black';
style.align = style.align || 'left';
style.stroke = style.stroke || 'black'; //provide a default, see: https://github.com/GoodBoyDigital/pixi.js/issues/136
style.strokeThickness = style.strokeThickness || 0;
style.wordWrap = style.wordWrap || false;
style.wordWrapWidth = style.wordWrapWidth || 100;
@ -63,14 +63,14 @@ PIXI.Text.prototype.setStyle = function(style)
};
/**
* 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
*/
PIXI.Text.prototype.setText = function(text)
{
this.text = text.toString() || " ";
this.text = text.toString() || ' ';
this.dirty = true;
};
@ -105,7 +105,7 @@ PIXI.Text.prototype.updateText = function()
this.canvas.width = maxLineWidth + this.style.strokeThickness;
//calculate text height
var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness;
var lineHeight = this.determineFontHeight('font: ' + this.style.font + ';') + this.style.strokeThickness;
this.canvas.height = lineHeight * lines.length;
//set canvas text styles
@ -115,18 +115,18 @@ PIXI.Text.prototype.updateText = function()
this.context.strokeStyle = this.style.stroke;
this.context.lineWidth = this.style.strokeThickness;
this.context.textBaseline = "top";
this.context.textBaseline = 'top';
//draw lines line by line
for (i = 0; i < lines.length; i++)
{
var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
if(this.style.align == "right")
if(this.style.align === 'right')
{
linePosition.x += maxLineWidth - lineWidths[i];
}
else if(this.style.align == "center")
else if(this.style.align === 'center')
{
linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
}
@ -197,11 +197,11 @@ PIXI.Text.prototype.determineFontHeight = function(fontStyle)
if(!result)
{
var body = document.getElementsByTagName("body")[0];
var dummy = document.createElement("div");
var dummyText = document.createTextNode("M");
var body = document.getElementsByTagName('body')[0];
var dummy = document.createElement('div');
var dummyText = document.createTextNode('M');
dummy.appendChild(dummyText);
dummy.setAttribute("style", fontStyle + ';position:absolute;top:0;left:0');
dummy.setAttribute('style', fontStyle + ';position:absolute;top:0;left:0');
body.appendChild(dummy);
result = dummy.offsetHeight;
@ -225,34 +225,34 @@ PIXI.Text.prototype.wordWrap = function(text)
{
// Greedy wrapping algorithm that will wrap words as the line grows longer
// than its horizontal bounds.
var result = "";
var lines = text.split("\n");
var result = '';
var lines = text.split('\n');
for (var i = 0; i < lines.length; i++)
{
var spaceLeft = this.style.wordWrapWidth;
var words = lines[i].split(" ");
var words = lines[i].split(' ');
for (var j = 0; j < words.length; j++)
{
var wordWidth = this.context.measureText(words[j]).width;
var wordWidthWithSpace = wordWidth + this.context.measureText(" ").width;
var wordWidthWithSpace = wordWidth + this.context.measureText(' ').width;
if(wordWidthWithSpace > spaceLeft)
{
// Skip printing the newline if it's the first word of the line that is
// greater than the word wrap width.
if(j > 0)
{
result += "\n";
result += '\n';
}
result += words[j] + " ";
result += words[j] + ' ';
spaceLeft = this.style.wordWrapWidth - wordWidth;
}
else
{
spaceLeft -= wordWidthWithSpace;
result += words[j] + " ";
result += words[j] + ' ';
}
}
result += "\n";
result += '\n';
}
return result;
};

16
src/pixi/textures/BaseTexture.js
View file

@ -69,7 +69,7 @@ PIXI.BaseTexture = function(source)
{
var scope = this;
this.source.onload = function(){
this.source.onload = function() {
scope.hasLoaded = true;
scope.width = scope.source.width;
@ -78,7 +78,7 @@ PIXI.BaseTexture = function(source)
// add it to somewhere...
PIXI.texturesToUpdate.push(scope);
scope.dispatchEvent( { type: 'loaded', content: scope } );
}
};
// this.image.src = imageUrl;
}
}
@ -93,7 +93,7 @@ PIXI.BaseTexture = function(source)
this.imageUrl = null;
this._powerOf2 = false;
}
};
PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture;
@ -106,17 +106,17 @@ PIXI.BaseTexture.prototype.destroy = function()
{
if(this.source instanceof Image)
{
if (this.imageUrl in PIXI.BaseTextureCache)
if (this.imageUrl in PIXI.BaseTextureCache)
delete PIXI.BaseTextureCache[this.imageUrl];
this.imageUrl = null;
this.source.src = null;
}
this.source = null;
PIXI.texturesToDestroy.push(this);
}
};
/**
*
*
*
* @method destroy
*/
@ -126,7 +126,7 @@ PIXI.BaseTexture.prototype.updateSourceImage = function(newSrc)
this.hasLoaded = false;
this.source.src = null;
this.source.src = newSrc;
}
};
/**
* Helper function that returns a base texture based on an image url
@ -156,4 +156,4 @@ PIXI.BaseTexture.fromImage = function(imageUrl, crossorigin)
}
return baseTexture;
}
};

73
src/pixi/textures/RenderTexture.js
View file

@ -5,11 +5,11 @@
/**
A RenderTexture is a special texture that allows any pixi displayObject to be rendered to it.
__Hint__: All DisplayObjects (exmpl. Sprites) that renders on RenderTexture should be preloaded.
Otherwise black rectangles will be drawn instead.
__Hint__: All DisplayObjects (exmpl. Sprites) that renders on RenderTexture should be preloaded.
Otherwise black rectangles will be drawn instead.
RenderTexture takes snapshot of DisplayObject passed to render method. If DisplayObject is passed to render method, position and rotation of it will be ignored. For example:
var renderTexture = new PIXI.RenderTexture(800, 600);
var sprite = PIXI.Sprite.fromImage("spinObj_01.png");
sprite.position.x = 800/2;
@ -39,7 +39,7 @@ PIXI.RenderTexture = function(width, height)
this.indetityMatrix = PIXI.mat3.create();
this.frame = new PIXI.Rectangle(0, 0, this.width, this.height);
this.frame = new PIXI.Rectangle(0, 0, this.width, this.height);
if(PIXI.gl)
{
@ -49,7 +49,7 @@ PIXI.RenderTexture = function(width, height)
{
this.initCanvas();
}
}
};
PIXI.RenderTexture.prototype = Object.create( PIXI.Texture.prototype );
PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture;
@ -68,7 +68,7 @@ PIXI.RenderTexture.prototype.initWebGL = function()
gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer );
this.glFramebuffer.width = this.width;
this.glFramebuffer.height = this.height;
this.glFramebuffer.height = this.height;
this.baseTexture = new PIXI.BaseTexture();
@ -95,7 +95,7 @@ PIXI.RenderTexture.prototype.initWebGL = function()
// set the correct render function..
this.render = this.renderWebGL;
}
};
PIXI.RenderTexture.prototype.resize = function(width, height)
@ -103,24 +103,24 @@ PIXI.RenderTexture.prototype.resize = function(width, height)
this.width = width;
this.height = height;
if(PIXI.gl)
{
this.projection.x = this.width/2
this.projection.y = -this.height/2;
this.projection.x = this.width / 2;
this.projection.y = -this.height / 2;
var gl = PIXI.gl;
gl.bindTexture(gl.TEXTURE_2D, this.baseTexture._glTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
}
else
{
this.frame.width = this.width
this.frame.width = this.width;
this.frame.height = this.height;
this.renderer.resize(this.width, this.height);
}
}
};
/**
* Initializes the canvas data for this texture
@ -136,7 +136,7 @@ PIXI.RenderTexture.prototype.initCanvas = function()
this.frame = new PIXI.Rectangle(0, 0, this.width, this.height);
this.render = this.renderCanvas;
}
};
/**
* This function will draw the display object to the texture.
@ -151,15 +151,15 @@ PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, cle
var gl = PIXI.gl;
// enable the alpha color mask..
gl.colorMask(true, true, true, true);
gl.colorMask(true, true, true, true);
gl.viewport(0, 0, this.width, this.height);
gl.viewport(0, 0, this.width, this.height);
gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer );
if(clear)
{
gl.clearColor(0,0,0, 0);
gl.clearColor(0,0,0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
}
@ -178,20 +178,20 @@ PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, cle
displayObject.worldTransform[2] = position.x;
displayObject.worldTransform[5] -= position.y;
}
PIXI.visibleCount++;
displayObject.vcount = PIXI.visibleCount;
for(var i=0,j=children.length; i<j; i++)
{
children[i].updateTransform();
children[i].updateTransform();
}
var renderGroup = displayObject.__renderGroup;
if(renderGroup)
{
if(displayObject == renderGroup.root)
if(displayObject === renderGroup.root)
{
renderGroup.render(this.projection, this.glFramebuffer);
}
@ -206,9 +206,9 @@ PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, cle
this.renderGroup.setRenderable(displayObject);
this.renderGroup.render(this.projection, this.glFramebuffer);
}
displayObject.worldTransform = originalWorldTransform;
}
};
/**
@ -224,25 +224,24 @@ PIXI.RenderTexture.prototype.renderCanvas = function(displayObject, position, cl
var children = displayObject.children;
displayObject.worldTransform = PIXI.mat3.create();
if(position)
{
displayObject.worldTransform[2] = position.x;
displayObject.worldTransform[5] = position.y;
}
for(var i=0,j=children.length; i<j; i++)
for(var i = 0, j = children.length; i < j; i++)
{
children[i].updateTransform();
children[i].updateTransform();
}
if(clear)this.renderer.context.clearRect(0,0, this.width, this.height);
this.renderer.renderDisplayObject(displayObject);
this.renderer.context.setTransform(1,0,0,1,0,0);
if(clear) this.renderer.context.clearRect(0,0, this.width, this.height);
// PIXI.texturesToUpdate.push(this.baseTexture);
}
this.renderer.renderDisplayObject(displayObject);
this.renderer.context.setTransform(1,0,0,1,0,0);
//PIXI.texturesToUpdate.push(this.baseTexture);
};

31
src/pixi/textures/Texture.js
View file

@ -64,9 +64,9 @@ PIXI.Texture = function(baseTexture, frame)
else
{
var scope = this;
baseTexture.addEventListener( 'loaded', function(){ scope.onBaseTextureLoaded()} );
baseTexture.addEventListener('loaded', function(){ scope.onBaseTextureLoaded(); });
}
}
};
PIXI.Texture.prototype.constructor = PIXI.Texture;
@ -77,7 +77,7 @@ PIXI.Texture.prototype.constructor = PIXI.Texture;
* @param event
* @private
*/
PIXI.Texture.prototype.onBaseTextureLoaded = function(event)
PIXI.Texture.prototype.onBaseTextureLoaded = function()
{
var baseTexture = this.baseTexture;
baseTexture.removeEventListener( 'loaded', this.onLoaded );
@ -88,7 +88,7 @@ PIXI.Texture.prototype.onBaseTextureLoaded = function(event)
this.height = this.frame.height;
this.scope.dispatchEvent( { type: 'update', content: this } );
}
};
/**
* Destroys this texture
@ -98,8 +98,8 @@ PIXI.Texture.prototype.onBaseTextureLoaded = function(event)
*/
PIXI.Texture.prototype.destroy = function(destroyBase)
{
if(destroyBase)this.baseTexture.destroy();
}
if(destroyBase) this.baseTexture.destroy();
};
/**
* Specifies the rectangle region of the baseTexture
@ -115,14 +115,14 @@ PIXI.Texture.prototype.setFrame = function(frame)
if(frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height)
{
throw new Error("Texture Error: frame does not fit inside the base Texture dimensions " + this);
throw new Error('Texture Error: frame does not fit inside the base Texture dimensions ' + this);
}
this.updateFrame = true;
PIXI.Texture.frameUpdates.push(this);
//this.dispatchEvent( { type: 'update', content: this } );
}
};
/**
* Helper function that returns a texture based on an image url
@ -145,7 +145,7 @@ PIXI.Texture.fromImage = function(imageUrl, crossorigin)
}
return texture;
}
};
/**
* Helper function that returns a texture based on a frame id
@ -159,9 +159,9 @@ PIXI.Texture.fromImage = function(imageUrl, crossorigin)
PIXI.Texture.fromFrame = function(frameId)
{
var texture = PIXI.TextureCache[frameId];
if(!texture)throw new Error("The frameId '"+ frameId +"' does not exist in the texture cache " + this);
if(!texture) throw new Error('The frameId "' + frameId + '" does not exist in the texture cache ' + this);
return texture;
}
};
/**
* Helper function that returns a texture based on a canvas element
@ -176,7 +176,7 @@ PIXI.Texture.fromCanvas = function(canvas)
{
var baseTexture = new PIXI.BaseTexture(canvas);
return new PIXI.Texture(baseTexture);
}
};
/**
@ -190,7 +190,7 @@ PIXI.Texture.fromCanvas = function(canvas)
PIXI.Texture.addTextureToCache = function(texture, id)
{
PIXI.TextureCache[id] = texture;
}
};
/**
* Remove a texture from the textureCache.
@ -202,11 +202,10 @@ PIXI.Texture.addTextureToCache = function(texture, id)
*/
PIXI.Texture.removeTextureFromCache = function(id)
{
var texture = PIXI.TextureCache[id]
var texture = PIXI.TextureCache[id];
PIXI.TextureCache[id] = null;
return texture;
}
};
// this is more for webGL.. it contains updated frames..
PIXI.Texture.frameUpdates = [];

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

@ -23,14 +23,20 @@ PIXI.autoDetectRenderer = function(width, height, view, transparent, antialias)
if(!height)height = 600;
// BORROWED from Mr Doob (mrdoob.com)
var webgl = ( function () { try { var canvas = document.createElement( 'canvas' ); return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ); } catch( e ) { return false; } } )();
var webgl = ( function () { try {
var canvas = document.createElement( 'canvas' );
return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) );
} catch( e ) {
return false;
}
} )();
if(webgl)
{
var ie = (navigator.userAgent.toLowerCase().indexOf('msie') != -1);
webgl = !ie;
var ie = (navigator.userAgent.toLowerCase().indexOf('msie') !== -1);
webgl = !ie;
}
//console.log(webgl);
if( webgl )
{

31
src/pixi/utils/Polyk.js
View file

@ -44,11 +44,12 @@ PIXI.PolyK.Triangulate = function(p)
{
var sign = true;
var n = p.length>>1;
if(n<3) return [];
var n = p.length >> 1;
if(n < 3) return [];
var tgs = [];
var avl = [];
for(var i=0; i<n; i++) avl.push(i);
for(var i = 0; i < n; i++) avl.push(i);
i = 0;
var al = n;
@ -66,13 +67,18 @@ PIXI.PolyK.Triangulate = function(p)
if(PIXI.PolyK._convex(ax, ay, bx, by, cx, cy, sign))
{
earFound = true;
for(var j=0; j<al; j++)
for(var j = 0; j < al; j++)
{
var vi = avl[j];
if(vi==i0 || vi==i1 || vi==i2) continue;
if(PIXI.PolyK._PointInTriangle(p[2*vi], p[2*vi+1], ax, ay, bx, by, cx, cy)) {earFound = false; break;}
if(vi === i0 || vi === i1 || vi === i2) continue;
if(PIXI.PolyK._PointInTriangle(p[2*vi], p[2*vi+1], ax, ay, bx, by, cx, cy)) {
earFound = false;
break;
}
}
}
if(earFound)
{
tgs.push(i0, i1, i2);
@ -88,7 +94,7 @@ PIXI.PolyK.Triangulate = function(p)
{
tgs = [];
avl = [];
for(i=0; i<n; i++) avl.push(i);
for(i = 0; i < n; i++) avl.push(i);
i = 0;
al = n;
@ -97,14 +103,15 @@ PIXI.PolyK.Triangulate = function(p)
}
else
{
console.log("PIXI Warning: shape too complex to fill")
window.console.log("PIXI Warning: shape too complex to fill");
return [];
}
}
}
tgs.push(avl[0], avl[1], avl[2]);
return tgs;
}
};
/**
* Checks if a point is within a triangle
@ -134,7 +141,7 @@ PIXI.PolyK._PointInTriangle = function(px, py, ax, ay, bx, by, cx, cy)
// Check if point is in triangle
return (u >= 0) && (v >= 0) && (u + v < 1);
}
};
/**
* Checks if a shape is convex
@ -145,5 +152,5 @@ PIXI.PolyK._PointInTriangle = function(px, py, ax, ay, bx, by, cx, cy)
*/
PIXI.PolyK._convex = function(ax, ay, bx, by, cx, cy, sign)
{
return ((ay-by)*(cx-bx) + (bx-ax)*(cy-by) >= 0) == sign;
}
return ((ay-by)*(cx-bx) + (bx-ax)*(cy-by) >= 0) === sign;
};

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

@ -18,13 +18,13 @@
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] ||
window[vendors[x]+'CancelRequestAnimationFrame'];
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
@ -32,11 +32,13 @@ if (!window.requestAnimationFrame)
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame)
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}
window.requestAnimFrame = window.requestAnimationFrame;
@ -46,36 +48,36 @@ window.requestAnimFrame = window.requestAnimationFrame;
* @method hex2rgb
* @param hex {Number}
*/
function hex2rgb(hex) {
PIXI.hex2rgb = function hex2rgb(hex) {
return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255];
}
};
/**
* A polyfill for Function.prototype.bind
*
* @method bind
*/
if (typeof Function.prototype.bind != 'function') {
Function.prototype.bind = (function () {
var slice = Array.prototype.slice;
return function (thisArg) {
var target = this, boundArgs = slice.call(arguments, 1);
if (typeof Function.prototype.bind !== 'function') {
Function.prototype.bind = (function () {
var slice = Array.prototype.slice;
return function (thisArg) {
var target = this, boundArgs = slice.call(arguments, 1);
if (typeof target != 'function') throw new TypeError();
if (typeof target !== 'function') throw new TypeError();
function bound() {
var args = boundArgs.concat(slice.call(arguments));
target.apply(this instanceof bound ? this : thisArg, args);
}
function bound() {
var args = boundArgs.concat(slice.call(arguments));
target.apply(this instanceof bound ? this : thisArg, args);
}
bound.prototype = (function F(proto) {
if (proto) F.prototype = proto;
if (!(this instanceof F)) return new F();
})(target.prototype);
bound.prototype = (function F(proto) {
if (proto) F.prototype = proto;
if (!(this instanceof F)) return new F();
})(target.prototype);
return bound;
};
})();
return bound;
};
})();
}
/**
@ -84,57 +86,57 @@ if (typeof Function.prototype.bind != 'function') {
* @class AjaxRequest
* @constructor
*/
var AjaxRequest = PIXI.AjaxRequest = function()
PIXI.AjaxRequest = function AjaxRequest()
{
var activexmodes = ["Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.3.0", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
var activexmodes = ['Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.3.0', 'Microsoft.XMLHTTP']; //activeX versions to check for in IE
if (window.ActiveXObject)
{ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
for (var i=0; i<activexmodes.length; i++)
{
try{
return new ActiveXObject(activexmodes[i])
return new window.ActiveXObject(activexmodes[i]);
}
catch(e){
catch(e) {
//suppress error
}
}
}
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
{
return new XMLHttpRequest()
return new window.XMLHttpRequest();
}
else
{
return false;
}
}
};
/*
* DEBUGGING ONLY
*/
PIXI.runList = function(item)
{
console.log(">>>>>>>>>")
console.log("_")
window.console.log('>>>>>>>>>');
window.console.log('_');
var safe = 0;
var tmp = item.first;
console.log(tmp);
window.console.log(tmp);
while(tmp._iNext)
{
safe++;
tmp = tmp._iNext;
console.log(tmp);
window.console.log(tmp);
// console.log(tmp);
if(safe > 100)
{
console.log("BREAK")
break
window.console.log('BREAK');
break;
}
}
}
};