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

Squashed commit of the following (jshint):

Browse source 
commit 09d68fb83686b82a2cbac0d99abcc7e0899d6724
Author: Dr. Kibitz <info@drkibitz.com>
Date:   Tue Sep 10 13:14:22 2013 -0700

    ignore W069 just in 4 methods

commit 931afab48f374194a808bedac4e31dd9c20d2ae4
Author: Dr. Kibitz <info@drkibitz.com>
Date:   Tue Sep 10 13:14:03 2013 -0700

    fix for warning W055

commit 43ad62a89a1c83e8da85dd9f9bb6e8a7c0acd59d
Author: Dr. Kibitz <info@drkibitz.com>
Date:   Tue Sep 10 13:13:46 2013 -0700

    rename HEXtoRGB to hex2rgb

commit adc2a1e83823061709dbf1d4b037bebeddc7281c
Author: Dr. Kibitz <info@drkibitz.com>
Date:   Tue Sep 10 13:13:02 2013 -0700

    Changed some jshint settings

commit 0d8eb1ef71332b076a0f9bd565633c92395ed5ec
Author: Dr. Kibitz <info@drkibitz.com>
Date:   Sun Sep 1 16:16:53 2013 -0700

    unittest-refactor branch compatible jshint setup

commit 3e91e79dab7c34dbb60bf364124d2ef7df93ec6d
Author: Dr. Kibitz <info@drkibitz.com>
Date:   Sun Sep 1 11:15:34 2013 -0700

    Final progress, jshint passed

commit c0f3750a06616195cf76149091dce4a1da7717ab
Author: Dr. Kibitz <info@drkibitz.com>
Date:   Sun Sep 1 10:31:36 2013 -0700

    More progress

commit b2118949bb47cbeffaf53d2cb1a978c8f9ffdf49
Author: Dr. Kibitz <info@drkibitz.com>
Date:   Sun Sep 1 02:38:10 2013 -0700

    jshint progress
This commit is contained in:
Dr. Kibitz 2013-09-24 09:32:56 -07:00
parent 56df185471
commit 67d0c577d3
41 changed files with 5776 additions and 5733 deletions
Download patch file Download diff file Expand all files Collapse all files

72
.jshintrc Normal file
View file

@ -0,0 +1,72 @@
{
"passfail" : false,
"maxerr" : 0,
"browser" : true,
"node" : false,
"rhino" : false,
"couch" : false,
"wsh" : false,
"jquery" : false,
"prototypejs" : false,
"mootools" : false,
"dojo" : false,
"predef" : [
"_",
"google",
"jasmine",
"describe",
"xdescribe",
"it",
"xit",
"beforeEach",
"afterEach",
"expect",
"spyOn",
"runs",
"waits",
"waitsFor",
"Benchmark",
"Backbone",
"Modernizr"
],
"debug" : false,
"devel" : false,
"es5" : false,
"strict" : false,
"globalstrict" : false,
"smarttabs" : true,
"asi" : true,
"laxbreak" : false,
"bitwise" : false,
"boss" : false,
"curly" : false,
"eqeqeq" : false,
"eqnull" : true,
"evil" : false,
"expr" : false,
"forin" : false,
"immed" : true,
"latedef" : true,
"loopfunc" : false,
"noarg" : true,
"regexp" : true,
"regexdash" : false,
"scripturl" : true,
"shadow" : false,
"supernew" : false,
"undef" : false,
"newcap" : true,
"noempty" : true,
"nonew" : false,
"nomen" : false,
"onevar" : false,
"plusplus" : false,
"sub" : false,
"trailing" : true
}

28
Gruntfile.js
View file

@ -93,11 +93,24 @@ module.exports = function(grunt) {
} }
}, },
jshint: { jshint: {
beforeconcat: srcFiles, beforeconcat: {
test: ['<%= files.testBlob %>'], src: srcFiles,
options: { options: {
asi: true, jshintrc: '.jshintrc',
smarttabs: true ignores: ['<%= dirs.src %>/{Intro,Outro}.js']
}
},
afterconcat: {
src: '<%= files.build %>',
options: {
jshintrc: '.jshintrc',
}
},
test: {
src: ['<%= files.testBlob %>'],
options: {
expr: true
}
} }
}, },
uglify: { uglify: {
@ -182,8 +195,9 @@ module.exports = function(grunt) {
} }
) )
grunt.registerTask('default', ['concat', 'uglify', 'distribute']); grunt.registerTask('lintconcat', ['jshint:beforeconcat', 'concat', 'jshint:afterconcat']);
grunt.registerTask('build', ['concat', 'uglify', 'distribute']); grunt.registerTask('default', ['lintconcat', 'uglify', 'distribute']);
grunt.registerTask('build', ['lintconcat', 'uglify', 'distribute']);
grunt.registerTask('test', ['build', 'connect:qunit', 'qunit']); grunt.registerTask('test', ['build', 'connect:qunit', 'qunit']);
grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('docs', ['yuidoc']);

857
src/pixi/InteractionManager.js
View file

File diff suppressed because it is too large Load diff

2
src/pixi/Intro.js
View file

@ -4,4 +4,4 @@
(function(){ (function(){
var root = this; var root = this;

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

@ -16,35 +16,35 @@ PIXI.mat3 = {};
PIXI.mat3.create = function() PIXI.mat3.create = function()
{ {
var matrix = new PIXI.Matrix(9); var matrix = new PIXI.Matrix(9);
matrix[0] = 1; matrix[0] = 1;
matrix[1] = 0; matrix[1] = 0;
matrix[2] = 0; matrix[2] = 0;
matrix[3] = 0; matrix[3] = 0;
matrix[4] = 1; matrix[4] = 1;
matrix[5] = 0; matrix[5] = 0;
matrix[6] = 0; matrix[6] = 0;
matrix[7] = 0; matrix[7] = 0;
matrix[8] = 1; matrix[8] = 1;
return matrix; return matrix;
} }
PIXI.mat3.identity = function(matrix) PIXI.mat3.identity = function(matrix)
{ {
matrix[0] = 1; matrix[0] = 1;
matrix[1] = 0; matrix[1] = 0;
matrix[2] = 0; matrix[2] = 0;
matrix[3] = 0; matrix[3] = 0;
matrix[4] = 1; matrix[4] = 1;
matrix[5] = 0; matrix[5] = 0;
matrix[6] = 0; matrix[6] = 0;
matrix[7] = 0; matrix[7] = 0;
matrix[8] = 1; matrix[8] = 1;
return matrix; return matrix;
} }
@ -52,76 +52,76 @@ PIXI.mat4 = {};
PIXI.mat4.create = function() PIXI.mat4.create = function()
{ {
var matrix = new PIXI.Matrix(16); var matrix = new PIXI.Matrix(16);
matrix[0] = 1; matrix[0] = 1;
matrix[1] = 0; matrix[1] = 0;
matrix[2] = 0; matrix[2] = 0;
matrix[3] = 0; matrix[3] = 0;
matrix[4] = 0; matrix[4] = 0;
matrix[5] = 1; matrix[5] = 1;
matrix[6] = 0; matrix[6] = 0;
matrix[7] = 0; matrix[7] = 0;
matrix[8] = 0; matrix[8] = 0;
matrix[9] = 0; matrix[9] = 0;
matrix[10] = 1; matrix[10] = 1;
matrix[11] = 0; matrix[11] = 0;
matrix[12] = 0; matrix[12] = 0;
matrix[13] = 0; matrix[13] = 0;
matrix[14] = 0; matrix[14] = 0;
matrix[15] = 1; matrix[15] = 1;
return matrix; return matrix;
} }
PIXI.mat3.multiply = function (mat, mat2, dest) PIXI.mat3.multiply = function (mat, mat2, dest)
{ {
if (!dest) { dest = mat; } if (!dest) { dest = mat; }
// Cache the matrix values (makes for huge speed increases!) // Cache the matrix values (makes for huge speed increases!)
var a00 = mat[0], a01 = mat[1], a02 = mat[2], var a00 = mat[0], a01 = mat[1], a02 = mat[2],
a10 = mat[3], a11 = mat[4], a12 = mat[5], a10 = mat[3], a11 = mat[4], a12 = mat[5],
a20 = mat[6], a21 = mat[7], a22 = mat[8], a20 = mat[6], a21 = mat[7], a22 = mat[8],
b00 = mat2[0], b01 = mat2[1], b02 = mat2[2], b00 = mat2[0], b01 = mat2[1], b02 = mat2[2],
b10 = mat2[3], b11 = mat2[4], b12 = mat2[5], b10 = mat2[3], b11 = mat2[4], b12 = mat2[5],
b20 = mat2[6], b21 = mat2[7], b22 = mat2[8]; b20 = mat2[6], b21 = mat2[7], b22 = mat2[8];
dest[0] = b00 * a00 + b01 * a10 + b02 * a20; dest[0] = b00 * a00 + b01 * a10 + b02 * a20;
dest[1] = b00 * a01 + b01 * a11 + b02 * a21; dest[1] = b00 * a01 + b01 * a11 + b02 * a21;
dest[2] = b00 * a02 + b01 * a12 + b02 * a22; dest[2] = b00 * a02 + b01 * a12 + b02 * a22;
dest[3] = b10 * a00 + b11 * a10 + b12 * a20; dest[3] = b10 * a00 + b11 * a10 + b12 * a20;
dest[4] = b10 * a01 + b11 * a11 + b12 * a21; dest[4] = b10 * a01 + b11 * a11 + b12 * a21;
dest[5] = b10 * a02 + b11 * a12 + b12 * a22; dest[5] = b10 * a02 + b11 * a12 + b12 * a22;
dest[6] = b20 * a00 + b21 * a10 + b22 * a20; dest[6] = b20 * a00 + b21 * a10 + b22 * a20;
dest[7] = b20 * a01 + b21 * a11 + b22 * a21; dest[7] = b20 * a01 + b21 * a11 + b22 * a21;
dest[8] = b20 * a02 + b21 * a12 + b22 * a22; dest[8] = b20 * a02 + b21 * a12 + b22 * a22;
return dest; return dest;
} }
PIXI.mat3.clone = function(mat) PIXI.mat3.clone = function(mat)
{ {
var matrix = new PIXI.Matrix(9); var matrix = new PIXI.Matrix(9);
matrix[0] = mat[0]; matrix[0] = mat[0];
matrix[1] = mat[1]; matrix[1] = mat[1];
matrix[2] = mat[2]; matrix[2] = mat[2];
matrix[3] = mat[3]; matrix[3] = mat[3];
matrix[4] = mat[4]; matrix[4] = mat[4];
matrix[5] = mat[5]; matrix[5] = mat[5];
matrix[6] = mat[6]; matrix[6] = mat[6];
matrix[7] = mat[7]; matrix[7] = mat[7];
matrix[8] = mat[8]; matrix[8] = mat[8];
return matrix; return matrix;
} }
PIXI.mat3.transpose = function (mat, dest) PIXI.mat3.transpose = function (mat, dest)
{ {
// If we are transposing ourselves we can skip a few steps but have to cache some values // If we are transposing ourselves we can skip a few steps but have to cache some values
if (!dest || mat === dest) { if (!dest || mat === dest) {
var a01 = mat[1], a02 = mat[2], var a01 = mat[1], a02 = mat[2],
a12 = mat[5]; a12 = mat[5];
@ -149,29 +149,29 @@ PIXI.mat3.transpose = function (mat, dest)
PIXI.mat3.toMat4 = function (mat, dest) PIXI.mat3.toMat4 = function (mat, dest)
{ {
if (!dest) { dest = PIXI.mat4.create(); } if (!dest) { dest = PIXI.mat4.create(); }
dest[15] = 1; dest[15] = 1;
dest[14] = 0; dest[14] = 0;
dest[13] = 0; dest[13] = 0;
dest[12] = 0; dest[12] = 0;
dest[11] = 0; dest[11] = 0;
dest[10] = mat[8]; dest[10] = mat[8];
dest[9] = mat[7]; dest[9] = mat[7];
dest[8] = mat[6]; dest[8] = mat[6];
dest[7] = 0; dest[7] = 0;
dest[6] = mat[5]; dest[6] = mat[5];
dest[5] = mat[4]; dest[5] = mat[4];
dest[4] = mat[3]; dest[4] = mat[3];
dest[3] = 0; dest[3] = 0;
dest[2] = mat[2]; dest[2] = mat[2];
dest[1] = mat[1]; dest[1] = mat[1];
dest[0] = mat[0]; dest[0] = mat[0];
return dest; return dest;
} }
@ -180,82 +180,82 @@ PIXI.mat3.toMat4 = function (mat, dest)
PIXI.mat4.create = function() PIXI.mat4.create = function()
{ {
var matrix = new PIXI.Matrix(16); var matrix = new PIXI.Matrix(16);
matrix[0] = 1; matrix[0] = 1;
matrix[1] = 0; matrix[1] = 0;
matrix[2] = 0; matrix[2] = 0;
matrix[3] = 0; matrix[3] = 0;
matrix[4] = 0; matrix[4] = 0;
matrix[5] = 1; matrix[5] = 1;
matrix[6] = 0; matrix[6] = 0;
matrix[7] = 0; matrix[7] = 0;
matrix[8] = 0; matrix[8] = 0;
matrix[9] = 0; matrix[9] = 0;
matrix[10] = 1; matrix[10] = 1;
matrix[11] = 0; matrix[11] = 0;
matrix[12] = 0; matrix[12] = 0;
matrix[13] = 0; matrix[13] = 0;
matrix[14] = 0; matrix[14] = 0;
matrix[15] = 1; matrix[15] = 1;
return matrix; return matrix;
} }
PIXI.mat4.transpose = function (mat, dest) PIXI.mat4.transpose = function (mat, dest)
{ {
// If we are transposing ourselves we can skip a few steps but have to cache some values // If we are transposing ourselves we can skip a few steps but have to cache some values
if (!dest || mat === dest) if (!dest || mat === dest)
{ {
var a01 = mat[1], a02 = mat[2], a03 = mat[3], var a01 = mat[1], a02 = mat[2], a03 = mat[3],
a12 = mat[6], a13 = mat[7], a12 = mat[6], a13 = mat[7],
a23 = mat[11]; a23 = mat[11];
mat[1] = mat[4]; mat[1] = mat[4];
mat[2] = mat[8]; mat[2] = mat[8];
mat[3] = mat[12]; mat[3] = mat[12];
mat[4] = a01; mat[4] = a01;
mat[6] = mat[9]; mat[6] = mat[9];
mat[7] = mat[13]; mat[7] = mat[13];
mat[8] = a02; mat[8] = a02;
mat[9] = a12; mat[9] = a12;
mat[11] = mat[14]; mat[11] = mat[14];
mat[12] = a03; mat[12] = a03;
mat[13] = a13; mat[13] = a13;
mat[14] = a23; mat[14] = a23;
return mat; return mat;
} }
dest[0] = mat[0]; dest[0] = mat[0];
dest[1] = mat[4]; dest[1] = mat[4];
dest[2] = mat[8]; dest[2] = mat[8];
dest[3] = mat[12]; dest[3] = mat[12];
dest[4] = mat[1]; dest[4] = mat[1];
dest[5] = mat[5]; dest[5] = mat[5];
dest[6] = mat[9]; dest[6] = mat[9];
dest[7] = mat[13]; dest[7] = mat[13];
dest[8] = mat[2]; dest[8] = mat[2];
dest[9] = mat[6]; dest[9] = mat[6];
dest[10] = mat[10]; dest[10] = mat[10];
dest[11] = mat[14]; dest[11] = mat[14];
dest[12] = mat[3]; dest[12] = mat[3];
dest[13] = mat[7]; dest[13] = mat[7];
dest[14] = mat[11]; dest[14] = mat[11];
dest[15] = mat[15]; dest[15] = mat[15];
return dest; return dest;
} }
PIXI.mat4.multiply = function (mat, mat2, dest) PIXI.mat4.multiply = function (mat, mat2, dest)
{ {
if (!dest) { dest = mat; } if (!dest) { dest = mat; }
// Cache the matrix values (makes for huge speed increases!) // Cache the matrix values (makes for huge speed increases!)
var a00 = mat[ 0], a01 = mat[ 1], a02 = mat[ 2], a03 = mat[3]; var a00 = mat[ 0], a01 = mat[ 1], a02 = mat[ 2], a03 = mat[3];
var a10 = mat[ 4], a11 = mat[ 5], a12 = mat[ 6], a13 = mat[7]; var a10 = mat[ 4], a11 = mat[ 5], a12 = mat[ 6], a13 = mat[7];
var a20 = mat[ 8], a21 = mat[ 9], a22 = mat[10], a23 = mat[11]; var a20 = mat[ 8], a21 = mat[ 9], a22 = mat[10], a23 = mat[11];
var a30 = mat[12], a31 = mat[13], a32 = mat[14], a33 = mat[15]; var a30 = mat[12], a31 = mat[13], a32 = mat[14], a33 = mat[15];
// Cache only the current line of the second matrix // Cache only the current line of the second matrix
var b0 = mat2[0], b1 = mat2[1], b2 = mat2[2], b3 = mat2[3]; var b0 = mat2[0], b1 = mat2[1], b2 = mat2[2], b3 = mat2[3];
dest[0] = b0*a00 + b1*a10 + b2*a20 + b3*a30; dest[0] = b0*a00 + b1*a10 + b2*a20 + b3*a30;
dest[1] = b0*a01 + b1*a11 + b2*a21 + b3*a31; dest[1] = b0*a01 + b1*a11 + b2*a21 + b3*a31;

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

@ -12,19 +12,19 @@
*/ */
PIXI.Point = function(x, y) PIXI.Point = function(x, y)
{ {
/** /**
* @property x * @property x
* @type Number * @type Number
* @default 0 * @default 0
*/ */
this.x = x || 0; this.x = x || 0;
/** /**
* @property y * @property y
* @type Number * @type Number
* @default 0 * @default 0
*/ */
this.y = y || 0; this.y = y || 0;
} }
/** /**
@ -35,7 +35,7 @@ PIXI.Point = function(x, y)
*/ */
PIXI.Point.prototype.clone = function() PIXI.Point.prototype.clone = function()
{ {
return new PIXI.Point(this.x, this.y); return new PIXI.Point(this.x, this.y);
} }
// constructor // constructor

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

@ -29,7 +29,7 @@ PIXI.Polygon = function(points)
points = p; points = p;
} }
this.points = points; this.points = points;
} }
/** /**
@ -40,12 +40,12 @@ PIXI.Polygon = function(points)
*/ */
PIXI.Polygon.prototype.clone = function() PIXI.Polygon.prototype.clone = function()
{ {
var points = []; var points = [];
for (var i=0; i<this.points.length; i++) { for (var i=0; i<this.points.length; i++) {
points.push(this.points[i].clone()); points.push(this.points[i].clone());
} }
return new PIXI.Polygon(points); return new PIXI.Polygon(points);
} }
/** /**

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

@ -14,33 +14,33 @@
*/ */
PIXI.Rectangle = function(x, y, width, height) PIXI.Rectangle = function(x, y, width, height)
{ {
/** /**
* @property x * @property x
* @type Number * @type Number
* @default 0 * @default 0
*/ */
this.x = x || 0; this.x = x || 0;
/** /**
* @property y * @property y
* @type Number * @type Number
* @default 0 * @default 0
*/ */
this.y = y || 0; this.y = y || 0;
/** /**
* @property width * @property width
* @type Number * @type Number
* @default 0 * @default 0
*/ */
this.width = width || 0; this.width = width || 0;
/** /**
* @property height * @property height
* @type Number * @type Number
* @default 0 * @default 0
*/ */
this.height = height || 0; this.height = height || 0;
} }
/** /**
@ -51,7 +51,7 @@ PIXI.Rectangle = function(x, y, width, height)
*/ */
PIXI.Rectangle.prototype.clone = function() PIXI.Rectangle.prototype.clone = function()
{ {
return new PIXI.Rectangle(this.x, this.y, this.width, this.height); return new PIXI.Rectangle(this.x, this.y, this.width, this.height);
} }
/** /**
@ -67,18 +67,18 @@ PIXI.Rectangle.prototype.contains = function(x, y)
if(this.width <= 0 || this.height <= 0) if(this.width <= 0 || this.height <= 0)
return false; return false;
var x1 = this.x; var x1 = this.x;
if(x >= x1 && x <= x1 + this.width) if(x >= x1 && x <= x1 + this.width)
{ {
var y1 = this.y; var y1 = this.y;
if(y >= y1 && y <= y1 + this.height) if(y >= y1 && y <= y1 + this.height)
{ {
return true; return true;
} }
} }
return false; return false;
} }
// constructor // constructor

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

@ -10,233 +10,233 @@
*/ */
PIXI.DisplayObject = function() PIXI.DisplayObject = function()
{ {
this.last = this; this.last = this;
this.first = this; this.first = this;
/** /**
* The coordinate of the object relative to the local coordinates of the parent. * The coordinate of the object relative to the local coordinates of the parent.
* *
* @property position * @property position
* @type Point * @type Point
*/ */
this.position = new PIXI.Point(); this.position = new PIXI.Point();
/** /**
* The scale factor of the object. * The scale factor of the object.
* *
* @property scale * @property scale
* @type Point * @type Point
*/ */
this.scale = new PIXI.Point(1,1);//{x:1, y:1}; this.scale = new PIXI.Point(1,1);//{x:1, y:1};
/** /**
* The pivot point of the displayObject that it rotates around * The pivot point of the displayObject that it rotates around
* *
* @property pivot * @property pivot
* @type Point * @type Point
*/ */
this.pivot = new PIXI.Point(0,0); this.pivot = new PIXI.Point(0,0);
/** /**
* The rotation of the object in radians. * The rotation of the object in radians.
* *
* @property rotation * @property rotation
* @type Number * @type Number
*/ */
this.rotation = 0; this.rotation = 0;
/** /**
* The opacity of the object. * The opacity of the object.
* *
* @property alpha * @property alpha
* @type Number * @type Number
*/ */
this.alpha = 1; this.alpha = 1;
/** /**
* The visibility of the object. * The visibility of the object.
* *
* @property visible * @property visible
* @type Boolean * @type Boolean
*/ */
this.visible = true; this.visible = true;
/** /**
* This is the defined area that will pick up mouse / touch events. It is null by default. * This is the defined area that will pick up mouse / touch events. It is null by default.
* Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)
* *
* @property hitArea * @property hitArea
* @type Rectangle|Circle|Ellipse|Polygon * @type Rectangle|Circle|Ellipse|Polygon
*/ */
this.hitArea = null; this.hitArea = null;
/** /**
* This is used to indicate if the displayObject should display a mouse hand cursor on rollover * This is used to indicate if the displayObject should display a mouse hand cursor on rollover
* *
* @property buttonMode * @property buttonMode
* @type Boolean * @type Boolean
*/ */
this.buttonMode = false; this.buttonMode = false;
/** /**
* Can this object be rendered * Can this object be rendered
* *
* @property renderable * @property renderable
* @type Boolean * @type Boolean
*/ */
this.renderable = false; this.renderable = false;
/** /**
* [read-only] The display object container that contains this display object. * [read-only] The display object container that contains this display object.
* *
* @property parent * @property parent
* @type DisplayObjectContainer * @type DisplayObjectContainer
* @readOnly * @readOnly
*/ */
this.parent = null; this.parent = null;
/** /**
* [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.
* *
* @property stage * @property stage
* @type Stage * @type Stage
* @readOnly * @readOnly
*/ */
this.stage = null; this.stage = null;
/** /**
* [read-only] The multiplied alpha of the displayobject * [read-only] The multiplied alpha of the displayobject
* *
* @property worldAlpha * @property worldAlpha
* @type Number * @type Number
* @readOnly * @readOnly
*/ */
this.worldAlpha = 1; this.worldAlpha = 1;
/** /**
* [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property
* *
* @property _interactive * @property _interactive
* @type Boolean * @type Boolean
* @readOnly * @readOnly
* @private * @private
*/ */
this._interactive = false; this._interactive = false;
/** /**
* [read-only] Current transform of the object based on world (parent) factors * [read-only] Current transform of the object based on world (parent) factors
* *
* @property worldTransform * @property worldTransform
* @type Mat3 * @type Mat3
* @readOnly * @readOnly
* @private * @private
*/ */
this.worldTransform = PIXI.mat3.create()//mat3.identity(); this.worldTransform = PIXI.mat3.create()//mat3.identity();
/** /**
* [read-only] Current transform of the object locally * [read-only] Current transform of the object locally
* *
* @property localTransform * @property localTransform
* @type Mat3 * @type Mat3
* @readOnly * @readOnly
* @private * @private
*/ */
this.localTransform = PIXI.mat3.create()//mat3.identity(); this.localTransform = PIXI.mat3.create()//mat3.identity();
/** /**
* [NYI] Unkown * [NYI] Unkown
* *
* @property color * @property color
* @type Array<> * @type Array<>
* @private * @private
*/ */
this.color = []; this.color = [];
/** /**
* [NYI] Holds whether or not this object is dynamic, for rendering optimization * [NYI] Holds whether or not this object is dynamic, for rendering optimization
* *
* @property dynamic * @property dynamic
* @type Boolean * @type Boolean
* @private * @private
*/ */
this.dynamic = true; this.dynamic = true;
// chach that puppy! // chach that puppy!
this._sr = 0; this._sr = 0;
this._cr = 1; this._cr = 1;
/* /*
* MOUSE Callbacks * MOUSE Callbacks
*/ */
/** /**
* A callback that is used when the users clicks on the displayObject with their mouse * A callback that is used when the users clicks on the displayObject with their mouse
* @method click * @method click
* @param interactionData {InteractionData} * @param interactionData {InteractionData}
*/ */
/** /**
* A callback that is used when the user clicks the mouse down over the sprite * A callback that is used when the user clicks the mouse down over the sprite
* @method mousedown * @method mousedown
* @param interactionData {InteractionData} * @param interactionData {InteractionData}
*/ */
/** /**
* A callback that is used when the user releases the mouse that was over the displayObject * 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 * for this callback to be fired the mouse must have been pressed down over the displayObject
* @method mouseup * @method mouseup
* @param interactionData {InteractionData} * @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 * 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 * for this callback to be fired, The touch must have started over the displayObject
* @method mouseupoutside * @method mouseupoutside
* @param interactionData {InteractionData} * @param interactionData {InteractionData}
*/ */
/** /**
* A callback that is used when the users mouse rolls over the displayObject * A callback that is used when the users mouse rolls over the displayObject
* @method mouseover * @method mouseover
* @param interactionData {InteractionData} * @param interactionData {InteractionData}
*/ */
/** /**
* A callback that is used when the users mouse leaves the displayObject * A callback that is used when the users mouse leaves the displayObject
* @method mouseout * @method mouseout
* @param interactionData {InteractionData} * @param interactionData {InteractionData}
*/ */
/* /*
* TOUCH Callbacks * TOUCH Callbacks
*/ */
/** /**
* A callback that is used when the users taps on the sprite with their finger * A callback that is used when the users taps on the sprite with their finger
* basically a touch version of click * basically a touch version of click
* @method tap * @method tap
* @param interactionData {InteractionData} * @param interactionData {InteractionData}
*/ */
/** /**
* A callback that is used when the user touch's over the displayObject * A callback that is used when the user touch's over the displayObject
* @method touchstart * @method touchstart
* @param interactionData {InteractionData} * @param interactionData {InteractionData}
*/ */
/** /**
* A callback that is used when the user releases a touch over the displayObject * A callback that is used when the user releases a touch over the displayObject
* @method touchend * @method touchend
* @param interactionData {InteractionData} * @param interactionData {InteractionData}
*/ */
/** /**
* A callback that is used when the user releases the touch that was over the displayObject * 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 * for this callback to be fired, The touch must have started over the sprite
* @method touchendoutside * @method touchendoutside
* @param interactionData {InteractionData} * @param interactionData {InteractionData}
*/ */
} }
// constructor // constructor
@ -252,7 +252,7 @@ PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject;
*/ */
PIXI.DisplayObject.prototype.setInteractive = function(interactive) PIXI.DisplayObject.prototype.setInteractive = function(interactive)
{ {
this.interactive = interactive; this.interactive = interactive;
} }
/** /**
@ -267,11 +267,11 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'interactive', {
return this._interactive; return this._interactive;
}, },
set: function(value) { set: function(value) {
this._interactive = value; this._interactive = value;
// TODO more to be done here.. // TODO more to be done here..
// need to sort out a re-crawl! // need to sort out a re-crawl!
if(this.stage)this.stage.dirty = true; if(this.stage)this.stage.dirty = true;
} }
}); });
@ -293,11 +293,11 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'mask', {
if(value) if(value)
{ {
this.addFilter(value) this.addFilter(value)
} }
else else
{ {
this.removeFilter(); this.removeFilter();
} }
} }
}); });
@ -311,93 +311,88 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'mask', {
*/ */
PIXI.DisplayObject.prototype.addFilter = function(mask) PIXI.DisplayObject.prototype.addFilter = function(mask)
{ {
if(this.filter)return; if(this.filter)return;
this.filter = true; this.filter = true;
// insert a filter block.. // insert a filter block..
var start = new PIXI.FilterBlock(); var start = new PIXI.FilterBlock();
var end = new PIXI.FilterBlock(); var end = new PIXI.FilterBlock();
start.mask = mask; start.mask = mask;
end.mask = mask; end.mask = mask;
start.first = start.last = this; start.first = start.last = this;
end.first = end.last = this; end.first = end.last = this;
start.open = true; start.open = true;
/* /*
* insert start * insert start
*/ */
var childFirst, childLast, nextObject, previousObject;
childFirst = childLast = start;
var childFirst = start previousObject = this.first._iPrev;
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(previousObject) if(nextObject)
{ {
nextObject = previousObject._iNext; nextObject._iPrev = childLast;
childFirst._iPrev = previousObject; childLast._iNext = nextObject;
previousObject._iNext = childFirst; }
}
else
{
nextObject = this;
}
if(nextObject)
{
nextObject._iPrev = childLast;
childLast._iNext = nextObject;
}
// now insert the end filter block.. // now insert the end filter block..
/* /*
* insert end filter * insert end filter
*/ */
var childFirst = end childFirst = childLast = end
var childLast = end nextObject = previousObject = null;
var nextObject = null;
var previousObject = null;
previousObject = this.last; previousObject = this.last;
nextObject = previousObject._iNext; nextObject = previousObject._iNext;
if(nextObject) if(nextObject)
{ {
nextObject._iPrev = childLast; nextObject._iPrev = childLast;
childLast._iNext = nextObject; childLast._iNext = nextObject;
} }
childFirst._iPrev = previousObject; childFirst._iPrev = previousObject;
previousObject._iNext = childFirst; previousObject._iNext = childFirst;
var updateLast = this; var updateLast = this;
var prevLast = this.last; var prevLast = this.last;
while(updateLast) while(updateLast)
{ {
if(updateLast.last == prevLast) if(updateLast.last == prevLast)
{ {
updateLast.last = end; updateLast.last = end;
} }
updateLast = updateLast.parent; updateLast = updateLast.parent;
} }
this.first = start; this.first = start;
// if webGL... // if webGL...
if(this.__renderGroup) if(this.__renderGroup)
{ {
this.__renderGroup.addFilterBlocks(start, end); this.__renderGroup.addFilterBlocks(start, end);
} }
mask.renderable = false; mask.renderable = false;
} }
@ -409,49 +404,47 @@ PIXI.DisplayObject.prototype.addFilter = function(mask)
*/ */
PIXI.DisplayObject.prototype.removeFilter = function() PIXI.DisplayObject.prototype.removeFilter = function()
{ {
if(!this.filter)return; if(!this.filter)return;
this.filter = false; this.filter = false;
// modify the list.. // modify the list..
var startBlock = this.first; var startBlock = this.first,
lastBlock = this.last,
nextObject = startBlock._iNext,
previousObject = startBlock._iPrev;
var nextObject = startBlock._iNext; if (nextObject) nextObject._iPrev = previousObject;
var previousObject = startBlock._iPrev; if (previousObject) previousObject._iNext = nextObject;
if(nextObject)nextObject._iPrev = previousObject; this.first = startBlock._iNext;
if(previousObject)previousObject._iNext = nextObject;
this.first = startBlock._iNext;
// remove the end filter // remove the end filter
var lastBlock = this.last; nextObject = lastBlock._iNext;
previousObject = lastBlock._iPrev;
var nextObject = lastBlock._iNext; if (nextObject) nextObject._iPrev = previousObject;
var previousObject = lastBlock._iPrev; previousObject._iNext = nextObject;
if(nextObject)nextObject._iPrev = previousObject; // this is always true too!
previousObject._iNext = nextObject; 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;
}
// this is always true too! var mask = startBlock.mask
var tempLast = lastBlock._iPrev; mask.renderable = true;
// 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;
}
var mask = startBlock.mask // if webGL...
mask.renderable = true; if(this.__renderGroup)
{
// if webGL... this.__renderGroup.removeFilterBlocks(startBlock, lastBlock);
if(this.__renderGroup) }
{
this.__renderGroup.removeFilterBlocks(startBlock, lastBlock);
}
} }
/* /*
@ -462,27 +455,27 @@ PIXI.DisplayObject.prototype.removeFilter = function()
*/ */
PIXI.DisplayObject.prototype.updateTransform = function() PIXI.DisplayObject.prototype.updateTransform = function()
{ {
// TODO OPTIMIZE THIS!! with dirty // TODO OPTIMIZE THIS!! with dirty
if(this.rotation !== this.rotationCache) if(this.rotation !== this.rotationCache)
{ {
this.rotationCache = this.rotation; this.rotationCache = this.rotation;
this._sr = Math.sin(this.rotation); this._sr = Math.sin(this.rotation);
this._cr = Math.cos(this.rotation); this._cr = Math.cos(this.rotation);
} }
var localTransform = this.localTransform; var localTransform = this.localTransform;
var parentTransform = this.parent.worldTransform; var parentTransform = this.parent.worldTransform;
var worldTransform = this.worldTransform; var worldTransform = this.worldTransform;
//console.log(localTransform) //console.log(localTransform)
localTransform[0] = this._cr * this.scale.x; localTransform[0] = this._cr * this.scale.x;
localTransform[1] = -this._sr * this.scale.y localTransform[1] = -this._sr * this.scale.y
localTransform[3] = this._sr * this.scale.x; localTransform[3] = this._sr * this.scale.x;
localTransform[4] = this._cr * this.scale.y; localTransform[4] = this._cr * this.scale.y;
// TODO --> do we even need a local matrix??? // TODO --> do we even need a local matrix???
var px = this.pivot.x; var px = this.pivot.x;
var py = this.pivot.y; var py = this.pivot.y;
// Cache the matrix values (makes for huge speed increases!) // 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], var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1],
@ -491,8 +484,8 @@ PIXI.DisplayObject.prototype.updateTransform = function()
b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2],
b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5];
localTransform[2] = a02 localTransform[2] = a02
localTransform[5] = a12 localTransform[5] = a12
worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[0] = b00 * a00 + b01 * a10;
worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[1] = b00 * a01 + b01 * a11;
@ -502,11 +495,11 @@ PIXI.DisplayObject.prototype.updateTransform = function()
worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[4] = b10 * a01 + b11 * a11;
worldTransform[5] = b10 * a02 + b11 * a12 + b12; worldTransform[5] = b10 * a02 + b11 * a12 + b12;
// because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo!
// mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform);
this.worldAlpha = this.alpha * this.parent.worldAlpha; this.worldAlpha = this.alpha * this.parent.worldAlpha;
this.vcount = PIXI.visibleCount; this.vcount = PIXI.visibleCount;
} }

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

@ -13,16 +13,16 @@
*/ */
PIXI.DisplayObjectContainer = function() PIXI.DisplayObjectContainer = function()
{ {
PIXI.DisplayObject.call( this ); PIXI.DisplayObject.call( this );
/** /**
* [read-only] The of children of this container. * [read-only] The of children of this container.
* *
* @property children * @property children
* @type Array<DisplayObject> * @type Array<DisplayObject>
* @readOnly * @readOnly
*/ */
this.children = []; this.children = [];
} }
// constructor // constructor
@ -49,83 +49,80 @@ Object.defineProperty(PIXI.DisplayObjectContainer.prototype, 'visible', {
*/ */
PIXI.DisplayObjectContainer.prototype.addChild = function(child) PIXI.DisplayObjectContainer.prototype.addChild = function(child)
{ {
if(child.parent != undefined) if (child.parent) {
{ //// COULD BE THIS???
child.parent.removeChild(child);
// return;
}
child.parent = this;
//// COULD BE THIS??? this.children.push(child);
child.parent.removeChild(child);
// return;
}
child.parent = this; // update the stage refference..
this.children.push(child); if(this.stage)
{
var tmpChild = child;
do
{
if(tmpChild.interactive)this.stage.dirty = true;
tmpChild.stage = this.stage;
tmpChild = tmpChild._iNext;
}
while(tmpChild)
}
// update the stage refference.. // LINKED LIST //
if(this.stage) // modify the list..
{ var childFirst = child.first
var tmpChild = child; var childLast = child.last;
do var nextObject;
{ var previousObject;
if(tmpChild.interactive)this.stage.dirty = true;
tmpChild.stage = this.stage;
tmpChild = tmpChild._iNext;
}
while(tmpChild)
}
// LINKED LIST // // this could be wrong if there is a filter??
if(this.filter)
{
previousObject = this.last._iPrev;
}
else
{
previousObject = this.last;
}
// modify the list.. nextObject = previousObject._iNext;
var childFirst = child.first
var childLast = child.last;
var nextObject;
var previousObject;
// this could be wrong if there is a filter?? // always true in this case
if(this.filter) // need to make sure the parents last is updated too
{ var updateLast = this;
previousObject = this.last._iPrev; var prevLast = previousObject;
}
else
{
previousObject = this.last;
}
nextObject = previousObject._iNext; while(updateLast)
{
if(updateLast.last == prevLast)
{
updateLast.last = child.last;
}
updateLast = updateLast.parent;
}
// always true in this case if(nextObject)
// need to make sure the parents last is updated too {
var updateLast = this; nextObject._iPrev = childLast;
var prevLast = previousObject; childLast._iNext = nextObject;
}
while(updateLast) childFirst._iPrev = previousObject;
{ previousObject._iNext = childFirst;
if(updateLast.last == prevLast)
{
updateLast.last = child.last;
}
updateLast = updateLast.parent;
}
if(nextObject) // need to remove any render groups..
{ if(this.__renderGroup)
nextObject._iPrev = childLast; {
childLast._iNext = nextObject; // 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..
childFirst._iPrev = previousObject; this.__renderGroup.addDisplayObjectAndChildren(child);
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);
}
} }
@ -138,82 +135,81 @@ PIXI.DisplayObjectContainer.prototype.addChild = function(child)
*/ */
PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
{ {
if(index >= 0 && index <= this.children.length) if(index >= 0 && index <= this.children.length)
{ {
if(child.parent != undefined) if (child.parent) {
{ child.parent.removeChild(child);
child.parent.removeChild(child); }
} child.parent = this;
child.parent = this;
if(this.stage) if(this.stage)
{ {
var tmpChild = child; var tmpChild = child;
do do
{ {
if(tmpChild.interactive)this.stage.dirty = true; if(tmpChild.interactive)this.stage.dirty = true;
tmpChild.stage = this.stage; tmpChild.stage = this.stage;
tmpChild = tmpChild._iNext; tmpChild = tmpChild._iNext;
} }
while(tmpChild) while(tmpChild)
} }
// modify the list.. // modify the list..
var childFirst = child.first; var childFirst = child.first;
var childLast = child.last; var childLast = child.last;
var nextObject; var nextObject;
var previousObject; var previousObject;
if(index == this.children.length) if(index === this.children.length)
{ {
previousObject = this.last; previousObject = this.last;
var updateLast = this; var updateLast = this;
var prevLast = this.last; var prevLast = this.last;
while(updateLast) while(updateLast)
{ {
if(updateLast.last == prevLast) if(updateLast.last == prevLast)
{ {
updateLast.last = child.last; updateLast.last = child.last;
} }
updateLast = updateLast.parent; updateLast = updateLast.parent;
} }
} }
else if(index == 0) else if(!index)
{ {
previousObject = this; previousObject = this;
} }
else else
{ {
previousObject = this.children[index-1].last; previousObject = this.children[index-1].last;
} }
nextObject = previousObject._iNext; nextObject = previousObject._iNext;
// always true in this case // always true in this case
if(nextObject) if(nextObject)
{ {
nextObject._iPrev = childLast; nextObject._iPrev = childLast;
childLast._iNext = nextObject; childLast._iNext = nextObject;
} }
childFirst._iPrev = previousObject; childFirst._iPrev = previousObject;
previousObject._iNext = childFirst; previousObject._iNext = childFirst;
this.children.splice(index, 0, child); this.children.splice(index, 0, child);
// need to remove any render groups.. // need to remove any render groups..
if(this.__renderGroup) if(this.__renderGroup)
{ {
// being used by a renderTexture.. if it exists then it must be from a render texture; // being used by a renderTexture.. if it exists then it must be from a render texture;
if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child);
// add them to the new render group.. // add them to the new render group..
this.__renderGroup.addDisplayObjectAndChildren(child); this.__renderGroup.addDisplayObjectAndChildren(child);
} }
} }
else else
{ {
throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length);
} }
} }
/** /**
@ -226,43 +222,43 @@ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index)
*/ */
PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2)
{ {
/* /*
* this funtion needs to be recoded.. * this funtion needs to be recoded..
* can be done a lot faster.. * can be done a lot faster..
*/ */
return; return;
// need to fix this function :/ // need to fix this function :/
/* /*
// TODO I already know this?? // TODO I already know this??
var index = this.children.indexOf( child ); var index = this.children.indexOf( child );
var index2 = this.children.indexOf( child2 ); var index2 = this.children.indexOf( child2 );
if ( index !== -1 && index2 !== -1 ) if ( index !== -1 && index2 !== -1 )
{ {
// cool // cool
/* /*
if(this.stage) if(this.stage)
{ {
// this is to satisfy the webGL batching.. // this is to satisfy the webGL batching..
// TODO sure there is a nicer way to achieve this! // TODO sure there is a nicer way to achieve this!
this.stage.__removeChild(child); this.stage.__removeChild(child);
this.stage.__removeChild(child2); this.stage.__removeChild(child2);
this.stage.__addChild(child); this.stage.__addChild(child);
this.stage.__addChild(child2); this.stage.__addChild(child2);
} }
// swap the positions.. // swap the positions..
this.children[index] = child2; this.children[index] = child2;
this.children[index2] = child; this.children[index2] = child;
} }
else else
{ {
throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this);
}*/ }*/
} }
/** /**
@ -273,14 +269,14 @@ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2)
*/ */
PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) PIXI.DisplayObjectContainer.prototype.getChildAt = function(index)
{ {
if(index >= 0 && index < this.children.length) if(index >= 0 && index < this.children.length)
{ {
return this.children[index]; return this.children[index];
} }
else else
{ {
throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this);
} }
} }
/** /**
@ -291,62 +287,62 @@ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index)
*/ */
PIXI.DisplayObjectContainer.prototype.removeChild = function(child) PIXI.DisplayObjectContainer.prototype.removeChild = function(child)
{ {
var index = this.children.indexOf( child ); var index = this.children.indexOf( child );
if ( index !== -1 ) if ( index !== -1 )
{ {
// unlink // // unlink //
// modify the list.. // modify the list..
var childFirst = child.first; var childFirst = child.first;
var childLast = child.last; var childLast = child.last;
var nextObject = childLast._iNext; var nextObject = childLast._iNext;
var previousObject = childFirst._iPrev; var previousObject = childFirst._iPrev;
if(nextObject)nextObject._iPrev = previousObject; if(nextObject)nextObject._iPrev = previousObject;
previousObject._iNext = nextObject; previousObject._iNext = nextObject;
if(this.last == childLast) if(this.last == childLast)
{ {
var tempLast = childFirst._iPrev; var tempLast = childFirst._iPrev;
// need to make sure the parents last is updated too // need to make sure the parents last is updated too
var updateLast = this; var updateLast = this;
while(updateLast.last == childLast.last) while(updateLast.last == childLast.last)
{ {
updateLast.last = tempLast; updateLast.last = tempLast;
updateLast = updateLast.parent; updateLast = updateLast.parent;
if(!updateLast)break; if(!updateLast)break;
} }
} }
childLast._iNext = null; childLast._iNext = null;
childFirst._iPrev = null; childFirst._iPrev = null;
// update the stage reference.. // update the stage reference..
if(this.stage) if(this.stage)
{ {
var tmpChild = child; var tmpChild = child;
do do
{ {
if(tmpChild.interactive)this.stage.dirty = true; if(tmpChild.interactive)this.stage.dirty = true;
tmpChild.stage = null; tmpChild.stage = null;
tmpChild = tmpChild._iNext; tmpChild = tmpChild._iNext;
} }
while(tmpChild) while(tmpChild)
} }
// webGL trim // webGL trim
if(child.__renderGroup) if(child.__renderGroup)
{ {
child.__renderGroup.removeDisplayObjectAndChildren(child); child.__renderGroup.removeDisplayObjectAndChildren(child);
} }
child.parent = undefined; child.parent = undefined;
this.children.splice( index, 1 ); this.children.splice( index, 1 );
} }
else else
{ {
throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this);
} }
} }
/* /*
@ -357,12 +353,12 @@ PIXI.DisplayObjectContainer.prototype.removeChild = function(child)
*/ */
PIXI.DisplayObjectContainer.prototype.updateTransform = function() PIXI.DisplayObjectContainer.prototype.updateTransform = function()
{ {
if(!this.visible)return; if(!this.visible)return;
PIXI.DisplayObject.prototype.updateTransform.call( this ); PIXI.DisplayObject.prototype.updateTransform.call( this );
for(var i=0,j=this.children.length; i<j; i++) for(var i=0,j=this.children.length; i<j; i++)
{ {
this.children[i].updateTransform(); this.children[i].updateTransform();
} }
} }

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

@ -12,60 +12,60 @@
*/ */
PIXI.MovieClip = function(textures) PIXI.MovieClip = function(textures)
{ {
PIXI.Sprite.call(this, textures[0]); PIXI.Sprite.call(this, textures[0]);
/** /**
* The array of textures that make up the animation * The array of textures that make up the animation
* *
* @property textures * @property textures
* @type Array * @type Array
*/ */
this.textures = textures; this.textures = textures;
/** /**
* The speed that the MovieClip will play at. Higher is faster, lower is slower * The speed that the MovieClip will play at. Higher is faster, lower is slower
* *
* @property animationSpeed * @property animationSpeed
* @type Number * @type Number
* @default 1 * @default 1
*/ */
this.animationSpeed = 1; this.animationSpeed = 1;
/** /**
* Whether or not the movie clip repeats after playing. * Whether or not the movie clip repeats after playing.
* *
* @property loop * @property loop
* @type Boolean * @type Boolean
* @default true * @default true
*/ */
this.loop = true; this.loop = true;
/** /**
* Function to call when a MovieClip finishes playing * Function to call when a MovieClip finishes playing
* *
* @property onComplete * @property onComplete
* @type Function * @type Function
*/ */
this.onComplete = null; this.onComplete = null;
/** /**
* [read-only] The index MovieClips current frame (this may not have to be a whole number) * [read-only] The index MovieClips current frame (this may not have to be a whole number)
* *
* @property currentFrame * @property currentFrame
* @type Number * @type Number
* @default 0 * @default 0
* @readOnly * @readOnly
*/ */
this.currentFrame = 0; this.currentFrame = 0;
/** /**
* [read-only] Indicates if the MovieClip is currently playing * [read-only] Indicates if the MovieClip is currently playing
* *
* @property playing * @property playing
* @type Boolean * @type Boolean
* @readOnly * @readOnly
*/ */
this.playing = false; this.playing = false;
} }
// constructor // constructor
@ -96,7 +96,7 @@ Object.defineProperty( PIXI.MovieClip.prototype, 'totalFrames', {
*/ */
PIXI.MovieClip.prototype.stop = function() PIXI.MovieClip.prototype.stop = function()
{ {
this.playing = false; this.playing = false;
} }
/** /**
@ -106,7 +106,7 @@ PIXI.MovieClip.prototype.stop = function()
*/ */
PIXI.MovieClip.prototype.play = function() PIXI.MovieClip.prototype.play = function()
{ {
this.playing = true; this.playing = true;
} }
/** /**
@ -117,10 +117,10 @@ PIXI.MovieClip.prototype.play = function()
*/ */
PIXI.MovieClip.prototype.gotoAndStop = function(frameNumber) PIXI.MovieClip.prototype.gotoAndStop = function(frameNumber)
{ {
this.playing = false; this.playing = false;
this.currentFrame = frameNumber; this.currentFrame = frameNumber;
var round = (this.currentFrame + 0.5) | 0; var round = (this.currentFrame + 0.5) | 0;
this.setTexture(this.textures[round % this.textures.length]); this.setTexture(this.textures[round % this.textures.length]);
} }
/** /**
@ -131,8 +131,8 @@ PIXI.MovieClip.prototype.gotoAndStop = function(frameNumber)
*/ */
PIXI.MovieClip.prototype.gotoAndPlay = function(frameNumber) PIXI.MovieClip.prototype.gotoAndPlay = function(frameNumber)
{ {
this.currentFrame = frameNumber; this.currentFrame = frameNumber;
this.playing = true; this.playing = true;
} }
/* /*
@ -143,24 +143,24 @@ PIXI.MovieClip.prototype.gotoAndPlay = function(frameNumber)
*/ */
PIXI.MovieClip.prototype.updateTransform = function() PIXI.MovieClip.prototype.updateTransform = function()
{ {
PIXI.Sprite.prototype.updateTransform.call(this); PIXI.Sprite.prototype.updateTransform.call(this);
if(!this.playing)return; if(!this.playing)return;
this.currentFrame += this.animationSpeed; this.currentFrame += this.animationSpeed;
var round = (this.currentFrame + 0.5) | 0; var round = (this.currentFrame + 0.5) | 0;
if(this.loop || round < this.textures.length) if(this.loop || round < this.textures.length)
{ {
this.setTexture(this.textures[round % this.textures.length]); this.setTexture(this.textures[round % this.textures.length]);
} }
else if(round >= this.textures.length) else if(round >= this.textures.length)
{ {
this.gotoAndStop(this.textures.length - 1); this.gotoAndStop(this.textures.length - 1);
if(this.onComplete) if(this.onComplete)
{ {
this.onComplete(); this.onComplete();
} }
} }
} }

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

@ -18,65 +18,65 @@ PIXI.blendModes.SCREEN = 1;
*/ */
PIXI.Sprite = function(texture) PIXI.Sprite = function(texture)
{ {
PIXI.DisplayObjectContainer.call( this ); PIXI.DisplayObjectContainer.call( this );
/** /**
* The anchor sets the origin point of the texture. * The anchor sets the origin point of the texture.
* The default is 0,0 this means the textures origin is the top left * The default is 0,0 this means the textures origin is the top left
* Setting than anchor to 0.5,0.5 means the textures origin is centered * Setting than anchor to 0.5,0.5 means the textures origin is centered
* Setting the anchor to 1,1 would mean the textures origin points will be the bottom right * Setting the anchor to 1,1 would mean the textures origin points will be the bottom right
* *
* @property anchor * @property anchor
* @type Point * @type Point
*/ */
this.anchor = new PIXI.Point(); this.anchor = new PIXI.Point();
/** /**
* The texture that the sprite is using * The texture that the sprite is using
* *
* @property texture * @property texture
* @type Texture * @type Texture
*/ */
this.texture = texture; this.texture = texture;
/** /**
* The blend mode of sprite. * The blend mode of sprite.
* currently supports PIXI.blendModes.NORMAL and PIXI.blendModes.SCREEN * currently supports PIXI.blendModes.NORMAL and PIXI.blendModes.SCREEN
* *
* @property blendMode * @property blendMode
* @type Number * @type Number
*/ */
this.blendMode = PIXI.blendModes.NORMAL; this.blendMode = PIXI.blendModes.NORMAL;
/** /**
* The width of the sprite (this is initially set by the texture) * The width of the sprite (this is initially set by the texture)
* *
* @property _width * @property _width
* @type Number * @type Number
* @private * @private
*/ */
this._width = 0; this._width = 0;
/** /**
* The height of the sprite (this is initially set by the texture) * The height of the sprite (this is initially set by the texture)
* *
* @property _height * @property _height
* @type Number * @type Number
* @private * @private
*/ */
this._height = 0; this._height = 0;
if(texture.baseTexture.hasLoaded) if(texture.baseTexture.hasLoaded)
{ {
this.updateFrame = true; this.updateFrame = true;
} }
else else
{ {
this.onTextureUpdateBind = this.onTextureUpdate.bind(this); this.onTextureUpdateBind = this.onTextureUpdate.bind(this);
this.texture.addEventListener( 'update', this.onTextureUpdateBind ); this.texture.addEventListener( 'update', this.onTextureUpdateBind );
} }
this.renderable = true; this.renderable = true;
} }
// constructor // constructor
@ -94,7 +94,7 @@ Object.defineProperty(PIXI.Sprite.prototype, 'width', {
return this.scale.x * this.texture.frame.width; return this.scale.x * this.texture.frame.width;
}, },
set: function(value) { set: function(value) {
this.scale.x = value / this.texture.frame.width this.scale.x = value / this.texture.frame.width
this._width = value; this._width = value;
} }
}); });
@ -110,7 +110,7 @@ Object.defineProperty(PIXI.Sprite.prototype, 'height', {
return this.scale.y * this.texture.frame.height; return this.scale.y * this.texture.frame.height;
}, },
set: function(value) { set: function(value) {
this.scale.y = value / this.texture.frame.height this.scale.y = value / this.texture.frame.height
this._height = value; this._height = value;
} }
}); });
@ -123,23 +123,23 @@ Object.defineProperty(PIXI.Sprite.prototype, 'height', {
*/ */
PIXI.Sprite.prototype.setTexture = function(texture) PIXI.Sprite.prototype.setTexture = function(texture)
{ {
// stop current texture; // stop current texture;
if(this.texture.baseTexture != texture.baseTexture) if(this.texture.baseTexture != texture.baseTexture)
{ {
this.textureChange = true; this.textureChange = true;
this.texture = texture; this.texture = texture;
if(this.__renderGroup) if(this.__renderGroup)
{ {
this.__renderGroup.updateTexture(this); this.__renderGroup.updateTexture(this);
} }
} }
else else
{ {
this.texture = texture; this.texture = texture;
} }
this.updateFrame = true; this.updateFrame = true;
} }
/** /**
@ -151,13 +151,13 @@ PIXI.Sprite.prototype.setTexture = function(texture)
*/ */
PIXI.Sprite.prototype.onTextureUpdate = function(event) PIXI.Sprite.prototype.onTextureUpdate = function(event)
{ {
//this.texture.removeEventListener( 'update', this.onTextureUpdateBind ); //this.texture.removeEventListener( 'update', this.onTextureUpdateBind );
// so if _width is 0 then width was not set.. // so if _width is 0 then width was not set..
if(this._width)this.scale.x = this._width / this.texture.frame.width; if(this._width)this.scale.x = this._width / this.texture.frame.width;
if(this._height)this.scale.y = this._height / this.texture.frame.height; if(this._height)this.scale.y = this._height / this.texture.frame.height;
this.updateFrame = true; this.updateFrame = true;
} }
// some helper functions.. // some helper functions..
@ -174,9 +174,9 @@ PIXI.Sprite.prototype.onTextureUpdate = function(event)
*/ */
PIXI.Sprite.fromFrame = function(frameId) PIXI.Sprite.fromFrame = function(frameId)
{ {
var texture = PIXI.TextureCache[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); return new PIXI.Sprite(texture);
} }
/** /**
@ -191,7 +191,7 @@ PIXI.Sprite.fromFrame = function(frameId)
*/ */
PIXI.Sprite.fromImage = function(imageId) PIXI.Sprite.fromImage = function(imageId)
{ {
var texture = PIXI.Texture.fromImage(imageId); var texture = PIXI.Texture.fromImage(imageId);
return new PIXI.Sprite(texture); return new PIXI.Sprite(texture);
} }

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

@ -9,58 +9,58 @@
* @extends DisplayObjectContainer * @extends DisplayObjectContainer
* @constructor * @constructor
* @param backgroundColor {Number} the background color of the stage, easiest way to pass this in is in hex format * @param backgroundColor {Number} the background color of the stage, easiest way to pass this in is in hex format
* like: 0xFFFFFF for white * like: 0xFFFFFF for white
*/ */
PIXI.Stage = function(backgroundColor) PIXI.Stage = function(backgroundColor)
{ {
PIXI.DisplayObjectContainer.call( this ); PIXI.DisplayObjectContainer.call( this );
/** /**
* [read-only] Current transform of the object based on world (parent) factors * [read-only] Current transform of the object based on world (parent) factors
* *
* @property worldTransform * @property worldTransform
* @type Mat3 * @type Mat3
* @readOnly * @readOnly
* @private * @private
*/ */
this.worldTransform = PIXI.mat3.create(); this.worldTransform = PIXI.mat3.create();
/** /**
* Whether or not the stage is interactive * Whether or not the stage is interactive
* *
* @property interactive * @property interactive
* @type Boolean * @type Boolean
*/ */
this.interactive = true; this.interactive = true;
/** /**
* The interaction manage for this stage, manages all interactive activity on the stage * The interaction manage for this stage, manages all interactive activity on the stage
* *
* @property interactive * @property interactive
* @type InteractionManager * @type InteractionManager
*/ */
this.interactionManager = new PIXI.InteractionManager(this); this.interactionManager = new PIXI.InteractionManager(this);
/** /**
* Whether the stage is dirty and needs to have interactions updated * Whether the stage is dirty and needs to have interactions updated
* *
* @property dirty * @property dirty
* @type Boolean * @type Boolean
* @private * @private
*/ */
this.dirty = true; this.dirty = true;
this.__childrenAdded = []; this.__childrenAdded = [];
this.__childrenRemoved = []; this.__childrenRemoved = [];
//the stage is it's own stage //the stage is it's own stage
this.stage = this; this.stage = this;
//optimize hit detection a bit //optimize hit detection a bit
this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000);
this.setBackgroundColor(backgroundColor); this.setBackgroundColor(backgroundColor);
this.worldVisible = true; this.worldVisible = true;
} }
// constructor // constructor
@ -76,7 +76,7 @@ PIXI.Stage.prototype.constructor = PIXI.Stage;
*/ */
PIXI.Stage.prototype.setInteractionDelegate = function(domElement) PIXI.Stage.prototype.setInteractionDelegate = function(domElement)
{ {
this.interactionManager.setTargetDomElement( domElement ); this.interactionManager.setTargetDomElement( domElement );
} }
/* /*
@ -87,23 +87,23 @@ PIXI.Stage.prototype.setInteractionDelegate = function(domElement)
*/ */
PIXI.Stage.prototype.updateTransform = function() PIXI.Stage.prototype.updateTransform = function()
{ {
this.worldAlpha = 1; this.worldAlpha = 1;
this.vcount = PIXI.visibleCount; this.vcount = PIXI.visibleCount;
for(var i=0,j=this.children.length; i<j; i++) for(var i=0,j=this.children.length; i<j; i++)
{ {
this.children[i].updateTransform(); this.children[i].updateTransform();
} }
if(this.dirty) if(this.dirty)
{ {
this.dirty = false; this.dirty = false;
// update interactive! // update interactive!
this.interactionManager.dirty = true; this.interactionManager.dirty = true;
} }
if(this.interactive)this.interactionManager.update(); if(this.interactive)this.interactionManager.update();
} }
/** /**
@ -111,15 +111,15 @@ PIXI.Stage.prototype.updateTransform = function()
* *
* @method setBackgroundColor * @method setBackgroundColor
* @param backgroundColor {Number} the color of the background, easiest way to pass this in is in hex format * @param backgroundColor {Number} the color of the background, easiest way to pass this in is in hex format
* like: 0xFFFFFF for white * like: 0xFFFFFF for white
*/ */
PIXI.Stage.prototype.setBackgroundColor = function(backgroundColor) PIXI.Stage.prototype.setBackgroundColor = function(backgroundColor)
{ {
this.backgroundColor = backgroundColor || 0x000000; this.backgroundColor = backgroundColor || 0x000000;
this.backgroundColorSplit = HEXtoRGB(this.backgroundColor); this.backgroundColorSplit = hex2rgb(this.backgroundColor);
var hex = this.backgroundColor.toString(16); var hex = this.backgroundColor.toString(16);
hex = "000000".substr(0, 6 - hex.length) + hex; hex = "000000".substr(0, 6 - hex.length) + hex;
this.backgroundColorString = "#" + hex; this.backgroundColorString = "#" + hex;
} }
/** /**
@ -130,5 +130,5 @@ PIXI.Stage.prototype.setBackgroundColor = function(backgroundColor)
*/ */
PIXI.Stage.prototype.getMousePosition = function() PIXI.Stage.prototype.getMousePosition = function()
{ {
return this.interactionManager.mouse.global; return this.interactionManager.mouse.global;
} }

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

@ -12,7 +12,7 @@
*/ */
PIXI.CustomRenderable = function() PIXI.CustomRenderable = function()
{ {
PIXI.DisplayObject.call( this ); PIXI.DisplayObject.call( this );
} }
@ -28,7 +28,7 @@ PIXI.CustomRenderable.prototype.constructor = PIXI.CustomRenderable;
*/ */
PIXI.CustomRenderable.prototype.renderCanvas = function(renderer) PIXI.CustomRenderable.prototype.renderCanvas = function(renderer)
{ {
// override! // override!
} }
/** /**
@ -39,7 +39,7 @@ PIXI.CustomRenderable.prototype.renderCanvas = function(renderer)
*/ */
PIXI.CustomRenderable.prototype.initWebGL = function(renderer) PIXI.CustomRenderable.prototype.initWebGL = function(renderer)
{ {
// override! // override!
} }
/** /**
@ -50,7 +50,7 @@ PIXI.CustomRenderable.prototype.initWebGL = function(renderer)
*/ */
PIXI.CustomRenderable.prototype.renderWebGL = function(renderGroup, projectionMatrix) PIXI.CustomRenderable.prototype.renderWebGL = function(renderGroup, projectionMatrix)
{ {
// not sure if both needed? but ya have for now! // not sure if both needed? but ya have for now!
// override! // override!
} }

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

@ -5,26 +5,26 @@
PIXI.Rope = function(texture, points) PIXI.Rope = function(texture, points)
{ {
PIXI.Strip.call( this, texture ); PIXI.Strip.call( this, texture );
this.points = points; this.points = points;
try try
{ {
this.verticies = new Float32Array( points.length * 4); this.verticies = new Float32Array( points.length * 4);
this.uvs = new Float32Array( points.length * 4); this.uvs = new Float32Array( points.length * 4);
this.colors = new Float32Array( points.length * 2); this.colors = new Float32Array( points.length * 2);
this.indices = new Uint16Array( points.length * 2); this.indices = new Uint16Array( points.length * 2);
} }
catch(error) catch(error)
{ {
this.verticies = verticies this.verticies = verticies
this.uvs = uvs this.uvs = uvs
this.colors = colors this.colors = colors
this.indices = indices this.indices = indices
} }
this.refresh(); this.refresh();
} }
@ -34,140 +34,138 @@ PIXI.Rope.prototype.constructor = PIXI.Rope;
PIXI.Rope.prototype.refresh = function() PIXI.Rope.prototype.refresh = function()
{ {
var points = this.points; var points = this.points;
if(points.length < 1)return; if(points.length < 1)return;
var uvs = this.uvs var uvs = this.uvs
var indices = this.indices; var indices = this.indices;
var colors = this.colors; var colors = this.colors;
var lastPoint = points[0]; var lastPoint = points[0];
var nextPoint; var nextPoint;
var perp = {x:0, y:0}; var perp = {x:0, y:0};
var point = points[0];
this.count-=0.2; this.count-=0.2;
uvs[0] = 0 uvs[0] = 0
uvs[1] = 1 uvs[1] = 1
uvs[2] = 0 uvs[2] = 0
uvs[3] = 1 uvs[3] = 1
colors[0] = 1; colors[0] = 1;
colors[1] = 1; colors[1] = 1;
indices[0] = 0; indices[0] = 0;
indices[1] = 1; indices[1] = 1;
var total = points.length; var total = points.length,
point, index, amount;
for (var i = 1; i < total; i++) for (var i = 1; i < total; i++)
{ {
var point = points[i]; point = points[i];
var index = i * 4; index = i * 4;
// time to do some smart drawing! // time to do some smart drawing!
var amount = i/(total-1) amount = i/(total-1)
if(i%2) if(i%2)
{ {
uvs[index] = amount; uvs[index] = amount;
uvs[index+1] = 0; uvs[index+1] = 0;
uvs[index+2] = amount uvs[index+2] = amount
uvs[index+3] = 1 uvs[index+3] = 1
} }
else else
{ {
uvs[index] = amount uvs[index] = amount
uvs[index+1] = 0 uvs[index+1] = 0
uvs[index+2] = amount uvs[index+2] = amount
uvs[index+3] = 1 uvs[index+3] = 1
} }
index = i * 2; index = i * 2;
colors[index] = 1; colors[index] = 1;
colors[index+1] = 1; colors[index+1] = 1;
index = i * 2; index = i * 2;
indices[index] = index; indices[index] = index;
indices[index + 1] = index + 1; indices[index + 1] = index + 1;
lastPoint = point; lastPoint = point;
} }
} }
PIXI.Rope.prototype.updateTransform = function() PIXI.Rope.prototype.updateTransform = function()
{ {
var points = this.points; var points = this.points;
if(points.length < 1)return; if(points.length < 1)return;
var verticies = this.verticies var lastPoint = points[0];
var nextPoint;
var perp = {x:0, y:0};
var lastPoint = points[0]; this.count-=0.2;
var nextPoint;
var perp = {x:0, y:0};
var point = points[0];
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
// time to do some smart drawing!
verticies[0] = point.x + perp.x var total = points.length,
verticies[1] = point.y + perp.y //+ 200 point, index, ratio, perpLength, num;
verticies[2] = point.x - perp.x
verticies[3] = point.y - perp.y//+200
// time to do some smart drawing!
var total = points.length; for (var i = 1; i < total; i++)
{
point = points[i];
index = i * 4;
for (var i = 1; i < total; i++) if(i < points.length-1)
{ {
nextPoint = points[i+1];
}
else
{
nextPoint = point;
}
var point = points[i]; perp.y = -(nextPoint.x - lastPoint.x);
var index = i * 4; perp.x = nextPoint.y - lastPoint.y;
if(i < points.length-1) ratio = (1 - (i / (total-1))) * 10;
{ if(ratio > 1)ratio = 1;
nextPoint = points[i+1];
}
else
{
nextPoint = point
}
perp.y = -(nextPoint.x - lastPoint.x); perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y);
perp.x = nextPoint.y - lastPoint.y; num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio;
perp.x /= perpLength;
perp.y /= perpLength;
var ratio = (1 - (i / (total-1))) * 10; perp.x *= num;
if(ratio > 1)ratio = 1; perp.y *= num;
var perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); verticies[index] = point.x + perp.x
var num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; verticies[index+1] = point.y + perp.y
perp.x /= perpLength; verticies[index+2] = point.x - perp.x
perp.y /= perpLength; verticies[index+3] = point.y - perp.y
perp.x *= num; lastPoint = point;
perp.y *= num; }
verticies[index] = point.x + perp.x PIXI.DisplayObjectContainer.prototype.updateTransform.call( this );
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) PIXI.Rope.prototype.setTexture = function(texture)
{ {
// stop current texture // stop current texture
this.texture = texture; this.texture = texture;
this.updateFrame = true; this.updateFrame = true;
} }

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

File diff suppressed because it is too large Load diff

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

@ -4,65 +4,65 @@
PIXI.Strip = function(texture, width, height) PIXI.Strip = function(texture, width, height)
{ {
PIXI.DisplayObjectContainer.call( this ); PIXI.DisplayObjectContainer.call( this );
this.texture = texture; this.texture = texture;
this.blendMode = PIXI.blendModes.NORMAL; this.blendMode = PIXI.blendModes.NORMAL;
try try
{ {
this.uvs = new Float32Array([0, 1, this.uvs = new Float32Array([0, 1,
1, 1, 1, 1,
1, 0, 0,1]); 1, 0, 0,1]);
this.verticies = new Float32Array([0, 0, this.verticies = new Float32Array([0, 0,
0,0, 0,0,
0,0, 0, 0,0, 0,
0, 0]); 0, 0]);
this.colors = new Float32Array([1, 1, 1, 1]); this.colors = new Float32Array([1, 1, 1, 1]);
this.indices = new Uint16Array([0, 1, 2, 3]); this.indices = new Uint16Array([0, 1, 2, 3]);
} }
catch(error) catch(error)
{ {
this.uvs = [0, 1, this.uvs = [0, 1,
1, 1, 1, 1,
1, 0, 0,1]; 1, 0, 0,1];
this.verticies = [0, 0, this.verticies = [0, 0,
0,0, 0,0,
0,0, 0, 0,0, 0,
0, 0]; 0, 0];
this.colors = [1, 1, 1, 1]; this.colors = [1, 1, 1, 1];
this.indices = [0, 1, 2, 3]; this.indices = [0, 1, 2, 3];
} }
/* /*
this.uvs = new Float32Array() this.uvs = new Float32Array()
this.verticies = new Float32Array() this.verticies = new Float32Array()
this.colors = new Float32Array() this.colors = new Float32Array()
this.indices = new Uint16Array() this.indices = new Uint16Array()
*/ */
this.width = width; this.width = width;
this.height = height; this.height = height;
// load the texture! // load the texture!
if(texture.baseTexture.hasLoaded) if(texture.baseTexture.hasLoaded)
{ {
this.width = this.texture.frame.width; this.width = this.texture.frame.width;
this.height = this.texture.frame.height; this.height = this.texture.frame.height;
this.updateFrame = true; this.updateFrame = true;
} }
else else
{ {
this.onTextureUpdateBind = this.onTextureUpdate.bind(this); this.onTextureUpdateBind = this.onTextureUpdate.bind(this);
this.texture.addEventListener( 'update', this.onTextureUpdateBind ); this.texture.addEventListener( 'update', this.onTextureUpdateBind );
} }
this.renderable = true; this.renderable = true;
} }
// constructor // constructor
@ -71,19 +71,19 @@ PIXI.Strip.prototype.constructor = PIXI.Strip;
PIXI.Strip.prototype.setTexture = function(texture) PIXI.Strip.prototype.setTexture = function(texture)
{ {
//TODO SET THE TEXTURES //TODO SET THE TEXTURES
//TODO VISIBILITY //TODO VISIBILITY
// stop current texture // stop current texture
this.texture = texture; this.texture = texture;
this.width = texture.frame.width; this.width = texture.frame.width;
this.height = texture.frame.height; this.height = texture.frame.height;
this.updateFrame = true; this.updateFrame = true;
} }
PIXI.Strip.prototype.onTextureUpdate = function(event) PIXI.Strip.prototype.onTextureUpdate = function(event)
{ {
this.updateFrame = true; this.updateFrame = true;
} }
// some helper functions.. // some helper functions..

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

@ -14,51 +14,51 @@
*/ */
PIXI.TilingSprite = function(texture, width, height) PIXI.TilingSprite = function(texture, width, height)
{ {
PIXI.DisplayObjectContainer.call( this ); PIXI.DisplayObjectContainer.call( this );
/** /**
* The texture that the sprite is using * The texture that the sprite is using
* *
* @property texture * @property texture
* @type Texture * @type Texture
*/ */
this.texture = texture; this.texture = texture;
/** /**
* The width of the tiling sprite * The width of the tiling sprite
* *
* @property width * @property width
* @type Number * @type Number
*/ */
this.width = width; this.width = width;
/** /**
* The height of the tiling sprite * The height of the tiling sprite
* *
* @property height * @property height
* @type Number * @type Number
*/ */
this.height = height; this.height = height;
/** /**
* The scaling of the image that is being tiled * The scaling of the image that is being tiled
* *
* @property tileScale * @property tileScale
* @type Point * @type Point
*/ */
this.tileScale = new PIXI.Point(1,1); this.tileScale = new PIXI.Point(1,1);
/** /**
* The offset position of the image that is being tiled * The offset position of the image that is being tiled
* *
* @property tilePosition * @property tilePosition
* @type Point * @type Point
*/ */
this.tilePosition = new PIXI.Point(0,0); this.tilePosition = new PIXI.Point(0,0);
this.renderable = true; this.renderable = true;
this.blendMode = PIXI.blendModes.NORMAL this.blendMode = PIXI.blendModes.NORMAL
} }
// constructor // constructor
@ -73,12 +73,12 @@ PIXI.TilingSprite.prototype.constructor = PIXI.TilingSprite;
*/ */
PIXI.TilingSprite.prototype.setTexture = function(texture) PIXI.TilingSprite.prototype.setTexture = function(texture)
{ {
//TODO SET THE TEXTURES //TODO SET THE TEXTURES
//TODO VISIBILITY //TODO VISIBILITY
// stop current texture // stop current texture
this.texture = texture; this.texture = texture;
this.updateFrame = true; this.updateFrame = true;
} }
/** /**
@ -90,6 +90,6 @@ PIXI.TilingSprite.prototype.setTexture = function(texture)
*/ */
PIXI.TilingSprite.prototype.onTextureUpdate = function(event) PIXI.TilingSprite.prototype.onTextureUpdate = function(event)
{ {
this.updateFrame = true; this.updateFrame = true;
} }

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

@ -6,8 +6,8 @@
PIXI.FilterBlock = function(mask) PIXI.FilterBlock = function(mask)
{ {
this.graphics = mask this.graphics = mask
this.visible = true; this.visible = true;
this.renderable = true; this.renderable = true;
} }

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

@ -6,7 +6,7 @@
PIXI.MaskFilter = function(graphics) PIXI.MaskFilter = function(graphics)
{ {
// the graphics data that will be used for filtering // the graphics data that will be used for filtering
this.graphics; this.graphics;
} }

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

@ -20,15 +20,15 @@
*/ */
PIXI.AssetLoader = function(assetURLs, crossorigin) PIXI.AssetLoader = function(assetURLs, crossorigin)
{ {
PIXI.EventTarget.call(this); PIXI.EventTarget.call(this);
/** /**
* The array of asset URLs that are going to be loaded * The array of asset URLs that are going to be loaded
* *
* @property assetURLs * @property assetURLs
* @type Array<String> * @type Array<String>
*/ */
this.assetURLs = assetURLs; this.assetURLs = assetURLs;
/** /**
* Whether the requests should be treated as cross origin * Whether the requests should be treated as cross origin
@ -36,7 +36,7 @@ PIXI.AssetLoader = function(assetURLs, crossorigin)
* @property crossorigin * @property crossorigin
* @type Boolean * @type Boolean
*/ */
this.crossorigin = crossorigin; this.crossorigin = crossorigin;
/** /**
* Maps file extension to loader types * Maps file extension to loader types
@ -80,25 +80,26 @@ PIXI.AssetLoader.prototype.load = function()
{ {
var scope = this; var scope = this;
this.loadCount = this.assetURLs.length; function onLoad() {
scope.onAssetLoaded();
}
for (var i=0; i < this.assetURLs.length; i++) this.loadCount = this.assetURLs.length;
{
var fileName = this.assetURLs[i];
var fileType = fileName.split(".").pop().toLowerCase();
var loaderClass = this.loadersByType[fileType]; for (var i = 0, l = this.assetURLs.length; i < l; i++)
if(!loaderClass) {
var fileName = this.assetURLs[i];
var fileType = fileName.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 loaderClass(fileName, this.crossorigin); var loader = new Constructor(fileName, this.crossorigin);
loader.addEventListener("loaded", function() loader.addEventListener("loaded", onLoad);
{
scope.onAssetLoaded();
});
loader.load(); loader.load();
} }
}; };
/** /**
@ -110,13 +111,13 @@ PIXI.AssetLoader.prototype.load = function()
PIXI.AssetLoader.prototype.onAssetLoaded = function() PIXI.AssetLoader.prototype.onAssetLoaded = function()
{ {
this.loadCount--; this.loadCount--;
this.dispatchEvent({type: "onProgress", content: this}); this.dispatchEvent({type: "onProgress", content: this});
if(this.onProgress) this.onProgress(); if (this.onProgress) this.onProgress();
if(this.loadCount == 0) if (!this.loadCount)
{ {
this.dispatchEvent({type: "onComplete", content: this}); this.dispatchEvent({type: "onComplete", content: this});
if(this.onComplete) this.onComplete(); if(this.onComplete) this.onComplete();
} }
}; };

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

@ -14,41 +14,41 @@
* @param crossorigin {Boolean} Whether requests should be treated as crossorigin * @param crossorigin {Boolean} Whether requests should be treated as crossorigin
*/ */
PIXI.JsonLoader = function (url, crossorigin) { PIXI.JsonLoader = function (url, crossorigin) {
PIXI.EventTarget.call(this); PIXI.EventTarget.call(this);
/** /**
* The url of the bitmap font data * The url of the bitmap font data
* *
* @property url * @property url
* @type String * @type String
*/ */
this.url = url; this.url = url;
/** /**
* Whether the requests should be treated as cross origin * Whether the requests should be treated as cross origin
* *
* @property crossorigin * @property crossorigin
* @type Boolean * @type Boolean
*/ */
this.crossorigin = crossorigin; this.crossorigin = crossorigin;
/** /**
* [read-only] The base url of the bitmap font data * [read-only] The base url of the bitmap font data
* *
* @property baseUrl * @property baseUrl
* @type String * @type String
* @readOnly * @readOnly
*/ */
this.baseUrl = url.replace(/[^\/]*$/, ""); this.baseUrl = url.replace(/[^\/]*$/, "");
/** /**
* [read-only] Whether the data has loaded yet * [read-only] Whether the data has loaded yet
* *
* @property loaded * @property loaded
* @type Boolean * @type Boolean
* @readOnly * @readOnly
*/ */
this.loaded = false; this.loaded = false;
}; };
@ -61,15 +61,15 @@ PIXI.JsonLoader.prototype.constructor = PIXI.JsonLoader;
* @method load * @method load
*/ */
PIXI.JsonLoader.prototype.load = function () { PIXI.JsonLoader.prototype.load = function () {
this.ajaxRequest = new AjaxRequest(); this.ajaxRequest = new AjaxRequest();
var scope = this; var scope = this;
this.ajaxRequest.onreadystatechange = function () { this.ajaxRequest.onreadystatechange = function () {
scope.onJSONLoaded(); scope.onJSONLoaded();
}; };
this.ajaxRequest.open("GET", this.url, true); this.ajaxRequest.open("GET", this.url, true);
if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json");
this.ajaxRequest.send(null); this.ajaxRequest.send(null);
}; };
/** /**
@ -79,62 +79,62 @@ PIXI.JsonLoader.prototype.load = function () {
* @private * @private
*/ */
PIXI.JsonLoader.prototype.onJSONLoaded = function () { PIXI.JsonLoader.prototype.onJSONLoaded = 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) {
this.json = JSON.parse(this.ajaxRequest.responseText); this.json = JSON.parse(this.ajaxRequest.responseText);
if(this.json.frames) if(this.json.frames)
{ {
// sprite sheet // sprite sheet
var scope = this; var scope = this;
var textureUrl = this.baseUrl + this.json.meta.image; var textureUrl = this.baseUrl + this.json.meta.image;
var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
var frameData = this.json.frames; var frameData = this.json.frames;
this.texture = image.texture.baseTexture; this.texture = image.texture.baseTexture;
image.addEventListener("loaded", function (event) { image.addEventListener("loaded", function (event) {
scope.onLoaded(); scope.onLoaded();
}); });
for (var i in frameData) { for (var i in frameData) {
var rect = frameData[i].frame; var rect = frameData[i].frame;
if (rect) { if (rect) {
PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {
x: rect.x, x: rect.x,
y: rect.y, y: rect.y,
width: rect.w, width: rect.w,
height: rect.h height: rect.h
}); });
if (frameData[i].trimmed) { if (frameData[i].trimmed) {
//var realSize = frameData[i].spriteSourceSize; //var realSize = frameData[i].spriteSourceSize;
PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize;
PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w)
// calculate the offset! // calculate the offset!
} }
} }
} }
image.load(); image.load();
} }
else if(this.json.bones) else if(this.json.bones)
{ {
// spine animation // spine animation
var spineJsonParser = new spine.SkeletonJson(); var spineJsonParser = new spine.SkeletonJson();
var skeletonData = spineJsonParser.readSkeletonData(this.json); var skeletonData = spineJsonParser.readSkeletonData(this.json);
PIXI.AnimCache[this.url] = skeletonData; PIXI.AnimCache[this.url] = skeletonData;
this.onLoaded(); this.onLoaded();
} }
else else
{ {
this.onLoaded(); this.onLoaded();
} }
} }
else else
{ {
this.onError(); this.onError();
} }
} }
}; };
/** /**
@ -144,11 +144,11 @@ PIXI.JsonLoader.prototype.onJSONLoaded = function () {
* @private * @private
*/ */
PIXI.JsonLoader.prototype.onLoaded = function () { PIXI.JsonLoader.prototype.onLoaded = function () {
this.loaded = true; this.loaded = true;
this.dispatchEvent({ this.dispatchEvent({
type: "loaded", type: "loaded",
content: this content: this
}); });
}; };
/** /**
@ -158,8 +158,8 @@ PIXI.JsonLoader.prototype.onLoaded = function () {
* @private * @private
*/ */
PIXI.JsonLoader.prototype.onError = function () { PIXI.JsonLoader.prototype.onError = function () {
this.dispatchEvent({ this.dispatchEvent({
type: "error", type: "error",
content: this content: this
}); });
}; };

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

@ -23,32 +23,32 @@
*/ */
PIXI.SpineLoader = function(url, crossorigin) PIXI.SpineLoader = function(url, crossorigin)
{ {
PIXI.EventTarget.call(this); PIXI.EventTarget.call(this);
/** /**
* The url of the bitmap font data * The url of the bitmap font data
* *
* @property url * @property url
* @type String * @type String
*/ */
this.url = url; this.url = url;
/** /**
* Whether the requests should be treated as cross origin * Whether the requests should be treated as cross origin
* *
* @property crossorigin * @property crossorigin
* @type Boolean * @type Boolean
*/ */
this.crossorigin = crossorigin; this.crossorigin = crossorigin;
/** /**
* [read-only] Whether the data has loaded yet * [read-only] Whether the data has loaded yet
* *
* @property loaded * @property loaded
* @type Boolean * @type Boolean
* @readOnly * @readOnly
*/ */
this.loaded = false; this.loaded = false;
} }
PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader; PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader;
@ -60,13 +60,13 @@ PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader;
*/ */
PIXI.SpineLoader.prototype.load = function () { PIXI.SpineLoader.prototype.load = function () {
var scope = this; var scope = this;
var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); 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.json = event.content.json;
scope.onJSONLoaded(); scope.onJSONLoaded();
}); });
jsonLoader.load(); jsonLoader.load();
}; };
/** /**
@ -76,12 +76,12 @@ PIXI.SpineLoader.prototype.load = function () {
* @private * @private
*/ */
PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { PIXI.SpineLoader.prototype.onJSONLoaded = function (event) {
var spineJsonParser = new spine.SkeletonJson(); var spineJsonParser = new spine.SkeletonJson();
var skeletonData = spineJsonParser.readSkeletonData(this.json); var skeletonData = spineJsonParser.readSkeletonData(this.json);
PIXI.AnimCache[this.url] = skeletonData; PIXI.AnimCache[this.url] = skeletonData;
this.onLoaded(); this.onLoaded();
}; };
/** /**
@ -91,7 +91,7 @@ PIXI.SpineLoader.prototype.onJSONLoaded = function (event) {
* @private * @private
*/ */
PIXI.SpineLoader.prototype.onLoaded = function () { PIXI.SpineLoader.prototype.onLoaded = function () {
this.loaded = true; this.loaded = true;
this.dispatchEvent({type: "loaded", content: this}); this.dispatchEvent({type: "loaded", content: this});
}; };

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

@ -19,37 +19,37 @@
*/ */
PIXI.SpriteSheetLoader = function (url, crossorigin) { PIXI.SpriteSheetLoader = function (url, crossorigin) {
/* /*
* i use texture packer to load the assets.. * i use texture packer to load the assets..
* http://www.codeandweb.com/texturepacker * 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); PIXI.EventTarget.call(this);
/** /**
* The url of the bitmap font data * The url of the bitmap font data
* *
* @property url * @property url
* @type String * @type String
*/ */
this.url = url; this.url = url;
/** /**
* Whether the requests should be treated as cross origin * Whether the requests should be treated as cross origin
* *
* @property crossorigin * @property crossorigin
* @type Boolean * @type Boolean
*/ */
this.crossorigin = crossorigin; this.crossorigin = crossorigin;
/** /**
* [read-only] The base url of the bitmap font data * [read-only] The base url of the bitmap font data
* *
* @property baseUrl * @property baseUrl
* @type String * @type String
* @readOnly * @readOnly
*/ */
this.baseUrl = url.replace(/[^\/]*$/, ""); this.baseUrl = url.replace(/[^\/]*$/, "");
/** /**
* The texture being loaded * The texture being loaded
@ -65,7 +65,7 @@ PIXI.SpriteSheetLoader = function (url, crossorigin) {
* @property frames * @property frames
* @type Object * @type Object
*/ */
this.frames = {}; this.frames = {};
}; };
// constructor // constructor
@ -77,13 +77,13 @@ PIXI.SpriteSheetLoader.prototype.constructor = PIXI.SpriteSheetLoader;
* @method load * @method load
*/ */
PIXI.SpriteSheetLoader.prototype.load = function () { PIXI.SpriteSheetLoader.prototype.load = function () {
var scope = this; var scope = this;
var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); 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.json = event.content.json;
scope.onJSONLoaded(); scope.onJSONLoaded();
}); });
jsonLoader.load(); jsonLoader.load();
}; };
/** /**
@ -93,35 +93,35 @@ PIXI.SpriteSheetLoader.prototype.load = function () {
* @private * @private
*/ */
PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function () { PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function () {
var scope = this; var scope = this;
var textureUrl = this.baseUrl + this.json.meta.image; var textureUrl = this.baseUrl + this.json.meta.image;
var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
var frameData = this.json.frames; var frameData = this.json.frames;
this.texture = image.texture.baseTexture; this.texture = image.texture.baseTexture;
image.addEventListener("loaded", function (event) { image.addEventListener("loaded", function (event) {
scope.onLoaded(); scope.onLoaded();
}); });
for (var i in frameData) { for (var i in frameData) {
var rect = frameData[i].frame; var rect = frameData[i].frame;
if (rect) { if (rect) {
PIXI.TextureCache[i] = new PIXI.Texture(this.texture, { PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {
x: rect.x, x: rect.x,
y: rect.y, y: rect.y,
width: rect.w, width: rect.w,
height: rect.h height: rect.h
}); });
if (frameData[i].trimmed) { if (frameData[i].trimmed) {
//var realSize = frameData[i].spriteSourceSize; //var realSize = frameData[i].spriteSourceSize;
PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize;
PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w) PIXI.TextureCache[i].trim.x = 0; // (realSize.x / rect.w)
// calculate the offset! // calculate the offset!
} }
} }
} }
image.load(); image.load();
}; };
/** /**
* Invoke when all files are loaded (json and texture) * Invoke when all files are loaded (json and texture)
@ -130,8 +130,8 @@ PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function () {
* @private * @private
*/ */
PIXI.SpriteSheetLoader.prototype.onLoaded = function () { PIXI.SpriteSheetLoader.prototype.onLoaded = function () {
this.dispatchEvent({ this.dispatchEvent({
type: "loaded", type: "loaded",
content: this content: this
}); });
}; };

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

@ -14,9 +14,9 @@
*/ */
PIXI.Graphics = function() PIXI.Graphics = function()
{ {
PIXI.DisplayObjectContainer.call( this ); PIXI.DisplayObjectContainer.call( this );
this.renderable = true; this.renderable = true;
/** /**
* The alpha of the fill of this graphics object * The alpha of the fill of this graphics object
@ -24,7 +24,7 @@ PIXI.Graphics = function()
* @property fillAlpha * @property fillAlpha
* @type Number * @type Number
*/ */
this.fillAlpha = 1; this.fillAlpha = 1;
/** /**
* The width of any lines drawn * The width of any lines drawn
@ -32,7 +32,7 @@ PIXI.Graphics = function()
* @property lineWidth * @property lineWidth
* @type Number * @type Number
*/ */
this.lineWidth = 0; this.lineWidth = 0;
/** /**
* The color of any lines drawn * The color of any lines drawn
@ -40,7 +40,7 @@ PIXI.Graphics = function()
* @property lineColor * @property lineColor
* @type String * @type String
*/ */
this.lineColor = "black"; this.lineColor = "black";
/** /**
* Graphics data * Graphics data
@ -49,7 +49,7 @@ PIXI.Graphics = function()
* @type Array * @type Array
* @private * @private
*/ */
this.graphicsData = []; this.graphicsData = [];
/** /**
* Current path * Current path
@ -58,7 +58,7 @@ PIXI.Graphics = function()
* @type Object * @type Object
* @private * @private
*/ */
this.currentPath = {points:[]}; this.currentPath = {points:[]};
} }
// constructor // constructor
@ -75,16 +75,16 @@ PIXI.Graphics.prototype.constructor = PIXI.Graphics;
*/ */
PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha) PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
{ {
if(this.currentPath.points.length == 0)this.graphicsData.pop(); if (!this.currentPath.points.length) this.graphicsData.pop();
this.lineWidth = lineWidth || 0; this.lineWidth = lineWidth || 0;
this.lineColor = color || 0; this.lineColor = color || 0;
this.lineAlpha = (alpha == undefined) ? 1 : alpha; this.lineAlpha = (arguments.length < 3) ? 1 : alpha;
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY};
this.graphicsData.push(this.currentPath); this.graphicsData.push(this.currentPath);
} }
/** /**
@ -96,14 +96,14 @@ PIXI.Graphics.prototype.lineStyle = function(lineWidth, color, alpha)
*/ */
PIXI.Graphics.prototype.moveTo = function(x, y) PIXI.Graphics.prototype.moveTo = function(x, y)
{ {
if(this.currentPath.points.length == 0)this.graphicsData.pop(); if (!this.currentPath.points.length) this.graphicsData.pop();
this.currentPath = this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, this.currentPath = this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY};
this.currentPath.points.push(x, y); this.currentPath.points.push(x, y);
this.graphicsData.push(this.currentPath); this.graphicsData.push(this.currentPath);
} }
/** /**
@ -116,8 +116,8 @@ PIXI.Graphics.prototype.moveTo = function(x, y)
*/ */
PIXI.Graphics.prototype.lineTo = function(x, y) PIXI.Graphics.prototype.lineTo = function(x, y)
{ {
this.currentPath.points.push(x, y); this.currentPath.points.push(x, y);
this.dirty = true; this.dirty = true;
} }
/** /**
@ -130,9 +130,9 @@ PIXI.Graphics.prototype.lineTo = function(x, y)
*/ */
PIXI.Graphics.prototype.beginFill = function(color, alpha) PIXI.Graphics.prototype.beginFill = function(color, alpha)
{ {
this.filling = true; this.filling = true;
this.fillColor = color || 0; this.fillColor = color || 0;
this.fillAlpha = (alpha == undefined) ? 1 : alpha; this.fillAlpha = (arguments.length < 2) ? 1 : alpha;
} }
/** /**
@ -142,9 +142,9 @@ PIXI.Graphics.prototype.beginFill = function(color, alpha)
*/ */
PIXI.Graphics.prototype.endFill = function() PIXI.Graphics.prototype.endFill = function()
{ {
this.filling = false; this.filling = false;
this.fillColor = null; this.fillColor = null;
this.fillAlpha = 1; this.fillAlpha = 1;
} }
/** /**
@ -157,14 +157,14 @@ PIXI.Graphics.prototype.endFill = function()
*/ */
PIXI.Graphics.prototype.drawRect = function( x, y, width, height ) PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
{ {
if(this.currentPath.points.length == 0)this.graphicsData.pop(); if (!this.currentPath.points.length) this.graphicsData.pop();
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
points:[x, y, width, height], type:PIXI.Graphics.RECT}; points:[x, y, width, height], type:PIXI.Graphics.RECT};
this.graphicsData.push(this.currentPath); this.graphicsData.push(this.currentPath);
this.dirty = true; this.dirty = true;
} }
/** /**
@ -177,14 +177,14 @@ PIXI.Graphics.prototype.drawRect = function( x, y, width, height )
*/ */
PIXI.Graphics.prototype.drawCircle = function( x, y, radius) PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
{ {
if(this.currentPath.points.length == 0)this.graphicsData.pop(); if (!this.currentPath.points.length) this.graphicsData.pop();
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
points:[x, y, radius, radius], type:PIXI.Graphics.CIRC}; points:[x, y, radius, radius], type:PIXI.Graphics.CIRC};
this.graphicsData.push(this.currentPath); this.graphicsData.push(this.currentPath);
this.dirty = true; this.dirty = true;
} }
/** /**
@ -198,14 +198,14 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
*/ */
PIXI.Graphics.prototype.drawElipse = function( x, y, width, height) PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
{ {
if(this.currentPath.points.length == 0)this.graphicsData.pop(); if (!this.currentPath.points.length) this.graphicsData.pop();
this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha, this.currentPath = {lineWidth:this.lineWidth, lineColor:this.lineColor, lineAlpha:this.lineAlpha,
fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling,
points:[x, y, width, height], type:PIXI.Graphics.ELIP}; points:[x, y, width, height], type:PIXI.Graphics.ELIP};
this.graphicsData.push(this.currentPath); this.graphicsData.push(this.currentPath);
this.dirty = true; this.dirty = true;
} }
/** /**
@ -215,12 +215,12 @@ PIXI.Graphics.prototype.drawElipse = function( x, y, width, height)
*/ */
PIXI.Graphics.prototype.clear = function() PIXI.Graphics.prototype.clear = function()
{ {
this.lineWidth = 0; this.lineWidth = 0;
this.filling = false; this.filling = false;
this.dirty = true; this.dirty = true;
this.clearDirty = true; this.clearDirty = true;
this.graphicsData = []; this.graphicsData = [];
} }
// SOME TYPES: // SOME TYPES:

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

@ -25,127 +25,127 @@ PIXI.CanvasGraphics = function()
*/ */
PIXI.CanvasGraphics.renderGraphics = function(graphics, context) PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
{ {
var worldAlpha = graphics.worldAlpha; 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 data = graphics.graphicsData[i];
var points = data.points; var points = data.points;
context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6);
context.lineWidth = data.lineWidth; context.lineWidth = data.lineWidth;
if(data.type == PIXI.Graphics.POLY) if(data.type == PIXI.Graphics.POLY)
{ {
context.beginPath(); context.beginPath();
context.moveTo(points[0], points[1]); 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]); context.lineTo(points[j * 2], points[j * 2 + 1]);
} }
// if the first and last point are the same close the path - much neater :) // 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(); context.closePath();
} }
if(data.fill) if(data.fill)
{ {
context.globalAlpha = data.fillAlpha * worldAlpha; context.globalAlpha = data.fillAlpha * worldAlpha;
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
context.fill(); context.fill();
} }
if(data.lineWidth) if(data.lineWidth)
{ {
context.globalAlpha = data.lineAlpha * worldAlpha; context.globalAlpha = data.lineAlpha * worldAlpha;
context.stroke(); context.stroke();
} }
} }
else if(data.type == PIXI.Graphics.RECT) else if(data.type == PIXI.Graphics.RECT)
{ {
if(data.fillColor || data.fillColor === 0) if(data.fillColor || data.fillColor === 0)
{ {
context.globalAlpha = data.fillAlpha * worldAlpha; context.globalAlpha = data.fillAlpha * worldAlpha;
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
context.fillRect(points[0], points[1], points[2], points[3]); context.fillRect(points[0], points[1], points[2], points[3]);
} }
if(data.lineWidth) if(data.lineWidth)
{ {
context.globalAlpha = data.lineAlpha * worldAlpha; context.globalAlpha = data.lineAlpha * worldAlpha;
context.strokeRect(points[0], points[1], points[2], points[3]); context.strokeRect(points[0], points[1], points[2], points[3]);
} }
} }
else if(data.type == PIXI.Graphics.CIRC) else if(data.type == PIXI.Graphics.CIRC)
{ {
// TODO - need to be Undefined! // TODO - need to be Undefined!
context.beginPath(); context.beginPath();
context.arc(points[0], points[1], points[2],0,2*Math.PI); context.arc(points[0], points[1], points[2],0,2*Math.PI);
context.closePath(); context.closePath();
if(data.fill) if(data.fill)
{ {
context.globalAlpha = data.fillAlpha * worldAlpha; context.globalAlpha = data.fillAlpha * worldAlpha;
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
context.fill(); context.fill();
} }
if(data.lineWidth) if(data.lineWidth)
{ {
context.globalAlpha = data.lineAlpha * worldAlpha; context.globalAlpha = data.lineAlpha * worldAlpha;
context.stroke(); 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 // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
var elipseData = data.points; var elipseData = data.points;
var w = elipseData[2] * 2; var w = elipseData[2] * 2;
var h = elipseData[3] * 2; var h = elipseData[3] * 2;
var x = elipseData[0] - w/2; var x = elipseData[0] - w/2;
var y = elipseData[1] - h/2; var y = elipseData[1] - h/2;
context.beginPath(); context.beginPath();
var kappa = .5522848, var kappa = 0.5522848,
ox = (w / 2) * kappa, // control point offset horizontal ox = (w / 2) * kappa, // control point offset horizontal
oy = (h / 2) * kappa, // control point offset vertical oy = (h / 2) * kappa, // control point offset vertical
xe = x + w, // x-end xe = x + w, // x-end
ye = y + h, // y-end ye = y + h, // y-end
xm = x + w / 2, // x-middle xm = x + w / 2, // x-middle
ym = y + h / 2; // y-middle ym = y + h / 2; // y-middle
context.moveTo(x, ym); context.moveTo(x, ym);
context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y); context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym); context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye); context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
context.closePath(); context.closePath();
if(data.fill) if(data.fill)
{ {
context.globalAlpha = data.fillAlpha * worldAlpha; context.globalAlpha = data.fillAlpha * worldAlpha;
context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6);
context.fill(); context.fill();
} }
if(data.lineWidth) if(data.lineWidth)
{ {
context.globalAlpha = data.lineAlpha * worldAlpha; context.globalAlpha = data.lineAlpha * worldAlpha;
context.stroke(); context.stroke();
} }
} }
}; }
} }
/* /*
@ -159,80 +159,79 @@ PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
*/ */
PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context) PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context)
{ {
var worldAlpha = graphics.worldAlpha; var worldAlpha = graphics.worldAlpha;
var len = graphics.graphicsData.length; var len = graphics.graphicsData.length;
if(len > 1) if(len > 1)
{ {
len = 1; len = 1;
console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object") 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 data = graphics.graphicsData[i];
var points = data.points; var points = data.points;
if(data.type == PIXI.Graphics.POLY) if(data.type == PIXI.Graphics.POLY)
{ {
context.beginPath(); context.beginPath();
context.moveTo(points[0], points[1]); 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]); context.lineTo(points[j * 2], points[j * 2 + 1]);
} }
// if the first and last point are the same close the path - much neater :) // 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(); context.closePath();
} }
} }
else if(data.type == PIXI.Graphics.RECT) else if(data.type == PIXI.Graphics.RECT)
{ {
context.beginPath(); context.beginPath();
context.rect(points[0], points[1], points[2], points[3]); context.rect(points[0], points[1], points[2], points[3]);
context.closePath(); context.closePath();
} }
else if(data.type == PIXI.Graphics.CIRC) else if(data.type == PIXI.Graphics.CIRC)
{ {
// TODO - need to be Undefined! // TODO - need to be Undefined!
context.beginPath(); context.beginPath();
context.arc(points[0], points[1], points[2],0,2*Math.PI); context.arc(points[0], points[1], points[2],0,2*Math.PI);
context.closePath(); 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 // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
var elipseData = data.points; var elipseData = data.points;
var w = elipseData[2] * 2; var w = elipseData[2] * 2;
var h = elipseData[3] * 2; var h = elipseData[3] * 2;
var x = elipseData[0] - w/2; var x = elipseData[0] - w/2;
var y = elipseData[1] - h/2; var y = elipseData[1] - h/2;
context.beginPath(); context.beginPath();
var kappa = .5522848, var kappa = 0.5522848,
ox = (w / 2) * kappa, // control point offset horizontal ox = (w / 2) * kappa, // control point offset horizontal
oy = (h / 2) * kappa, // control point offset vertical oy = (h / 2) * kappa, // control point offset vertical
xe = x + w, // x-end xe = x + w, // x-end
ye = y + h, // y-end ye = y + h, // y-end
xm = x + w / 2, // x-middle xm = x + w / 2, // x-middle
ym = y + h / 2; // y-middle ym = y + h / 2; // y-middle
context.moveTo(x, ym); context.moveTo(x, ym);
context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y); context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym); context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye); context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
context.closePath(); context.closePath();
} }
}
};
} }

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

@ -16,48 +16,48 @@
*/ */
PIXI.CanvasRenderer = function(width, height, view, transparent) PIXI.CanvasRenderer = function(width, height, view, transparent)
{ {
this.transparent = transparent; this.transparent = transparent;
/** /**
* The width of the canvas view * The width of the canvas view
* *
* @property width * @property width
* @type Number * @type Number
* @default 800 * @default 800
*/ */
this.width = width || 800; this.width = width || 800;
/** /**
* The height of the canvas view * The height of the canvas view
* *
* @property height * @property height
* @type Number * @type Number
* @default 600 * @default 600
*/ */
this.height = height || 600; this.height = height || 600;
/** /**
* The canvas element that the everything is drawn to * The canvas element that the everything is drawn to
* *
* @property view * @property view
* @type Canvas * @type Canvas
*/ */
this.view = view || document.createElement( 'canvas' ); this.view = view || document.createElement( 'canvas' );
/** /**
* The canvas context that the everything is drawn to * The canvas context that the everything is drawn to
* @property context * @property context
* @type Canvas 2d Context * @type Canvas 2d Context
*/ */
this.context = this.view.getContext("2d"); this.context = this.view.getContext("2d");
this.refresh = true; this.refresh = true;
// hack to enable some hardware acceleration! // hack to enable some hardware acceleration!
//this.view.style["transform"] = "translatez(0)"; //this.view.style["transform"] = "translatez(0)";
this.view.width = this.width; this.view.width = this.width;
this.view.height = this.height; this.view.height = this.height;
this.count = 0; this.count = 0;
} }
// constructor // constructor
@ -72,40 +72,40 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer;
PIXI.CanvasRenderer.prototype.render = function(stage) PIXI.CanvasRenderer.prototype.render = function(stage)
{ {
//stage.__childrenAdded = []; //stage.__childrenAdded = [];
//stage.__childrenRemoved = []; //stage.__childrenRemoved = [];
// update textures if need be // update textures if need be
PIXI.texturesToUpdate = []; PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = []; PIXI.texturesToDestroy = [];
PIXI.visibleCount++; PIXI.visibleCount++;
stage.updateTransform(); stage.updateTransform();
// update the background color // update the background color
if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString; 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.setTransform(1,0,0,1,0,0);
this.context.clearRect(0, 0, this.width, this.height) this.context.clearRect(0, 0, this.width, this.height)
this.renderDisplayObject(stage); this.renderDisplayObject(stage);
//as //as
// run interaction! // run interaction!
if(stage.interactive) if(stage.interactive)
{ {
//need to add some events! //need to add some events!
if(!stage._interactiveEventsAdded) if(!stage._interactiveEventsAdded)
{ {
stage._interactiveEventsAdded = true; stage._interactiveEventsAdded = true;
stage.interactionManager.setTarget(this); stage.interactionManager.setTarget(this);
} }
} }
// remove frame updates.. // remove frame updates..
if(PIXI.Texture.frameUpdates.length > 0) if(PIXI.Texture.frameUpdates.length > 0)
{ {
PIXI.Texture.frameUpdates = []; PIXI.Texture.frameUpdates = [];
} }
} }
@ -119,11 +119,11 @@ PIXI.CanvasRenderer.prototype.render = function(stage)
*/ */
PIXI.CanvasRenderer.prototype.resize = function(width, height) PIXI.CanvasRenderer.prototype.resize = function(width, height)
{ {
this.width = width; this.width = width;
this.height = height; this.height = height;
this.view.width = width; this.view.width = width;
this.view.height = height; this.view.height = height;
} }
/** /**
@ -135,104 +135,104 @@ PIXI.CanvasRenderer.prototype.resize = function(width, height)
*/ */
PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject) PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
{ {
// no loger recurrsive! // no loger recurrsive!
var transform; var transform;
var context = this.context; var context = this.context;
context.globalCompositeOperation = 'source-over'; 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; var testObject = displayObject.last._iNext;
displayObject = displayObject.first; displayObject = displayObject.first;
do do
{ {
transform = displayObject.worldTransform; transform = displayObject.worldTransform;
if(!displayObject.visible) if(!displayObject.visible)
{ {
displayObject = displayObject.last._iNext; displayObject = displayObject.last._iNext;
continue; continue;
} }
if(!displayObject.renderable) if(!displayObject.renderable)
{ {
displayObject = displayObject._iNext; displayObject = displayObject._iNext;
continue; continue;
} }
if(displayObject instanceof PIXI.Sprite) if(displayObject instanceof PIXI.Sprite)
{ {
var frame = displayObject.texture.frame; var frame = displayObject.texture.frame;
if(frame && frame.width && frame.height) if(frame && frame.width && frame.height)
{ {
context.globalAlpha = displayObject.worldAlpha; context.globalAlpha = displayObject.worldAlpha;
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]);
context.drawImage(displayObject.texture.baseTexture.source, context.drawImage(displayObject.texture.baseTexture.source,
frame.x, frame.x,
frame.y, frame.y,
frame.width, frame.width,
frame.height, frame.height,
(displayObject.anchor.x) * -frame.width, (displayObject.anchor.x) * -frame.width,
(displayObject.anchor.y) * -frame.height, (displayObject.anchor.y) * -frame.height,
frame.width, frame.width,
frame.height); frame.height);
} }
} }
else if(displayObject instanceof PIXI.Strip) 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); this.renderStrip(displayObject);
} }
else if(displayObject instanceof PIXI.TilingSprite) 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); this.renderTilingSprite(displayObject);
} }
else if(displayObject instanceof PIXI.CustomRenderable) else if(displayObject instanceof PIXI.CustomRenderable)
{ {
displayObject.renderCanvas(this); displayObject.renderCanvas(this);
} }
else if(displayObject instanceof PIXI.Graphics) 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); PIXI.CanvasGraphics.renderGraphics(displayObject, context);
} }
else if(displayObject instanceof PIXI.FilterBlock) else if(displayObject instanceof PIXI.FilterBlock)
{ {
if(displayObject.open) if(displayObject.open)
{ {
context.save(); context.save();
var cacheAlpha = displayObject.mask.alpha; var cacheAlpha = displayObject.mask.alpha;
var maskTransform = displayObject.mask.worldTransform; var maskTransform = displayObject.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])
displayObject.mask.worldAlpha = 0.5; displayObject.mask.worldAlpha = 0.5;
context.worldAlpha = 0; context.worldAlpha = 0;
PIXI.CanvasGraphics.renderGraphicsMask(displayObject.mask, context); PIXI.CanvasGraphics.renderGraphicsMask(displayObject.mask, context);
context.clip(); context.clip();
displayObject.mask.worldAlpha = cacheAlpha; displayObject.mask.worldAlpha = cacheAlpha;
} }
else else
{ {
context.restore(); context.restore();
} }
} }
// count++ // count++
displayObject = displayObject._iNext; displayObject = displayObject._iNext;
} }
while(displayObject != testObject) while(displayObject != testObject)
} }
@ -246,32 +246,32 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
*/ */
PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip) PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip)
{ {
var context = this.context; var context = this.context;
var verticies = strip.verticies; var verticies = strip.verticies;
var uvs = strip.uvs; var uvs = strip.uvs;
var length = verticies.length/2; var length = verticies.length/2;
this.count++; this.count++;
context.beginPath(); context.beginPath();
for (var i=1; i < length-2; i++) for (var i=1; i < length-2; i++)
{ {
// draw some triangles! // draw some triangles!
var index = i*2; var index = i*2;
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; 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 y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
context.moveTo(x0, y0); context.moveTo(x0, y0);
context.lineTo(x1, y1); context.lineTo(x1, y1);
context.lineTo(x2, y2); context.lineTo(x2, y2);
}; }
context.fillStyle = "#FF0000"; context.fillStyle = "#FF0000";
context.fill(); context.fill();
context.closePath(); context.closePath();
} }
/** /**
@ -283,25 +283,25 @@ PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip)
*/ */
PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite) PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
{ {
var context = this.context; var context = this.context;
context.globalAlpha = sprite.worldAlpha; 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(); context.beginPath();
var tilePosition = sprite.tilePosition; var tilePosition = sprite.tilePosition;
var tileScale = sprite.tileScale; var tileScale = sprite.tileScale;
// offset // offset
context.scale(tileScale.x,tileScale.y); context.scale(tileScale.x,tileScale.y);
context.translate(tilePosition.x, tilePosition.y); context.translate(tilePosition.x, tilePosition.y);
context.fillStyle = sprite.__tilePattern; context.fillStyle = sprite.__tilePattern;
context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y); context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y);
context.scale(1/tileScale.x, 1/tileScale.y); context.scale(1/tileScale.x, 1/tileScale.y);
context.translate(-tilePosition.x, -tilePosition.y); context.translate(-tilePosition.x, -tilePosition.y);
context.closePath(); context.closePath();
@ -316,35 +316,35 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
*/ */
PIXI.CanvasRenderer.prototype.renderStrip = function(strip) PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
{ {
var context = this.context; var context = this.context;
// draw triangles!! // draw triangles!!
var verticies = strip.verticies; var verticies = strip.verticies;
var uvs = strip.uvs; var uvs = strip.uvs;
var length = verticies.length/2; var length = verticies.length/2;
this.count++; this.count++;
for (var i=1; i < length-2; i++) for (var i=1; i < length-2; i++)
{ {
// draw some triangles! // draw some triangles!
var index = i*2; var index = i*2;
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; 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 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 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 v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height;
context.save(); context.save();
context.beginPath(); context.beginPath();
context.moveTo(x0, y0); context.moveTo(x0, y0);
context.lineTo(x1, y1); context.lineTo(x1, y1);
context.lineTo(x2, y2); context.lineTo(x2, y2);
context.closePath(); context.closePath();
context.clip(); context.clip();
// Compute matrix transform // Compute matrix transform
@ -363,8 +363,8 @@ PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
delta_b/delta, delta_e/delta, delta_b/delta, delta_e/delta,
delta_c/delta, delta_f/delta); delta_c/delta, delta_f/delta);
context.drawImage(strip.texture.baseTexture.source, 0, 0); context.drawImage(strip.texture.baseTexture.source, 0, 0);
context.restore(); context.restore();
}; }
} }

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

@ -9,14 +9,7 @@ PIXI._batchs = [];
*/ */
PIXI._getBatch = function(gl) PIXI._getBatch = function(gl)
{ {
if(PIXI._batchs.length == 0) return PIXI._batchs.length ? new PIXI.WebGLBatch(gl) : PIXI._batchs.pop();
{
return new PIXI.WebGLBatch(gl);
}
else
{
return PIXI._batchs.pop();
}
} }
/** /**
@ -24,8 +17,8 @@ PIXI._getBatch = function(gl)
*/ */
PIXI._returnBatch = function(batch) PIXI._returnBatch = function(batch)
{ {
batch.clean(); batch.clean();
PIXI._batchs.push(batch); PIXI._batchs.push(batch);
} }
/** /**
@ -33,10 +26,10 @@ PIXI._returnBatch = function(batch)
*/ */
PIXI._restoreBatchs = function(gl) PIXI._restoreBatchs = function(gl)
{ {
for (var i=0; i < PIXI._batchs.length; i++) for (var i = 0, l = PIXI._batchs.length; i < l; i++)
{ {
PIXI._batchs[i].restoreLostContext(gl); PIXI._batchs[i].restoreLostContext(gl);
}; }
} }
/** /**
@ -53,16 +46,16 @@ PIXI._restoreBatchs = function(gl)
*/ */
PIXI.WebGLBatch = function(gl) PIXI.WebGLBatch = function(gl)
{ {
this.gl = gl; this.gl = gl;
this.size = 0; this.size = 0;
this.vertexBuffer = gl.createBuffer(); this.vertexBuffer = gl.createBuffer();
this.indexBuffer = gl.createBuffer(); this.indexBuffer = gl.createBuffer();
this.uvBuffer = gl.createBuffer(); this.uvBuffer = gl.createBuffer();
this.colorBuffer = gl.createBuffer(); this.colorBuffer = gl.createBuffer();
this.blendMode = PIXI.blendModes.NORMAL; this.blendMode = PIXI.blendModes.NORMAL;
this.dynamicSize = 1; this.dynamicSize = 1;
} }
// constructor // constructor
@ -75,16 +68,15 @@ PIXI.WebGLBatch.prototype.constructor = PIXI.WebGLBatch;
*/ */
PIXI.WebGLBatch.prototype.clean = function() PIXI.WebGLBatch.prototype.clean = function()
{ {
this.verticies = []; this.verticies = [];
this.uvs = []; this.uvs = [];
this.indices = []; this.indices = [];
this.colors = []; this.colors = [];
this.dynamicSize = 1; this.dynamicSize = 1;
this.texture = null; this.texture = null;
this.last = null; this.size = 0;
this.size = 0; this.head = null;
this.head; this.tail = null;
this.tail;
} }
/** /**
@ -95,11 +87,11 @@ PIXI.WebGLBatch.prototype.clean = function()
*/ */
PIXI.WebGLBatch.prototype.restoreLostContext = function(gl) PIXI.WebGLBatch.prototype.restoreLostContext = function(gl)
{ {
this.gl = gl; this.gl = gl;
this.vertexBuffer = gl.createBuffer(); this.vertexBuffer = gl.createBuffer();
this.indexBuffer = gl.createBuffer(); this.indexBuffer = gl.createBuffer();
this.uvBuffer = gl.createBuffer(); this.uvBuffer = gl.createBuffer();
this.colorBuffer = gl.createBuffer(); this.colorBuffer = gl.createBuffer();
} }
/** /**
@ -107,19 +99,19 @@ PIXI.WebGLBatch.prototype.restoreLostContext = function(gl)
* *
* @method init * @method init
* @param sprite {Sprite} the first sprite to be added to the batch. Only sprites with * @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 * the same base texture and blend mode will be allowed to be added to this batch
*/ */
PIXI.WebGLBatch.prototype.init = function(sprite) PIXI.WebGLBatch.prototype.init = function(sprite)
{ {
sprite.batch = this; sprite.batch = this;
this.dirty = true; this.dirty = true;
this.blendMode = sprite.blendMode; this.blendMode = sprite.blendMode;
this.texture = sprite.texture.baseTexture; this.texture = sprite.texture.baseTexture;
this.head = sprite; this.head = sprite;
this.tail = sprite; this.tail = sprite;
this.size = 1; this.size = 1;
this.growBatch(); this.growBatch();
} }
/** /**
@ -131,23 +123,23 @@ PIXI.WebGLBatch.prototype.init = function(sprite)
*/ */
PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite) PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite)
{ {
this.size++; this.size++;
sprite.batch = this; sprite.batch = this;
this.dirty = true; this.dirty = true;
var tempPrev = nextSprite.__prev; var tempPrev = nextSprite.__prev;
nextSprite.__prev = sprite; nextSprite.__prev = sprite;
sprite.__next = nextSprite; sprite.__next = nextSprite;
if(tempPrev) if(tempPrev)
{ {
sprite.__prev = tempPrev; sprite.__prev = tempPrev;
tempPrev.__next = sprite; tempPrev.__next = sprite;
} }
else else
{ {
this.head = sprite; this.head = sprite;
} }
} }
/** /**
@ -159,24 +151,24 @@ PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite)
*/ */
PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite) PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite)
{ {
this.size++; this.size++;
sprite.batch = this; sprite.batch = this;
this.dirty = true; this.dirty = true;
var tempNext = previousSprite.__next; var tempNext = previousSprite.__next;
previousSprite.__next = sprite; previousSprite.__next = sprite;
sprite.__prev = previousSprite; sprite.__prev = previousSprite;
if(tempNext) if(tempNext)
{ {
sprite.__next = tempNext; sprite.__next = tempNext;
tempNext.__prev = sprite; tempNext.__prev = sprite;
} }
else else
{ {
this.tail = sprite this.tail = sprite
} }
} }
/** /**
@ -187,40 +179,40 @@ PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite)
*/ */
PIXI.WebGLBatch.prototype.remove = function(sprite) PIXI.WebGLBatch.prototype.remove = function(sprite)
{ {
this.size--; this.size--;
if(this.size == 0) if (!this.size)
{ {
sprite.batch = null; sprite.batch = null;
sprite.__prev = null; sprite.__prev = null;
sprite.__next = null; sprite.__next = null;
return; return;
} }
if(sprite.__prev) if(sprite.__prev)
{ {
sprite.__prev.__next = sprite.__next; sprite.__prev.__next = sprite.__next;
} }
else else
{ {
this.head = sprite.__next; this.head = sprite.__next;
this.head.__prev = null; this.head.__prev = null;
} }
if(sprite.__next) if(sprite.__next)
{ {
sprite.__next.__prev = sprite.__prev; sprite.__next.__prev = sprite.__prev;
} }
else else
{ {
this.tail = sprite.__prev; this.tail = sprite.__prev;
this.tail.__next = null this.tail.__next = null
} }
sprite.batch = null; sprite.batch = null;
sprite.__next = null; sprite.__next = null;
sprite.__prev = null; sprite.__prev = null;
this.dirty = true; this.dirty = true;
} }
/** /**
@ -232,36 +224,36 @@ PIXI.WebGLBatch.prototype.remove = function(sprite)
*/ */
PIXI.WebGLBatch.prototype.split = function(sprite) PIXI.WebGLBatch.prototype.split = function(sprite)
{ {
this.dirty = true; this.dirty = true;
var batch = new PIXI.WebGLBatch(this.gl); var batch = new PIXI.WebGLBatch(this.gl);
batch.init(sprite); batch.init(sprite);
batch.texture = this.texture; batch.texture = this.texture;
batch.tail = this.tail; batch.tail = this.tail;
this.tail = sprite.__prev; this.tail = sprite.__prev;
this.tail.__next = null; this.tail.__next = null;
sprite.__prev = null; sprite.__prev = null;
// return a splite batch! // return a splite batch!
// TODO this size is wrong! // TODO this size is wrong!
// need to recalculate :/ problem with a linked list! // need to recalculate :/ problem with a linked list!
// unless it gets calculated in the "clean"? // unless it gets calculated in the "clean"?
// need to loop through items as there is no way to know the length on a linked list :/ // need to loop through items as there is no way to know the length on a linked list :/
var tempSize = 0; var tempSize = 0;
while(sprite) while(sprite)
{ {
tempSize++; tempSize++;
sprite.batch = batch; sprite.batch = batch;
sprite = sprite.__next; sprite = sprite.__next;
} }
batch.size = tempSize; batch.size = tempSize;
this.size -= tempSize; this.size -= tempSize;
return batch; return batch;
} }
/** /**
@ -272,21 +264,21 @@ PIXI.WebGLBatch.prototype.split = function(sprite)
*/ */
PIXI.WebGLBatch.prototype.merge = function(batch) PIXI.WebGLBatch.prototype.merge = function(batch)
{ {
this.dirty = true; this.dirty = true;
this.tail.__next = batch.head; this.tail.__next = batch.head;
batch.head.__prev = this.tail; batch.head.__prev = this.tail;
this.size += batch.size; this.size += batch.size;
this.tail = batch.tail; this.tail = batch.tail;
var sprite = batch.head; var sprite = batch.head;
while(sprite) while(sprite)
{ {
sprite.batch = this; sprite.batch = this;
sprite = sprite.__next; sprite = sprite.__next;
} }
} }
/** /**
@ -298,49 +290,48 @@ PIXI.WebGLBatch.prototype.merge = function(batch)
*/ */
PIXI.WebGLBatch.prototype.growBatch = function() PIXI.WebGLBatch.prototype.growBatch = function()
{ {
var gl = this.gl; var gl = this.gl;
if( this.size == 1) if( this.size == 1)
{ {
this.dynamicSize = 1; this.dynamicSize = 1;
} }
else else
{ {
this.dynamicSize = this.size * 1.5 this.dynamicSize = this.size * 1.5
} }
// grow verts // grow verts
this.verticies = new Float32Array(this.dynamicSize * 8); this.verticies = new Float32Array(this.dynamicSize * 8);
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER,this.verticies , gl.DYNAMIC_DRAW); gl.bufferData(gl.ARRAY_BUFFER,this.verticies , gl.DYNAMIC_DRAW);
this.uvs = new Float32Array( this.dynamicSize * 8 ); this.uvs = new Float32Array( this.dynamicSize * 8 );
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
gl.bufferData(gl.ARRAY_BUFFER, this.uvs , gl.DYNAMIC_DRAW); gl.bufferData(gl.ARRAY_BUFFER, this.uvs , gl.DYNAMIC_DRAW);
this.dirtyUVS = true; this.dirtyUVS = true;
this.colors = new Float32Array( this.dynamicSize * 4 ); this.colors = new Float32Array( this.dynamicSize * 4 );
gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, this.colors , gl.DYNAMIC_DRAW); gl.bufferData(gl.ARRAY_BUFFER, this.colors , gl.DYNAMIC_DRAW);
this.dirtyColors = true; 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, l = this.indices.length/6; i < l; i++)
{ {
var index2 = i * 6; var index2 = i * 6;
var index3 = i * 4; var index3 = i * 4;
this.indices[index2 + 0] = index3 + 0; this.indices[index2 + 0] = index3 + 0;
this.indices[index2 + 1] = index3 + 1; this.indices[index2 + 1] = index3 + 1;
this.indices[index2 + 2] = index3 + 2; this.indices[index2 + 2] = index3 + 2;
this.indices[index2 + 3] = index3 + 0; this.indices[index2 + 3] = index3 + 0;
this.indices[index2 + 4] = index3 + 2; this.indices[index2 + 4] = index3 + 2;
this.indices[index2 + 5] = index3 + 3; this.indices[index2 + 5] = index3 + 3;
}; }
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW);
} }
@ -351,53 +342,53 @@ PIXI.WebGLBatch.prototype.growBatch = function()
*/ */
PIXI.WebGLBatch.prototype.refresh = function() PIXI.WebGLBatch.prototype.refresh = function()
{ {
var gl = this.gl; var gl = this.gl;
if (this.dynamicSize < this.size) if (this.dynamicSize < this.size)
{ {
this.growBatch(); this.growBatch();
} }
var indexRun = 0; var indexRun = 0;
var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index;
var a, b, c, d, tx, ty; var a, b, c, d, tx, ty;
var displayObject = this.head; var displayObject = this.head;
while(displayObject) while(displayObject)
{ {
index = indexRun * 8; index = indexRun * 8;
var texture = displayObject.texture; var texture = displayObject.texture;
var frame = texture.frame; var frame = texture.frame;
var tw = texture.baseTexture.width; var tw = texture.baseTexture.width;
var th = texture.baseTexture.height; var th = texture.baseTexture.height;
this.uvs[index + 0] = frame.x / tw; this.uvs[index + 0] = frame.x / tw;
this.uvs[index +1] = frame.y / th; this.uvs[index +1] = frame.y / th;
this.uvs[index +2] = (frame.x + frame.width) / tw; this.uvs[index +2] = (frame.x + frame.width) / tw;
this.uvs[index +3] = frame.y / th; this.uvs[index +3] = frame.y / th;
this.uvs[index +4] = (frame.x + frame.width) / tw; 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 +6] = frame.x / tw;
this.uvs[index +7] = (frame.y + frame.height) / th; this.uvs[index +7] = (frame.y + frame.height) / th;
displayObject.updateFrame = false; displayObject.updateFrame = false;
colorIndex = indexRun * 4; colorIndex = indexRun * 4;
this.colors[colorIndex] = this.colors[colorIndex + 1] = this.colors[colorIndex + 2] = this.colors[colorIndex + 3] = displayObject.worldAlpha; this.colors[colorIndex] = this.colors[colorIndex + 1] = this.colors[colorIndex + 2] = this.colors[colorIndex + 3] = displayObject.worldAlpha;
displayObject = displayObject.__next; displayObject = displayObject.__next;
indexRun ++; indexRun ++;
} }
this.dirtyUVS = true; this.dirtyUVS = true;
this.dirtyColors = true; this.dirtyColors = true;
} }
/** /**
@ -407,108 +398,108 @@ PIXI.WebGLBatch.prototype.refresh = function()
*/ */
PIXI.WebGLBatch.prototype.update = function() PIXI.WebGLBatch.prototype.update = function()
{ {
var gl = this.gl; 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, index2, index3
var a, b, c, d, tx, ty; var a, b, c, d, tx, ty;
var indexRun = 0; var indexRun = 0;
var displayObject = this.head; var displayObject = this.head;
while(displayObject) while(displayObject)
{ {
if(displayObject.vcount === PIXI.visibleCount) if(displayObject.vcount === PIXI.visibleCount)
{ {
width = displayObject.texture.frame.width; width = displayObject.texture.frame.width;
height = displayObject.texture.frame.height; height = displayObject.texture.frame.height;
// TODO trim?? // TODO trim??
aX = displayObject.anchor.x;// - displayObject.texture.trim.x aX = displayObject.anchor.x;// - displayObject.texture.trim.x
aY = displayObject.anchor.y; //- displayObject.texture.trim.y aY = displayObject.anchor.y; //- displayObject.texture.trim.y
w0 = width * (1-aX); w0 = width * (1-aX);
w1 = width * -aX; w1 = width * -aX;
h0 = height * (1-aY); h0 = height * (1-aY);
h1 = height * -aY; h1 = height * -aY;
index = indexRun * 8; index = indexRun * 8;
worldTransform = displayObject.worldTransform; worldTransform = displayObject.worldTransform;
a = worldTransform[0]; a = worldTransform[0];
b = worldTransform[3]; b = worldTransform[3];
c = worldTransform[1]; c = worldTransform[1];
d = worldTransform[4]; d = worldTransform[4];
tx = worldTransform[2]; tx = worldTransform[2];
ty = worldTransform[5]; ty = worldTransform[5];
this.verticies[index + 0 ] = a * w1 + c * h1 + tx; this.verticies[index + 0 ] = a * w1 + c * h1 + tx;
this.verticies[index + 1 ] = d * h1 + b * w1 + ty; this.verticies[index + 1 ] = d * h1 + b * w1 + ty;
this.verticies[index + 2 ] = a * w0 + c * h1 + tx; this.verticies[index + 2 ] = a * w0 + c * h1 + tx;
this.verticies[index + 3 ] = d * h1 + b * w0 + ty; this.verticies[index + 3 ] = d * h1 + b * w0 + ty;
this.verticies[index + 4 ] = a * w0 + c * h0 + tx; this.verticies[index + 4 ] = a * w0 + c * h0 + tx;
this.verticies[index + 5 ] = d * h0 + b * w0 + ty; this.verticies[index + 5 ] = d * h0 + b * w0 + ty;
this.verticies[index + 6] = a * w1 + c * h0 + tx; this.verticies[index + 6] = a * w1 + c * h0 + tx;
this.verticies[index + 7] = d * h0 + b * w1 + ty; this.verticies[index + 7] = d * h0 + b * w1 + ty;
if(displayObject.updateFrame || displayObject.texture.updateFrame) if(displayObject.updateFrame || displayObject.texture.updateFrame)
{ {
this.dirtyUVS = true; this.dirtyUVS = true;
var texture = displayObject.texture; var texture = displayObject.texture;
var frame = texture.frame; var frame = texture.frame;
var tw = texture.baseTexture.width; var tw = texture.baseTexture.width;
var th = texture.baseTexture.height; var th = texture.baseTexture.height;
this.uvs[index + 0] = frame.x / tw; this.uvs[index + 0] = frame.x / tw;
this.uvs[index +1] = frame.y / th; this.uvs[index +1] = frame.y / th;
this.uvs[index +2] = (frame.x + frame.width) / tw; this.uvs[index +2] = (frame.x + frame.width) / tw;
this.uvs[index +3] = frame.y / th; this.uvs[index +3] = frame.y / th;
this.uvs[index +4] = (frame.x + frame.width) / tw; 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 +6] = frame.x / tw;
this.uvs[index +7] = (frame.y + frame.height) / th; this.uvs[index +7] = (frame.y + frame.height) / th;
displayObject.updateFrame = false; displayObject.updateFrame = false;
} }
// TODO this probably could do with some optimisation.... // TODO this probably could do with some optimisation....
if(displayObject.cacheAlpha != displayObject.worldAlpha) if(displayObject.cacheAlpha != displayObject.worldAlpha)
{ {
displayObject.cacheAlpha = displayObject.worldAlpha; displayObject.cacheAlpha = displayObject.worldAlpha;
var colorIndex = indexRun * 4; var colorIndex = indexRun * 4;
this.colors[colorIndex] = this.colors[colorIndex + 1] = this.colors[colorIndex + 2] = this.colors[colorIndex + 3] = displayObject.worldAlpha; this.colors[colorIndex] = this.colors[colorIndex + 1] = this.colors[colorIndex + 2] = this.colors[colorIndex + 3] = displayObject.worldAlpha;
this.dirtyColors = true; this.dirtyColors = true;
} }
} }
else else
{ {
index = indexRun * 8; index = indexRun * 8;
this.verticies[index + 0 ] = 0; this.verticies[index + 0 ] = 0;
this.verticies[index + 1 ] = 0; this.verticies[index + 1 ] = 0;
this.verticies[index + 2 ] = 0; this.verticies[index + 2 ] = 0;
this.verticies[index + 3 ] = 0; this.verticies[index + 3 ] = 0;
this.verticies[index + 4 ] = 0; this.verticies[index + 4 ] = 0;
this.verticies[index + 5 ] = 0; this.verticies[index + 5 ] = 0;
this.verticies[index + 6] = 0; this.verticies[index + 6] = 0;
this.verticies[index + 7] = 0; this.verticies[index + 7] = 0;
} }
indexRun++; indexRun++;
displayObject = displayObject.__next; displayObject = displayObject.__next;
} }
} }
@ -519,38 +510,38 @@ PIXI.WebGLBatch.prototype.update = function()
*/ */
PIXI.WebGLBatch.prototype.render = function(start, end) PIXI.WebGLBatch.prototype.render = function(start, end)
{ {
start = start || 0; start = start || 0;
if(end == undefined)end = this.size; if (arguments.length < 2) end = this.size;
if(this.dirty) if(this.dirty)
{ {
this.refresh(); this.refresh();
this.dirty = false; this.dirty = false;
} }
if (this.size == 0)return; if (!this.size) return;
this.update(); this.update();
var gl = this.gl; var gl = this.gl;
//TODO optimize this! //TODO optimize this!
var shaderProgram = PIXI.shaderProgram; var shaderProgram = PIXI.shaderProgram;
gl.useProgram(shaderProgram); gl.useProgram(shaderProgram);
// update the verts.. // update the verts..
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
// ok.. // ok..
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies) gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies)
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
// update the uvs // update the uvs
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
if(this.dirtyUVS) if(this.dirtyUVS)
{ {
this.dirtyUVS = false; this.dirtyUVS = false;
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvs); gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvs);
} }
gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
@ -558,21 +549,21 @@ PIXI.WebGLBatch.prototype.render = function(start, end)
gl.activeTexture(gl.TEXTURE0); gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, this.texture._glTexture); gl.bindTexture(gl.TEXTURE_2D, this.texture._glTexture);
// update color! // update color!
gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer);
if(this.dirtyColors) if(this.dirtyColors)
{ {
this.dirtyColors = false; this.dirtyColors = false;
gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.colors); gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.colors);
} }
gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shaderProgram.colorAttribute, 1, gl.FLOAT, false, 0, 0);
// dont need to upload! // dont need to upload!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
var len = end - start; var len = end - start;
// DRAW THAT this! // DRAW THAT this!
gl.drawElements(gl.TRIANGLES, len * 6, gl.UNSIGNED_SHORT, start * 2 * 6 ); gl.drawElements(gl.TRIANGLES, len * 6, gl.UNSIGNED_SHORT, start * 2 * 6 );

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

@ -23,63 +23,63 @@ PIXI.WebGLGraphics = function()
*/ */
PIXI.WebGLGraphics.renderGraphics = function(graphics, projection) PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
{ {
var gl = PIXI.gl; 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(), buffer:gl.createBuffer(),
indexBuffer:gl.createBuffer()}; indexBuffer:gl.createBuffer()};
if(graphics.dirty) if(graphics.dirty)
{ {
graphics.dirty = false; graphics.dirty = false;
if(graphics.clearDirty) if(graphics.clearDirty)
{ {
graphics.clearDirty = false; graphics.clearDirty = false;
graphics._webGL.lastIndex = 0; graphics._webGL.lastIndex = 0;
graphics._webGL.points = []; graphics._webGL.points = [];
graphics._webGL.indices = []; graphics._webGL.indices = [];
} }
PIXI.WebGLGraphics.updateGraphics(graphics); PIXI.WebGLGraphics.updateGraphics(graphics);
} }
PIXI.activatePrimitiveShader(); PIXI.activatePrimitiveShader();
// This could be speeded up fo sure! // This could be speeded up fo sure!
var m = PIXI.mat3.clone(graphics.worldTransform); var m = PIXI.mat3.clone(graphics.worldTransform);
PIXI.mat3.transpose(m); 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.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
gl.uniformMatrix3fv(PIXI.primitiveProgram.translationMatrix, false, m); gl.uniformMatrix3fv(PIXI.primitiveProgram.translationMatrix, false, m);
gl.uniform2f(PIXI.primitiveProgram.projectionVector, projection.x, projection.y); gl.uniform2f(PIXI.primitiveProgram.projectionVector, projection.x, projection.y);
gl.uniform1f(PIXI.primitiveProgram.alpha, graphics.worldAlpha); gl.uniform1f(PIXI.primitiveProgram.alpha, graphics.worldAlpha);
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
// WHY DOES THIS LINE NEED TO BE THERE??? // WHY DOES THIS LINE NEED TO BE THERE???
gl.vertexAttribPointer(PIXI.shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(PIXI.shaderProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 0, 0);
// its not even used.. but need to be set or it breaks? // its not even used.. but need to be set or it breaks?
// only on pc though.. // only on pc though..
gl.vertexAttribPointer(PIXI.primitiveProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 4 * 6, 0); gl.vertexAttribPointer(PIXI.primitiveProgram.vertexPositionAttribute, 2, gl.FLOAT, false, 4 * 6, 0);
gl.vertexAttribPointer(PIXI.primitiveProgram.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4); gl.vertexAttribPointer(PIXI.primitiveProgram.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4);
// set the index buffer! // set the index buffer!
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer);
gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 ); gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 );
// return to default shader... // return to default shader...
PIXI.activateDefaultShader(); PIXI.activateDefaultShader();
} }
/** /**
@ -92,45 +92,45 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection)
*/ */
PIXI.WebGLGraphics.updateGraphics = function(graphics) 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]; var data = graphics.graphicsData[i];
if(data.type == PIXI.Graphics.POLY) if(data.type == PIXI.Graphics.POLY)
{ {
if(data.fill) if(data.fill)
{ {
if(data.points.length>3) if(data.points.length>3)
PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); PIXI.WebGLGraphics.buildPoly(data, graphics._webGL);
} }
if(data.lineWidth > 0) if(data.lineWidth > 0)
{ {
PIXI.WebGLGraphics.buildLine(data, graphics._webGL); 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); 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); PIXI.WebGLGraphics.buildCircle(data, graphics._webGL);
} }
}; }
graphics._webGL.lastIndex = graphics.graphicsData.length; graphics._webGL.lastIndex = graphics.graphicsData.length;
var gl = PIXI.gl; var gl = PIXI.gl;
graphics._webGL.glPoints = new Float32Array(graphics._webGL.points); graphics._webGL.glPoints = new Float32Array(graphics._webGL.points);
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW); gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW);
graphics._webGL.glIndicies = new Uint16Array(graphics._webGL.indices); graphics._webGL.glIndicies = new Uint16Array(graphics._webGL.indices);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.glIndicies, gl.STATIC_DRAW); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.glIndicies, gl.STATIC_DRAW);
} }
@ -145,57 +145,57 @@ PIXI.WebGLGraphics.updateGraphics = function(graphics)
*/ */
PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData) PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
{ {
// --- // // --- //
// need to convert points to a nice regular data // need to convert points to a nice regular data
// //
var rectData = graphicsData.points; var rectData = graphicsData.points;
var x = rectData[0]; var x = rectData[0];
var y = rectData[1]; var y = rectData[1];
var width = rectData[2]; var width = rectData[2];
var height = rectData[3]; var height = rectData[3];
if(graphicsData.fill) if(graphicsData.fill)
{ {
var color = HEXtoRGB(graphicsData.fillColor); var color = hex2rgb(graphicsData.fillColor);
var alpha = graphicsData.fillAlpha; var alpha = graphicsData.fillAlpha;
var r = color[0] * alpha; var r = color[0] * alpha;
var g = color[1] * alpha; var g = color[1] * alpha;
var b = color[2] * alpha; var b = color[2] * alpha;
var verts = webGLData.points; var verts = webGLData.points;
var indices = webGLData.indices; var indices = webGLData.indices;
var vertPos = verts.length/6; var vertPos = verts.length/6;
// start // start
verts.push(x, y); verts.push(x, y);
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
verts.push(x + width, y); verts.push(x + width, y);
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
verts.push(x , y + height); verts.push(x , y + height);
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
verts.push(x + width, y + height); verts.push(x + width, y + height);
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
// insert 2 dead triangles.. // 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) if(graphicsData.lineWidth)
{ {
graphicsData.points = [x, y, graphicsData.points = [x, y,
x + width, y, x + width, y,
x + width, y + height, x + width, y + height,
x, y + height, x, y + height,
x, y]; x, y];
PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); PIXI.WebGLGraphics.buildLine(graphicsData, webGLData);
} }
} }
@ -210,60 +210,61 @@ PIXI.WebGLGraphics.buildRectangle = function(graphicsData, webGLData)
*/ */
PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData) PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
{ {
// --- // // --- //
// need to convert points to a nice regular data // need to convert points to a nice regular data
// //
var rectData = graphicsData.points; var rectData = graphicsData.points;
var x = rectData[0]; var x = rectData[0];
var y = rectData[1]; var y = rectData[1];
var width = rectData[2]; var width = rectData[2];
var height = rectData[3]; var height = rectData[3];
var totalSegs = 40; var totalSegs = 40;
var seg = (Math.PI * 2) / totalSegs ; var seg = (Math.PI * 2) / totalSegs ;
var i;
if(graphicsData.fill) if (graphicsData.fill)
{ {
var color = HEXtoRGB(graphicsData.fillColor); var color = hex2rgb(graphicsData.fillColor);
var alpha = graphicsData.fillAlpha; var alpha = graphicsData.fillAlpha;
var r = color[0] * alpha; var r = color[0] * alpha;
var g = color[1] * alpha; var g = color[1] * alpha;
var b = color[2] * alpha; var b = color[2] * alpha;
var verts = webGLData.points; var verts = webGLData.points;
var indices = webGLData.indices; var indices = webGLData.indices;
var vecPos = verts.length/6; var vecPos = verts.length/6;
indices.push(vecPos); 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,y, r, g, b, alpha);
verts.push(x + Math.sin(seg * i) * width, verts.push(x + Math.sin(seg * i) * width,
y + Math.cos(seg * i) * height, y + Math.cos(seg * i) * height,
r, g, b, alpha); r, g, b, alpha);
indices.push(vecPos++, vecPos++); indices.push(vecPos++, vecPos++);
}; }
indices.push(vecPos-1); indices.push(vecPos-1);
} }
if(graphicsData.lineWidth) if (graphicsData.lineWidth)
{ {
graphicsData.points = []; 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, 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); PIXI.WebGLGraphics.buildLine(graphicsData, webGLData);
} }
} }
@ -278,184 +279,184 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
*/ */
PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData) PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
{ {
// TODO OPTIMISE! // TODO OPTIMISE!
var wrap = true; var wrap = true;
var points = graphicsData.points; var points = graphicsData.points;
if(points.length == 0)return; if (points.length === 0) return;
// get first and last point.. figure out the middle! // get first and last point.. figure out the middle!
var firstPoint = new PIXI.Point( points[0], points[1] ); var firstPoint = new PIXI.Point( points[0], points[1] );
var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 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 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();
points.pop(); points.pop();
lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] );
var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5;
var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5;
points.unshift(midPointX, midPointY); points.unshift(midPointX, midPointY);
points.push(midPointX, midPointY) points.push(midPointX, midPointY)
} }
var verts = webGLData.points; var verts = webGLData.points;
var indices = webGLData.indices; var indices = webGLData.indices;
var length = points.length / 2; var length = points.length / 2;
var indexCount = points.length; var indexCount = points.length;
var indexStart = verts.length/6; var indexStart = verts.length/6;
// DRAW the Line // DRAW the Line
var width = graphicsData.lineWidth / 2; var width = graphicsData.lineWidth / 2;
// sort color // sort color
var color = HEXtoRGB(graphicsData.lineColor); var color = hex2rgb(graphicsData.lineColor);
var alpha = graphicsData.lineAlpha; var alpha = graphicsData.lineAlpha;
var r = color[0] * alpha; var r = color[0] * alpha;
var g = color[1] * alpha; var g = color[1] * alpha;
var b = color[2] * alpha; var b = color[2] * alpha;
var p1x, p1y, p2x, p2y, p3x, p3y; var p1x, p1y, p2x, p2y, p3x, p3y;
var perpx, perpy, perp2x, perp2y, perp3x, perp3y; var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
var ipx, ipy; var ipx, ipy;
var a1, b1, c1, a2, b2, c2; var a1, b1, c1, a2, b2, c2;
var denom, pdist, dist; var denom, pdist, dist;
p1x = points[0]; p1x = points[0];
p1y = points[1]; p1y = points[1];
p2x = points[2]; p2x = points[2];
p2y = points[3]; p2y = points[3];
perpx = -(p1y - p2y); perpx = -(p1y - p2y);
perpy = p1x - p2x; perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy); dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist; perpx /= dist;
perpy /= dist; perpy /= dist;
perpx *= width; perpx *= width;
perpy *= width; perpy *= width;
// start // start
verts.push(p1x - perpx , p1y - perpy, verts.push(p1x - perpx , p1y - perpy,
r, g, b, alpha); r, g, b, alpha);
verts.push(p1x + perpx , p1y + perpy, verts.push(p1x + perpx , p1y + perpy,
r, g, b, alpha); r, g, b, alpha);
for (var i = 1; i < length-1; i++) for (var i = 1; i < length-1; i++)
{ {
p1x = points[(i-1)*2]; p1x = points[(i-1)*2];
p1y = points[(i-1)*2 + 1]; p1y = points[(i-1)*2 + 1];
p2x = points[(i)*2] p2x = points[(i)*2]
p2y = points[(i)*2 + 1] p2y = points[(i)*2 + 1]
p3x = points[(i+1)*2]; p3x = points[(i+1)*2];
p3y = points[(i+1)*2 + 1]; p3y = points[(i+1)*2 + 1];
perpx = -(p1y - p2y); perpx = -(p1y - p2y);
perpy = p1x - p2x; perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy); dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist; perpx /= dist;
perpy /= dist; perpy /= dist;
perpx *= width; perpx *= width;
perpy *= width; perpy *= width;
perp2x = -(p2y - p3y); perp2x = -(p2y - p3y);
perp2y = p2x - p3x; perp2y = p2x - p3x;
dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y); dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
perp2x /= dist; perp2x /= dist;
perp2y /= dist; perp2y /= dist;
perp2x *= width; perp2x *= width;
perp2y *= width; perp2y *= width;
a1 = (-perpy + p1y) - (-perpy + p2y); a1 = (-perpy + p1y) - (-perpy + p2y);
b1 = (-perpx + p2x) - (-perpx + p1x); b1 = (-perpx + p2x) - (-perpx + p1x);
c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y); c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
a2 = (-perp2y + p3y) - (-perp2y + p2y); a2 = (-perp2y + p3y) - (-perp2y + p2y);
b2 = (-perp2x + p2x) - (-perp2x + p3x); b2 = (-perp2x + p2x) - (-perp2x + p3x);
c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y); c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
denom = a1*b2 - a2*b1; denom = a1*b2 - a2*b1;
if (denom == 0) { if (denom === 0) {
denom+=1; denom+=1;
} }
px = (b1*c2 - b2*c1)/denom; px = (b1*c2 - b2*c1)/denom;
py = (a2*c1 - a1*c2)/denom; py = (a2*c1 - a1*c2)/denom;
pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y); pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
if(pdist > 140 * 140) if(pdist > 140 * 140)
{ {
perp3x = perpx - perp2x; perp3x = perpx - perp2x;
perp3y = perpy - perp2y; perp3y = perpy - perp2y;
dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y); dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
perp3x /= dist; perp3x /= dist;
perp3y /= dist; perp3y /= dist;
perp3x *= width; perp3x *= width;
perp3y *= width; perp3y *= width;
verts.push(p2x - perp3x, p2y -perp3y); verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
verts.push(p2x + perp3x, p2y +perp3y); verts.push(p2x + perp3x, p2y +perp3y);
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
verts.push(p2x - perp3x, p2y -perp3y); verts.push(p2x - perp3x, p2y -perp3y);
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
indexCount++; indexCount++;
} }
else else
{ {
verts.push(px , py); verts.push(px , py);
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
verts.push(p2x - (px-p2x), p2y - (py - p2y)); verts.push(p2x - (px-p2x), p2y - (py - p2y));
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
} }
} }
p1x = points[(length-2)*2] p1x = points[(length-2)*2]
p1y = points[(length-2)*2 + 1] p1y = points[(length-2)*2 + 1]
p2x = points[(length-1)*2] p2x = points[(length-1)*2]
p2y = points[(length-1)*2 + 1] p2y = points[(length-1)*2 + 1]
perpx = -(p1y - p2y) perpx = -(p1y - p2y)
perpy = p1x - p2x; perpy = p1x - p2x;
dist = Math.sqrt(perpx*perpx + perpy*perpy); dist = Math.sqrt(perpx*perpx + perpy*perpy);
perpx /= dist; perpx /= dist;
perpy /= dist; perpy /= dist;
perpx *= width; perpx *= width;
perpy *= width; perpy *= width;
verts.push(p2x - perpx , p2y - perpy) verts.push(p2x - perpx , p2y - perpy)
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
verts.push(p2x + perpx , p2y + perpy) verts.push(p2x + perpx , p2y + perpy)
verts.push(r, g, b, alpha); verts.push(r, g, b, alpha);
indices.push(indexStart); indices.push(indexStart);
for (var i=0; i < indexCount; i++) for (i = 0; i < indexCount; i++)
{ {
indices.push(indexStart++); indices.push(indexStart++);
}; }
indices.push(indexStart-1); indices.push(indexStart-1);
} }
/** /**
@ -469,46 +470,37 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
*/ */
PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData) PIXI.WebGLGraphics.buildPoly = function(graphicsData, webGLData)
{ {
var points = graphicsData.points; var points = graphicsData.points;
if(points.length < 6)return; if (points.length < 6) return;
// get first and last point.. figure out the middle! // get first and last point.. figure out the middle!
var verts = webGLData.points; var verts = webGLData.points;
var indices = webGLData.indices; var indices = webGLData.indices;
var length = points.length / 2; var triangles = PIXI.PolyK.Triangulate(points);
var vertPos = verts.length / 6;
// sort color for (var i = 0, l = triangles.length; i < l; i+=3)
var color = HEXtoRGB(graphicsData.fillColor); {
var alpha = graphicsData.fillAlpha; indices.push(triangles[i] + vertPos);
var r = color[0] * alpha; indices.push(triangles[i] + vertPos);
var g = color[1] * alpha; indices.push(triangles[i+1] + vertPos);
var b = color[2] * alpha; indices.push(triangles[i+2] +vertPos);
indices.push(triangles[i+2] + vertPos);
}
var triangles = PIXI.PolyK.Triangulate(points); // sort color
var color = hex2rgb(graphicsData.fillColor);
var alpha = graphicsData.fillAlpha;
var r = color[0] * alpha;
var g = color[1] * alpha;
var b = color[2] * alpha;
var vertPos = verts.length / 6; for (i = 0, l = points.length / 2; i < l; i++)
{
for (var i=0; i < triangles.length; i+=3) verts.push(points[i * 2], points[i * 2 + 1],
{ r, g, b, alpha);
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++)
{
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];
} }

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

File diff suppressed because it is too large Load diff

302
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.. // an instance of the gl context..
// only one at the moment :/ // 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 * the WebGLRenderer is draws the stage and all its content onto a webGL enabled canvas. This renderer
@ -25,36 +25,36 @@ PIXI.gl;
*/ */
PIXI.WebGLRenderer = function(width, height, view, transparent, antialias) PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
{ {
// do a catch.. only 1 webGL renderer.. // do a catch.. only 1 webGL renderer..
this.transparent = !!transparent; this.transparent = !!transparent;
this.width = width || 800; this.width = width || 800;
this.height = height || 600; this.height = height || 600;
this.view = view || document.createElement( 'canvas' ); this.view = view || document.createElement( 'canvas' );
this.view.width = this.width; this.view.width = this.width;
this.view.height = this.height; this.view.height = this.height;
// deal with losing context.. // deal with losing context..
var scope = this; var scope = this;
this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false) this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false)
this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false) this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false)
this.batchs = []; this.batchs = [];
try try
{ {
PIXI.gl = this.gl = this.view.getContext("experimental-webgl", { PIXI.gl = this.gl = this.view.getContext("experimental-webgl", {
alpha: this.transparent, alpha: this.transparent,
antialias:!!antialias, // SPEED UP?? antialias:!!antialias, // SPEED UP??
premultipliedAlpha:false, premultipliedAlpha:false,
stencil:true stencil:true
}); });
} }
catch (e) catch (e)
{ {
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.initPrimitiveShader(); PIXI.initPrimitiveShader();
@ -67,8 +67,8 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
PIXI.WebGLRenderer.gl = gl; PIXI.WebGLRenderer.gl = gl;
this.batch = new PIXI.WebGLBatch(gl); this.batch = new PIXI.WebGLBatch(gl);
gl.disable(gl.DEPTH_TEST); gl.disable(gl.DEPTH_TEST);
gl.disable(gl.CULL_FACE); gl.disable(gl.CULL_FACE);
gl.enable(gl.BLEND); gl.enable(gl.BLEND);
gl.colorMask(true, true, true, this.transparent); gl.colorMask(true, true, true, this.transparent);
@ -94,14 +94,14 @@ PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer;
*/ */
PIXI.WebGLRenderer.getBatch = function() PIXI.WebGLRenderer.getBatch = function()
{ {
if(PIXI._batchs.length == 0) if(!PIXI._batchs.length)
{ {
return new PIXI.WebGLBatch(PIXI.WebGLRenderer.gl); return new PIXI.WebGLBatch(PIXI.WebGLRenderer.gl);
} }
else else
{ {
return PIXI._batchs.pop(); return PIXI._batchs.pop();
} }
} }
/** /**
@ -114,8 +114,8 @@ PIXI.WebGLRenderer.getBatch = function()
*/ */
PIXI.WebGLRenderer.returnBatch = function(batch) PIXI.WebGLRenderer.returnBatch = function(batch)
{ {
batch.clean(); batch.clean();
PIXI._batchs.push(batch); PIXI._batchs.push(batch);
} }
/** /**
@ -126,72 +126,72 @@ PIXI.WebGLRenderer.returnBatch = function(batch)
*/ */
PIXI.WebGLRenderer.prototype.render = function(stage) PIXI.WebGLRenderer.prototype.render = function(stage)
{ {
if(this.contextLost)return; if(this.contextLost)return;
// if rendering a new stage clear the batchs.. // if rendering a new stage clear the batchs..
if(this.__stage !== stage) if(this.__stage !== stage)
{ {
// TODO make this work // TODO make this work
// dont think this is needed any more? // dont think this is needed any more?
this.__stage = stage; this.__stage = stage;
this.stageRenderGroup.setRenderable(stage); this.stageRenderGroup.setRenderable(stage);
} }
// TODO not needed now... // TODO not needed now...
// update children if need be // update children if need be
// best to remove first! // best to remove first!
/*for (var i=0; i < stage.__childrenRemoved.length; i++) /*for (var i=0; i < stage.__childrenRemoved.length; i++)
{ {
var group = stage.__childrenRemoved[i].__renderGroup var group = stage.__childrenRemoved[i].__renderGroup
if(group)group.removeDisplayObject(stage.__childrenRemoved[i]); if(group)group.removeDisplayObject(stage.__childrenRemoved[i]);
}*/ }*/
// update any textures // update any textures
PIXI.WebGLRenderer.updateTextures(); PIXI.WebGLRenderer.updateTextures();
// update the scene graph // update the scene graph
PIXI.visibleCount++; PIXI.visibleCount++;
stage.updateTransform(); stage.updateTransform();
var gl = this.gl; var gl = this.gl;
// -- Does this need to be set every frame? -- // // -- Does this need to be set every frame? -- //
gl.colorMask(true, true, true, this.transparent); gl.colorMask(true, true, true, this.transparent);
gl.viewport(0, 0, this.width, this.height); gl.viewport(0, 0, this.width, this.height);
gl.bindFramebuffer(gl.FRAMEBUFFER, null); 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); gl.clear(gl.COLOR_BUFFER_BIT);
// HACK TO TEST // HACK TO TEST
this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit; // this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit;
this.stageRenderGroup.render(PIXI.projection); this.stageRenderGroup.render(PIXI.projection);
// interaction // interaction
// run interaction! // run interaction!
if(stage.interactive) if(stage.interactive)
{ {
//need to add some events! //need to add some events!
if(!stage._interactiveEventsAdded) if(!stage._interactiveEventsAdded)
{ {
stage._interactiveEventsAdded = true; stage._interactiveEventsAdded = true;
stage.interactionManager.setTarget(this); stage.interactionManager.setTarget(this);
} }
} }
// after rendering lets confirm all frames that have been uodated.. // after rendering lets confirm all frames that have been uodated..
if(PIXI.Texture.frameUpdates.length > 0) if(PIXI.Texture.frameUpdates.length > 0)
{ {
for (var i=0; i < PIXI.Texture.frameUpdates.length; i++) for (var i = 0, l = PIXI.Texture.frameUpdates.length; i < l; i++)
{ {
PIXI.Texture.frameUpdates[i].updateFrame = false; PIXI.Texture.frameUpdates[i].updateFrame = false;
}; }
PIXI.Texture.frameUpdates = []; PIXI.Texture.frameUpdates = [];
} }
} }
/** /**
@ -203,11 +203,13 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
*/ */
PIXI.WebGLRenderer.updateTextures = function() PIXI.WebGLRenderer.updateTextures = function()
{ {
//TODO break this out into a texture manager... //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, l = PIXI.texturesToUpdate.length; i < l; i++)
for (var i=0; i < PIXI.texturesToDestroy.length; i++) PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]); PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]);
PIXI.texturesToUpdate = []; for (i = 0, l = PIXI.texturesToDestroy.length; i < l; i++)
PIXI.texturesToDestroy = []; PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]);
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
} }
/** /**
@ -220,38 +222,38 @@ PIXI.WebGLRenderer.updateTextures = function()
*/ */
PIXI.WebGLRenderer.updateTexture = function(texture) PIXI.WebGLRenderer.updateTexture = function(texture)
{ {
//TODO break this out into a texture manager... //TODO break this out into a texture manager...
var gl = PIXI.gl; var gl = PIXI.gl;
if(!texture._glTexture) if(!texture._glTexture)
{ {
texture._glTexture = gl.createTexture(); texture._glTexture = gl.createTexture();
} }
if(texture.hasLoaded) if(texture.hasLoaded)
{ {
gl.bindTexture(gl.TEXTURE_2D, texture._glTexture); gl.bindTexture(gl.TEXTURE_2D, texture._glTexture);
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 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_MIN_FILTER, gl.LINEAR);
// reguler... // reguler...
if(!texture._powerOf2) if(!texture._powerOf2)
{ {
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
} }
else else
{ {
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
} }
gl.bindTexture(gl.TEXTURE_2D, null); gl.bindTexture(gl.TEXTURE_2D, null);
} }
} }
/** /**
@ -263,14 +265,14 @@ PIXI.WebGLRenderer.updateTexture = function(texture)
*/ */
PIXI.WebGLRenderer.destroyTexture = function(texture) PIXI.WebGLRenderer.destroyTexture = function(texture)
{ {
//TODO break this out into a texture manager... //TODO break this out into a texture manager...
var gl = PIXI.gl; var gl = PIXI.gl;
if(texture._glTexture) if(texture._glTexture)
{ {
texture._glTexture = gl.createTexture(); texture._glTexture = gl.createTexture();
gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture); gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture);
} }
} }
/** /**
@ -282,23 +284,23 @@ PIXI.WebGLRenderer.destroyTexture = function(texture)
*/ */
PIXI.WebGLRenderer.prototype.resize = function(width, height) PIXI.WebGLRenderer.prototype.resize = function(width, height)
{ {
this.width = width; this.width = width;
this.height = height; this.height = height;
this.view.width = width; this.view.width = width;
this.view.height = height; 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; //var projectionMatrix = this.projectionMatrix;
PIXI.projection.x = this.width/2; PIXI.projection.x = this.width/2;
PIXI.projection.y = this.height/2; PIXI.projection.y = this.height/2;
// projectionMatrix[0] = 2/this.width; // projectionMatrix[0] = 2/this.width;
// projectionMatrix[5] = -2/this.height; // projectionMatrix[5] = -2/this.height;
// projectionMatrix[12] = -1; // projectionMatrix[12] = -1;
// projectionMatrix[13] = 1; // projectionMatrix[13] = 1;
} }
/** /**
@ -310,8 +312,8 @@ PIXI.WebGLRenderer.prototype.resize = function(width, height)
*/ */
PIXI.WebGLRenderer.prototype.handleContextLost = function(event) PIXI.WebGLRenderer.prototype.handleContextLost = function(event)
{ {
event.preventDefault(); event.preventDefault();
this.contextLost = true; this.contextLost = true;
} }
/** /**
@ -323,26 +325,26 @@ PIXI.WebGLRenderer.prototype.handleContextLost = function(event)
*/ */
PIXI.WebGLRenderer.prototype.handleContextRestored = function(event) PIXI.WebGLRenderer.prototype.handleContextRestored = function(event)
{ {
this.gl = this.view.getContext("experimental-webgl", { this.gl = this.view.getContext("experimental-webgl", {
alpha: true alpha: true
}); });
this.initShaders(); this.initShaders();
for(var key in PIXI.TextureCache) for(var key in PIXI.TextureCache)
{ {
var texture = PIXI.TextureCache[key].baseTexture; var texture = PIXI.TextureCache[key].baseTexture;
texture._glTexture = null; texture._glTexture = null;
PIXI.WebGLRenderer.updateTexture(texture); PIXI.WebGLRenderer.updateTexture(texture);
}; }
for (var i=0; i < this.batchs.length; i++) for (var i = 0, l = this.batchs.length; i < l; i++)
{ {
this.batchs[i].restoreLostContext(this.gl)// this.batchs[i].restoreLostContext(this.gl)//
this.batchs[i].dirty = true; this.batchs[i].dirty = true;
}; }
PIXI._restoreBatchs(this.gl); PIXI._restoreBatchs(this.gl);
this.contextLost = false; this.contextLost = false;
} }

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

@ -62,7 +62,7 @@ PIXI.stripShaderVertexSrc = [
"varying vec2 vTextureCoord;", "varying vec2 vTextureCoord;",
"varying float vColor;", "varying float vColor;",
"void main(void) {", "void main(void) {",
"vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);", "vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);",
"gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);", "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);",
"vTextureCoord = aTextureCoord;", "vTextureCoord = aTextureCoord;",
"vColor = aColor;", "vColor = aColor;",
@ -90,7 +90,7 @@ PIXI.primitiveShaderVertexSrc = [
"uniform float alpha;", "uniform float alpha;",
"varying vec4 vColor;", "varying vec4 vColor;",
"void main(void) {", "void main(void) {",
"vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);", "vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);",
"gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);", "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);",
"vColor = aColor * alpha;", "vColor = aColor * alpha;",
"}" "}"
@ -98,9 +98,9 @@ PIXI.primitiveShaderVertexSrc = [
PIXI.initPrimitiveShader = function() PIXI.initPrimitiveShader = function()
{ {
var gl = PIXI.gl; var gl = PIXI.gl;
var shaderProgram = PIXI.compileProgram(PIXI.primitiveShaderVertexSrc, PIXI.primitiveShaderFragmentSrc) var shaderProgram = PIXI.compileProgram(PIXI.primitiveShaderVertexSrc, PIXI.primitiveShaderFragmentSrc)
gl.useProgram(shaderProgram); gl.useProgram(shaderProgram);
@ -110,49 +110,49 @@ PIXI.initPrimitiveShader = function()
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector"); shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector");
shaderProgram.translationMatrix = gl.getUniformLocation(shaderProgram, "translationMatrix"); shaderProgram.translationMatrix = gl.getUniformLocation(shaderProgram, "translationMatrix");
shaderProgram.alpha = gl.getUniformLocation(shaderProgram, "alpha"); shaderProgram.alpha = gl.getUniformLocation(shaderProgram, "alpha");
PIXI.primitiveProgram = shaderProgram; PIXI.primitiveProgram = shaderProgram;
} }
PIXI.initDefaultShader = function() PIXI.initDefaultShader = function()
{ {
var gl = this.gl; var gl = this.gl;
var shaderProgram = PIXI.compileProgram(PIXI.shaderVertexSrc, PIXI.shaderFragmentSrc) var shaderProgram = PIXI.compileProgram(PIXI.shaderVertexSrc, PIXI.shaderFragmentSrc)
gl.useProgram(shaderProgram); gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector"); shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector");
shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord"); shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor"); shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor");
// shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix"); // shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler"); shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
PIXI.shaderProgram = shaderProgram; PIXI.shaderProgram = shaderProgram;
} }
PIXI.initDefaultStripShader = function() PIXI.initDefaultStripShader = function()
{ {
var gl = this.gl; var gl = this.gl;
var shaderProgram = PIXI.compileProgram(PIXI.stripShaderVertexSrc, PIXI.stripShaderFragmentSrc) var shaderProgram = PIXI.compileProgram(PIXI.stripShaderVertexSrc, PIXI.stripShaderFragmentSrc)
gl.useProgram(shaderProgram); gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector"); shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector");
shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord"); shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
shaderProgram.translationMatrix = gl.getUniformLocation(shaderProgram, "translationMatrix"); shaderProgram.translationMatrix = gl.getUniformLocation(shaderProgram, "translationMatrix");
shaderProgram.alpha = gl.getUniformLocation(shaderProgram, "alpha"); shaderProgram.alpha = gl.getUniformLocation(shaderProgram, "alpha");
shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor"); shaderProgram.colorAttribute = gl.getAttribLocation(shaderProgram, "aColor");
shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector"); shaderProgram.projectionVector = gl.getUniformLocation(shaderProgram, "projectionVector");
shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler"); shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
PIXI.stripShaderProgram = shaderProgram; PIXI.stripShaderProgram = shaderProgram;
} }
PIXI.CompileVertexShader = function(gl, shaderSrc) PIXI.CompileVertexShader = function(gl, shaderSrc)
@ -183,11 +183,11 @@ PIXI._CompileShader = function(gl, shaderSrc, shaderType)
PIXI.compileProgram = function(vertexSrc, fragmentSrc) PIXI.compileProgram = function(vertexSrc, fragmentSrc)
{ {
var gl = PIXI.gl; var gl = PIXI.gl;
var fragmentShader = PIXI.CompileFragmentShader(gl, fragmentSrc); var fragmentShader = PIXI.CompileFragmentShader(gl, fragmentSrc);
var vertexShader = PIXI.CompileVertexShader(gl, vertexSrc); var vertexShader = PIXI.CompileVertexShader(gl, vertexSrc);
var shaderProgram = gl.createProgram(); var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader); gl.attachShader(shaderProgram, fragmentShader);
@ -197,19 +197,19 @@ PIXI.compileProgram = function(vertexSrc, fragmentSrc)
alert("Could not initialise shaders"); alert("Could not initialise shaders");
} }
return shaderProgram; return shaderProgram;
} }
PIXI.activateDefaultShader = function() PIXI.activateDefaultShader = function()
{ {
var gl = PIXI.gl; var gl = PIXI.gl;
var shaderProgram = PIXI.shaderProgram; var shaderProgram = PIXI.shaderProgram;
gl.useProgram(shaderProgram); gl.useProgram(shaderProgram);
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute); gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute); gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
gl.enableVertexAttribArray(shaderProgram.colorAttribute); gl.enableVertexAttribArray(shaderProgram.colorAttribute);
} }
@ -218,14 +218,14 @@ PIXI.activateDefaultShader = function()
PIXI.activatePrimitiveShader = function() PIXI.activatePrimitiveShader = function()
{ {
var gl = PIXI.gl; var gl = PIXI.gl;
gl.disableVertexAttribArray(PIXI.shaderProgram.textureCoordAttribute); gl.disableVertexAttribArray(PIXI.shaderProgram.textureCoordAttribute);
gl.disableVertexAttribArray(PIXI.shaderProgram.colorAttribute); gl.disableVertexAttribArray(PIXI.shaderProgram.colorAttribute);
gl.useProgram(PIXI.primitiveProgram); gl.useProgram(PIXI.primitiveProgram);
gl.enableVertexAttribArray(PIXI.primitiveProgram.vertexPositionAttribute); gl.enableVertexAttribArray(PIXI.primitiveProgram.vertexPositionAttribute);
gl.enableVertexAttribArray(PIXI.primitiveProgram.colorAttribute); gl.enableVertexAttribArray(PIXI.primitiveProgram.colorAttribute);
} }

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

@ -147,8 +147,8 @@ PIXI.BitmapText.prototype.updateText = function()
*/ */
PIXI.BitmapText.prototype.updateTransform = function() PIXI.BitmapText.prototype.updateTransform = function()
{ {
if(this.dirty) if(this.dirty)
{ {
while(this.children.length > 0) while(this.children.length > 0)
{ {
this.removeChild(this.getChildAt(0)); this.removeChild(this.getChildAt(0));
@ -156,9 +156,9 @@ PIXI.BitmapText.prototype.updateTransform = function()
this.updateText(); this.updateText();
this.dirty = false; this.dirty = false;
} }
PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
}; };
PIXI.BitmapText.fonts = {}; PIXI.BitmapText.fonts = {};

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

@ -82,65 +82,65 @@ PIXI.Text.prototype.setText = function(text)
*/ */
PIXI.Text.prototype.updateText = function() PIXI.Text.prototype.updateText = function()
{ {
this.context.font = this.style.font; this.context.font = this.style.font;
var outputText = this.text; var outputText = this.text;
// word wrap // word wrap
// preserve original text // preserve original text
if(this.style.wordWrap)outputText = this.wordWrap(this.text); if(this.style.wordWrap)outputText = this.wordWrap(this.text);
//split text into lines //split text into lines
var lines = outputText.split(/(?:\r\n|\r|\n)/); var lines = outputText.split(/(?:\r\n|\r|\n)/);
//calculate text width //calculate text width
var lineWidths = []; var lineWidths = [];
var maxLineWidth = 0; var maxLineWidth = 0;
for (var i = 0; i < lines.length; i++) for (var i = 0; i < lines.length; i++)
{ {
var lineWidth = this.context.measureText(lines[i]).width; var lineWidth = this.context.measureText(lines[i]).width;
lineWidths[i] = lineWidth; lineWidths[i] = lineWidth;
maxLineWidth = Math.max(maxLineWidth, lineWidth); maxLineWidth = Math.max(maxLineWidth, lineWidth);
} }
this.canvas.width = maxLineWidth + this.style.strokeThickness; this.canvas.width = maxLineWidth + this.style.strokeThickness;
//calculate text height //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; this.canvas.height = lineHeight * lines.length;
//set canvas text styles //set canvas text styles
this.context.fillStyle = this.style.fill; this.context.fillStyle = this.style.fill;
this.context.font = this.style.font; this.context.font = this.style.font;
this.context.strokeStyle = this.style.stroke; this.context.strokeStyle = this.style.stroke;
this.context.lineWidth = this.style.strokeThickness; this.context.lineWidth = this.style.strokeThickness;
this.context.textBaseline = "top"; this.context.textBaseline = "top";
//draw lines line by line //draw lines line by line
for (i = 0; i < lines.length; i++) for (i = 0; i < lines.length; i++)
{ {
var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); 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]; linePosition.x += maxLineWidth - lineWidths[i];
} }
else if(this.style.align == "center") else if(this.style.align == "center")
{ {
linePosition.x += (maxLineWidth - lineWidths[i]) / 2; linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
} }
if(this.style.stroke && this.style.strokeThickness) if(this.style.stroke && this.style.strokeThickness)
{ {
this.context.strokeText(lines[i], linePosition.x, linePosition.y); this.context.strokeText(lines[i], linePosition.x, linePosition.y);
} }
if(this.style.fill) if(this.style.fill)
{ {
this.context.fillText(lines[i], linePosition.x, linePosition.y); this.context.fillText(lines[i], linePosition.x, linePosition.y);
} }
} }
this.updateTexture(); this.updateTexture();
}; };
@ -158,7 +158,7 @@ PIXI.Text.prototype.updateTexture = function()
this.texture.frame.width = this.canvas.width; this.texture.frame.width = this.canvas.width;
this.texture.frame.height = this.canvas.height; this.texture.frame.height = this.canvas.height;
this._width = this.canvas.width; this._width = this.canvas.width;
this._height = this.canvas.height; this._height = this.canvas.height;
PIXI.texturesToUpdate.push(this.texture.baseTexture); PIXI.texturesToUpdate.push(this.texture.baseTexture);
@ -172,13 +172,13 @@ PIXI.Text.prototype.updateTexture = function()
*/ */
PIXI.Text.prototype.updateTransform = function() PIXI.Text.prototype.updateTransform = function()
{ {
if(this.dirty) if(this.dirty)
{ {
this.updateText(); this.updateText();
this.dirty = false; this.dirty = false;
} }
PIXI.Sprite.prototype.updateTransform.call(this); PIXI.Sprite.prototype.updateTransform.call(this);
}; };
/* /*
@ -191,26 +191,26 @@ PIXI.Text.prototype.updateTransform = function()
*/ */
PIXI.Text.prototype.determineFontHeight = function(fontStyle) PIXI.Text.prototype.determineFontHeight = function(fontStyle)
{ {
// build a little reference dictionary so if the font style has been used return a // build a little reference dictionary so if the font style has been used return a
// cached version... // cached version...
var result = PIXI.Text.heightCache[fontStyle]; var result = PIXI.Text.heightCache[fontStyle];
if(!result) if(!result)
{ {
var body = document.getElementsByTagName("body")[0]; var body = document.getElementsByTagName("body")[0];
var dummy = document.createElement("div"); var dummy = document.createElement("div");
var dummyText = document.createTextNode("M"); var dummyText = document.createTextNode("M");
dummy.appendChild(dummyText); 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); body.appendChild(dummy);
result = dummy.offsetHeight; result = dummy.offsetHeight;
PIXI.Text.heightCache[fontStyle] = result; PIXI.Text.heightCache[fontStyle] = result;
body.removeChild(dummy); body.removeChild(dummy);
} }
return result; return result;
}; };
/** /**
@ -222,49 +222,49 @@ PIXI.Text.prototype.determineFontHeight = function(fontStyle)
*/ */
PIXI.Text.prototype.wordWrap = function(text) PIXI.Text.prototype.wordWrap = function(text)
{ {
// search good wrap position // search good wrap position
var searchWrapPos = function(ctx, text, start, end, wrapWidth) function searchWrapPos(ctx, text, start, end, wrapWidth)
{ {
var p = Math.floor((end-start) / 2) + start; var p = Math.floor((end-start) / 2) + start;
if(p == start) { if(p == start) {
return 1; return 1;
} }
if(ctx.measureText(text.substring(0,p)).width <= wrapWidth) if(ctx.measureText(text.substring(0,p)).width <= wrapWidth)
{ {
if(ctx.measureText(text.substring(0,p+1)).width > wrapWidth) if(ctx.measureText(text.substring(0,p+1)).width > wrapWidth)
{ {
return p; return p;
} }
else else
{ {
return arguments.callee(ctx, text, p, end, wrapWidth); return searchWrapPos(ctx, text, p, end, wrapWidth);
} }
} }
else else
{ {
return arguments.callee(ctx, text, start, p, wrapWidth); return searchWrapPos(ctx, text, start, p, wrapWidth);
} }
}; }
var lineWrap = function(ctx, text, wrapWidth) function lineWrap(ctx, text, wrapWidth)
{ {
if(ctx.measureText(text).width <= wrapWidth || text.length < 1) if(ctx.measureText(text).width <= wrapWidth || text.length < 1)
{ {
return text; return text;
} }
var pos = searchWrapPos(ctx, text, 0, text.length, wrapWidth); var pos = searchWrapPos(ctx, text, 0, text.length, wrapWidth);
return text.substring(0, pos) + "\n" + arguments.callee(ctx, text.substring(pos), wrapWidth); return text.substring(0, pos) + "\n" + lineWrap(ctx, text.substring(pos), wrapWidth);
}; }
var result = ""; var result = "";
var lines = text.split("\n"); var lines = text.split("\n");
for (var i = 0; i < lines.length; i++) for (var i = 0; i < lines.length; i++)
{ {
result += lineWrap(this.context, lines[i], this.style.wordWrapWidth) + "\n"; result += lineWrap(this.context, lines[i], this.style.wordWrapWidth) + "\n";
} }
return result; return result;
}; };
/** /**
@ -275,10 +275,10 @@ PIXI.Text.prototype.wordWrap = function(text)
*/ */
PIXI.Text.prototype.destroy = function(destroyTexture) PIXI.Text.prototype.destroy = function(destroyTexture)
{ {
if(destroyTexture) if(destroyTexture)
{ {
this.texture.destroy(); this.texture.destroy();
} }
}; };

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

@ -16,82 +16,82 @@ PIXI.texturesToDestroy = [];
*/ */
PIXI.BaseTexture = function(source) PIXI.BaseTexture = function(source)
{ {
PIXI.EventTarget.call( this ); PIXI.EventTarget.call( this );
/** /**
* [read-only] The width of the base texture set when the image has loaded * [read-only] The width of the base texture set when the image has loaded
* *
* @property width * @property width
* @type Number * @type Number
* @readOnly * @readOnly
*/ */
this.width = 100; this.width = 100;
/** /**
* [read-only] The height of the base texture set when the image has loaded * [read-only] The height of the base texture set when the image has loaded
* *
* @property height * @property height
* @type Number * @type Number
* @readOnly * @readOnly
*/ */
this.height = 100; this.height = 100;
/** /**
* [read-only] Describes if the base texture has loaded or not * [read-only] Describes if the base texture has loaded or not
* *
* @property hasLoaded * @property hasLoaded
* @type Boolean * @type Boolean
* @readOnly * @readOnly
*/ */
this.hasLoaded = false; this.hasLoaded = false;
/** /**
* The source that is loaded to create the texture * The source that is loaded to create the texture
* *
* @property source * @property source
* @type Image * @type Image
*/ */
this.source = source; this.source = source;
if(!source)return; if(!source)return;
if(this.source instanceof Image || this.source instanceof HTMLImageElement) if(this.source instanceof Image || this.source instanceof HTMLImageElement)
{ {
if(this.source.complete) if(this.source.complete)
{ {
this.hasLoaded = true; this.hasLoaded = true;
this.width = this.source.width; this.width = this.source.width;
this.height = this.source.height; this.height = this.source.height;
PIXI.texturesToUpdate.push(this); PIXI.texturesToUpdate.push(this);
} }
else else
{ {
var scope = this; var scope = this;
this.source.onload = function(){ this.source.onload = function(){
scope.hasLoaded = true; scope.hasLoaded = true;
scope.width = scope.source.width; scope.width = scope.source.width;
scope.height = scope.source.height; scope.height = scope.source.height;
// add it to somewhere... // add it to somewhere...
PIXI.texturesToUpdate.push(scope); PIXI.texturesToUpdate.push(scope);
scope.dispatchEvent( { type: 'loaded', content: scope } ); scope.dispatchEvent( { type: 'loaded', content: scope } );
} }
// this.image.src = imageUrl; // this.image.src = imageUrl;
} }
} }
else else
{ {
this.hasLoaded = true; this.hasLoaded = true;
this.width = this.source.width; this.width = this.source.width;
this.height = this.source.height; this.height = this.source.height;
PIXI.texturesToUpdate.push(this); PIXI.texturesToUpdate.push(this);
} }
this._powerOf2 = false; this._powerOf2 = false;
} }
PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture; PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture;
@ -103,12 +103,12 @@ PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture;
*/ */
PIXI.BaseTexture.prototype.destroy = function() PIXI.BaseTexture.prototype.destroy = function()
{ {
if(this.source instanceof Image) if(this.source instanceof Image)
{ {
this.source.src = null; this.source.src = null;
} }
this.source = null; this.source = null;
PIXI.texturesToDestroy.push(this); PIXI.texturesToDestroy.push(this);
} }
/** /**
@ -122,20 +122,20 @@ PIXI.BaseTexture.prototype.destroy = function()
*/ */
PIXI.BaseTexture.fromImage = function(imageUrl, crossorigin) PIXI.BaseTexture.fromImage = function(imageUrl, crossorigin)
{ {
var baseTexture = PIXI.BaseTextureCache[imageUrl]; var baseTexture = PIXI.BaseTextureCache[imageUrl];
if(!baseTexture) if(!baseTexture)
{ {
// new Image() breaks tex loading in some versions of Chrome. // new Image() breaks tex loading in some versions of Chrome.
// See https://code.google.com/p/chromium/issues/detail?id=238071 // See https://code.google.com/p/chromium/issues/detail?id=238071
var image = new Image();//document.createElement('img'); var image = new Image();//document.createElement('img');
if (crossorigin) if (crossorigin)
{ {
image.crossOrigin = ''; image.crossOrigin = '';
} }
image.src = imageUrl; image.src = imageUrl;
baseTexture = new PIXI.BaseTexture(image); baseTexture = new PIXI.BaseTexture(image);
PIXI.BaseTextureCache[imageUrl] = baseTexture; PIXI.BaseTextureCache[imageUrl] = baseTexture;
} }
return baseTexture; return baseTexture;
} }

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

@ -10,19 +10,19 @@
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: 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 renderTexture = new PIXI.RenderTexture(800, 600);
var sprite = PIXI.Sprite.fromImage("spinObj_01.png"); var sprite = PIXI.Sprite.fromImage("spinObj_01.png");
sprite.position.x = 800/2; sprite.position.x = 800/2;
sprite.position.y = 600/2; sprite.position.y = 600/2;
sprite.anchor.x = 0.5; sprite.anchor.x = 0.5;
sprite.anchor.y = 0.5; sprite.anchor.y = 0.5;
renderTexture.render(sprite); renderTexture.render(sprite);
Sprite in this case will be rendered to 0,0 position. To render this sprite at center DisplayObjectContainer should be used: Sprite in this case will be rendered to 0,0 position. To render this sprite at center DisplayObjectContainer should be used:
var doc = new PIXI.DisplayObjectContainer(); var doc = new PIXI.DisplayObjectContainer();
doc.addChild(sprite); doc.addChild(sprite);
renderTexture.render(doc); // Renders to center of renderTexture renderTexture.render(doc); // Renders to center of renderTexture
@class RenderTexture @class RenderTexture
@extends Texture @extends Texture
@ -32,23 +32,23 @@
*/ */
PIXI.RenderTexture = function(width, height) PIXI.RenderTexture = function(width, height)
{ {
PIXI.EventTarget.call( this ); PIXI.EventTarget.call( this );
this.width = width || 100; this.width = width || 100;
this.height = height || 100; this.height = height || 100;
this.identityMatrix = PIXI.mat3.create(); this.identityMatrix = 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) if(PIXI.gl)
{ {
this.initWebGL(); this.initWebGL();
} }
else else
{ {
this.initCanvas(); this.initCanvas();
} }
} }
PIXI.RenderTexture.prototype = Object.create( PIXI.Texture.prototype ); PIXI.RenderTexture.prototype = Object.create( PIXI.Texture.prototype );
@ -62,39 +62,39 @@ PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture;
*/ */
PIXI.RenderTexture.prototype.initWebGL = function() PIXI.RenderTexture.prototype.initWebGL = function()
{ {
var gl = PIXI.gl; var gl = PIXI.gl;
this.glFramebuffer = gl.createFramebuffer(); this.glFramebuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer ); gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer );
this.glFramebuffer.width = this.width; this.glFramebuffer.width = this.width;
this.glFramebuffer.height = this.height; this.glFramebuffer.height = this.height;
this.baseTexture = new PIXI.BaseTexture(); this.baseTexture = new PIXI.BaseTexture();
this.baseTexture.width = this.width; this.baseTexture.width = this.width;
this.baseTexture.height = this.height; this.baseTexture.height = this.height;
this.baseTexture._glTexture = gl.createTexture(); this.baseTexture._glTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, this.baseTexture._glTexture); 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); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 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_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_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
this.baseTexture.isRender = true; this.baseTexture.isRender = true;
gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer ); gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer );
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.baseTexture._glTexture, 0); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.baseTexture._glTexture, 0);
// create a projection matrix.. // create a projection matrix..
this.projection = new PIXI.Point(this.width/2 , this.height/2); this.projection = new PIXI.Point(this.width/2 , this.height/2);
// set the correct render function.. // set the correct render function..
this.render = this.renderWebGL; this.render = this.renderWebGL;
} }
@ -103,25 +103,25 @@ PIXI.RenderTexture.prototype.initWebGL = function()
PIXI.RenderTexture.prototype.resize = function(width, height) PIXI.RenderTexture.prototype.resize = function(width, height)
{ {
this.width = width; this.width = width;
this.height = height; this.height = height;
if(PIXI.gl) if(PIXI.gl)
{ {
this.projection.x = this.width/2 this.projection.x = this.width/2
this.projection.y = this.height/2; this.projection.y = this.height/2;
var gl = PIXI.gl; var gl = PIXI.gl;
gl.bindTexture(gl.TEXTURE_2D, this.baseTexture._glTexture); 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); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
} }
else else
{ {
this.frame.width = this.width this.frame.width = this.width
this.frame.height = this.height; this.frame.height = this.height;
this.renderer.resize(this.width, this.height); this.renderer.resize(this.width, this.height);
} }
} }
/** /**
@ -132,12 +132,12 @@ PIXI.RenderTexture.prototype.resize = function(width, height)
*/ */
PIXI.RenderTexture.prototype.initCanvas = function() PIXI.RenderTexture.prototype.initCanvas = function()
{ {
this.renderer = new PIXI.CanvasRenderer(this.width, this.height, null, 0); this.renderer = new PIXI.CanvasRenderer(this.width, this.height, null, 0);
this.baseTexture = new PIXI.BaseTexture(this.renderer.view); this.baseTexture = new PIXI.BaseTexture(this.renderer.view);
this.frame = new PIXI.Rectangle(0, 0, this.width, this.height); this.frame = new PIXI.Rectangle(0, 0, this.width, this.height);
this.render = this.renderCanvas; this.render = this.renderCanvas;
} }
/** /**
@ -150,67 +150,67 @@ PIXI.RenderTexture.prototype.initCanvas = function()
*/ */
PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, clear) PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, clear)
{ {
var gl = PIXI.gl; var gl = PIXI.gl;
// enable the alpha color mask.. // 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 ); gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer );
if(clear) if(clear)
{ {
gl.clearColor(0,0,0, 0); gl.clearColor(0,0,0, 0);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
} }
// THIS WILL MESS WITH HIT TESTING! // THIS WILL MESS WITH HIT TESTING!
var children = displayObject.children; var children = displayObject.children;
//TODO -? create a new one??? dont think so! //TODO -? create a new one??? dont think so!
var originalWorldTransform = displayObject.worldTransform; var originalWorldTransform = displayObject.worldTransform;
displayObject.worldTransform = PIXI.mat3.create();//sthis.identityMatrix; displayObject.worldTransform = PIXI.mat3.create();//sthis.identityMatrix;
// modify to flip... // modify to flip...
displayObject.worldTransform[4] = -1; displayObject.worldTransform[4] = -1;
displayObject.worldTransform[5] = this.projection.y * 2; displayObject.worldTransform[5] = this.projection.y * 2;
if(position) if(position)
{ {
displayObject.worldTransform[2] = position.x; displayObject.worldTransform[2] = position.x;
displayObject.worldTransform[5] -= position.y; displayObject.worldTransform[5] -= position.y;
} }
PIXI.visibleCount++; PIXI.visibleCount++;
displayObject.vcount = PIXI.visibleCount; displayObject.vcount = PIXI.visibleCount;
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();
} }
var renderGroup = displayObject.__renderGroup; var renderGroup = displayObject.__renderGroup;
if(renderGroup) if(renderGroup)
{ {
if(displayObject == renderGroup.root) if(displayObject == renderGroup.root)
{ {
renderGroup.render(this.projection); renderGroup.render(this.projection);
} }
else else
{ {
renderGroup.renderSpecific(displayObject, this.projection); renderGroup.renderSpecific(displayObject, this.projection);
} }
} }
else else
{ {
if(!this.renderGroup)this.renderGroup = new PIXI.WebGLRenderGroup(gl); if(!this.renderGroup)this.renderGroup = new PIXI.WebGLRenderGroup(gl);
this.renderGroup.setRenderable(displayObject); this.renderGroup.setRenderable(displayObject);
this.renderGroup.render(this.projection); this.renderGroup.render(this.projection);
} }
displayObject.worldTransform = originalWorldTransform; displayObject.worldTransform = originalWorldTransform;
} }
@ -224,23 +224,23 @@ PIXI.RenderTexture.prototype.renderWebGL = function(displayObject, position, cle
*/ */
PIXI.RenderTexture.prototype.renderCanvas = function(displayObject, position, clear) PIXI.RenderTexture.prototype.renderCanvas = function(displayObject, position, clear)
{ {
var children = displayObject.children; var children = displayObject.children;
displayObject.worldTransform = PIXI.mat3.create(); displayObject.worldTransform = PIXI.mat3.create();
if(position) if(position)
{ {
displayObject.worldTransform[2] = position.x; displayObject.worldTransform[2] = position.x;
displayObject.worldTransform[5] = position.y; 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); if(clear)this.renderer.context.clearRect(0,0, this.width, this.height);
this.renderer.renderDisplayObject(displayObject); this.renderer.renderDisplayObject(displayObject);

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

@ -17,55 +17,55 @@ PIXI.FrameCache = {};
*/ */
PIXI.Texture = function(baseTexture, frame) PIXI.Texture = function(baseTexture, frame)
{ {
PIXI.EventTarget.call( this ); PIXI.EventTarget.call( this );
if(!frame) if(!frame)
{ {
this.noFrame = true; this.noFrame = true;
frame = new PIXI.Rectangle(0,0,1,1); frame = new PIXI.Rectangle(0,0,1,1);
} }
if(baseTexture instanceof PIXI.Texture) if(baseTexture instanceof PIXI.Texture)
baseTexture = baseTexture.baseTexture; baseTexture = baseTexture.baseTexture;
/** /**
* The base texture of this texture * The base texture of this texture
* *
* @property baseTexture * @property baseTexture
* @type BaseTexture * @type BaseTexture
*/ */
this.baseTexture = baseTexture; this.baseTexture = baseTexture;
/** /**
* The frame specifies the region of the base texture that this texture uses * The frame specifies the region of the base texture that this texture uses
* *
* @property frame * @property frame
* @type Rectangle * @type Rectangle
*/ */
this.frame = frame; this.frame = frame;
/** /**
* The trim point * The trim point
* *
* @property trim * @property trim
* @type Point * @type Point
*/ */
this.trim = new PIXI.Point(); this.trim = new PIXI.Point();
this.scope = this; this.scope = this;
if(baseTexture.hasLoaded) if(baseTexture.hasLoaded)
{ {
if(this.noFrame)frame = new PIXI.Rectangle(0,0, baseTexture.width, baseTexture.height); if(this.noFrame)frame = new PIXI.Rectangle(0,0, baseTexture.width, baseTexture.height);
//console.log(frame) //console.log(frame)
this.setFrame(frame); this.setFrame(frame);
} }
else else
{ {
var scope = this; var scope = this;
baseTexture.addEventListener( 'loaded', function(){ scope.onBaseTextureLoaded()} ); baseTexture.addEventListener( 'loaded', function(){ scope.onBaseTextureLoaded()} );
} }
} }
PIXI.Texture.prototype.constructor = PIXI.Texture; PIXI.Texture.prototype.constructor = PIXI.Texture;
@ -79,15 +79,15 @@ PIXI.Texture.prototype.constructor = PIXI.Texture;
*/ */
PIXI.Texture.prototype.onBaseTextureLoaded = function(event) PIXI.Texture.prototype.onBaseTextureLoaded = function(event)
{ {
var baseTexture = this.baseTexture; var baseTexture = this.baseTexture;
baseTexture.removeEventListener( 'loaded', this.onLoaded ); baseTexture.removeEventListener( 'loaded', this.onLoaded );
if(this.noFrame)this.frame = new PIXI.Rectangle(0,0, baseTexture.width, baseTexture.height); if(this.noFrame)this.frame = new PIXI.Rectangle(0,0, baseTexture.width, baseTexture.height);
this.noFrame = false; this.noFrame = false;
this.width = this.frame.width; this.width = this.frame.width;
this.height = this.frame.height; this.height = this.frame.height;
this.scope.dispatchEvent( { type: 'update', content: this } ); this.scope.dispatchEvent( { type: 'update', content: this } );
} }
/** /**
@ -98,7 +98,7 @@ PIXI.Texture.prototype.onBaseTextureLoaded = function(event)
*/ */
PIXI.Texture.prototype.destroy = function(destroyBase) PIXI.Texture.prototype.destroy = function(destroyBase)
{ {
if(destroyBase)this.baseTexture.destroy(); if(destroyBase)this.baseTexture.destroy();
} }
/** /**
@ -109,19 +109,19 @@ PIXI.Texture.prototype.destroy = function(destroyBase)
*/ */
PIXI.Texture.prototype.setFrame = function(frame) PIXI.Texture.prototype.setFrame = function(frame)
{ {
this.frame = frame; this.frame = frame;
this.width = frame.width; this.width = frame.width;
this.height = frame.height; this.height = frame.height;
if(frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) 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; this.updateFrame = true;
PIXI.Texture.frameUpdates.push(this); PIXI.Texture.frameUpdates.push(this);
//this.dispatchEvent( { type: 'update', content: this } ); //this.dispatchEvent( { type: 'update', content: this } );
} }
/** /**
@ -136,15 +136,15 @@ PIXI.Texture.prototype.setFrame = function(frame)
*/ */
PIXI.Texture.fromImage = function(imageUrl, crossorigin) PIXI.Texture.fromImage = function(imageUrl, crossorigin)
{ {
var texture = PIXI.TextureCache[imageUrl]; var texture = PIXI.TextureCache[imageUrl];
if(!texture) if(!texture)
{ {
texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin)); texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin));
PIXI.TextureCache[imageUrl] = texture; PIXI.TextureCache[imageUrl] = texture;
} }
return texture; return texture;
} }
/** /**
@ -158,9 +158,9 @@ PIXI.Texture.fromImage = function(imageUrl, crossorigin)
*/ */
PIXI.Texture.fromFrame = function(frameId) PIXI.Texture.fromFrame = function(frameId)
{ {
var texture = PIXI.TextureCache[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; return texture;
} }
/** /**
@ -174,8 +174,8 @@ PIXI.Texture.fromFrame = function(frameId)
*/ */
PIXI.Texture.fromCanvas = function(canvas) PIXI.Texture.fromCanvas = function(canvas)
{ {
var baseTexture = new PIXI.BaseTexture(canvas); var baseTexture = new PIXI.BaseTexture(canvas);
return new PIXI.Texture(baseTexture); return new PIXI.Texture(baseTexture);
} }
@ -189,7 +189,7 @@ PIXI.Texture.fromCanvas = function(canvas)
*/ */
PIXI.Texture.addTextureToCache = function(texture, id) PIXI.Texture.addTextureToCache = function(texture, id)
{ {
PIXI.TextureCache[id] = texture; PIXI.TextureCache[id] = texture;
} }
/** /**
@ -202,9 +202,9 @@ PIXI.Texture.addTextureToCache = function(texture, id)
*/ */
PIXI.Texture.removeTextureFromCache = function(id) PIXI.Texture.removeTextureFromCache = function(id)
{ {
var texture = PIXI.TextureCache[id] var texture = PIXI.TextureCache[id]
PIXI.TextureCache[id] = null; PIXI.TextureCache[id] = null;
return texture; return texture;
} }
// this is more for webGL.. it contains updated frames.. // this is more for webGL.. it contains updated frames..

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

@ -19,19 +19,19 @@
*/ */
PIXI.autoDetectRenderer = function(width, height, view, transparent, antialias) PIXI.autoDetectRenderer = function(width, height, view, transparent, antialias)
{ {
if(!width)width = 800; if(!width)width = 800;
if(!height)height = 600; if(!height)height = 600;
// BORROWED from Mr Doob (mrdoob.com) // BORROWED from Mr Doob (mrdoob.com)
var webgl = ( function () { try { return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); } catch( e ) { return false; } } )(); var webgl = ( function () { try { return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); } catch( e ) { return false; } } )();
//console.log(webgl); //console.log(webgl);
if( webgl ) if( webgl )
{ {
return new PIXI.WebGLRenderer(width, height, view, transparent, antialias); return new PIXI.WebGLRenderer(width, height, view, transparent, antialias);
} }
return new PIXI.CanvasRenderer(width, height, view, transparent); return new PIXI.CanvasRenderer(width, height, view, transparent);
}; };

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

@ -8,59 +8,59 @@
* *
* @class EventTarget * @class EventTarget
* @example * @example
* function MyEmitter() { * function MyEmitter() {
* PIXI.EventTarget.call(this); //mixes in event target stuff * PIXI.EventTarget.call(this); //mixes in event target stuff
* } * }
* *
* var em = new MyEmitter(); * var em = new MyEmitter();
* em.emit({ type: 'eventName', data: 'some data' }); * em.emit({ type: 'eventName', data: 'some data' });
*/ */
PIXI.EventTarget = function () { PIXI.EventTarget = function () {
var listeners = {}; var listeners = {};
this.addEventListener = this.on = function ( type, listener ) { this.addEventListener = this.on = function ( type, listener ) {
if ( listeners[ type ] === undefined ) { if ( listeners[ type ] === undefined ) {
listeners[ type ] = []; listeners[ type ] = [];
} }
if ( listeners[ type ].indexOf( listener ) === - 1 ) { if ( listeners[ type ].indexOf( listener ) === - 1 ) {
listeners[ type ].push( listener ); listeners[ type ].push( listener );
} }
}; };
this.dispatchEvent = this.emit = function ( event ) { this.dispatchEvent = this.emit = function ( event ) {
if ( !listeners[ event.type ] || !listeners[ event.type ].length ) { if ( !listeners[ event.type ] || !listeners[ event.type ].length ) {
return; return;
} }
for(var i = 0, l = listeners[ event.type ].length; i < l; i++) { for(var i = 0, l = listeners[ event.type ].length; i < l; i++) {
listeners[ event.type ][ i ]( event ); listeners[ event.type ][ i ]( event );
} }
}; };
this.removeEventListener = this.off = function ( type, listener ) { this.removeEventListener = this.off = function ( type, listener ) {
var index = listeners[ type ].indexOf( listener ); var index = listeners[ type ].indexOf( listener );
if ( index !== - 1 ) { if ( index !== - 1 ) {
listeners[ type ].splice( index, 1 ); listeners[ type ].splice( index, 1 );
} }
}; };
}; };

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

@ -1,34 +1,34 @@
/* /*
PolyK library PolyK library
url: http://polyk.ivank.net url: http://polyk.ivank.net
Released under MIT licence. Released under MIT licence.
Copyright (c) 2012 Ivan Kuckir Copyright (c) 2012 Ivan Kuckir
Permission is hereby granted, free of charge, to any person Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use, restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following Software is furnished to do so, subject to the following
conditions: conditions:
The above copyright notice and this permission notice shall be The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software. included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE. OTHER DEALINGS IN THE SOFTWARE.
This is an amazing lib! This is an amazing lib!
slightly modified by mat groves (matgroves.com); slightly modified by mat groves (matgroves.com);
*/ */
PIXI.PolyK = {}; PIXI.PolyK = {};
@ -42,68 +42,68 @@ PIXI.PolyK = {};
*/ */
PIXI.PolyK.Triangulate = function(p) PIXI.PolyK.Triangulate = function(p)
{ {
var sign = true; var sign = true;
var n = p.length>>1; var n = p.length>>1;
if(n<3) return []; if(n<3) return [];
var tgs = []; var tgs = [];
var avl = []; var avl = [];
for(var i=0; i<n; i++) avl.push(i); for(var i=0; i<n; i++) avl.push(i);
var i = 0; i = 0;
var al = n; var al = n;
while(al > 3) while(al > 3)
{ {
var i0 = avl[(i+0)%al]; var i0 = avl[(i+0)%al];
var i1 = avl[(i+1)%al]; var i1 = avl[(i+1)%al];
var i2 = avl[(i+2)%al]; var i2 = avl[(i+2)%al];
var ax = p[2*i0], ay = p[2*i0+1]; var ax = p[2*i0], ay = p[2*i0+1];
var bx = p[2*i1], by = p[2*i1+1]; var bx = p[2*i1], by = p[2*i1+1];
var cx = p[2*i2], cy = p[2*i2+1]; var cx = p[2*i2], cy = p[2*i2+1];
var earFound = false; var earFound = false;
if(PIXI.PolyK._convex(ax, ay, bx, by, cx, cy, sign)) if(PIXI.PolyK._convex(ax, ay, bx, by, cx, cy, sign))
{ {
earFound = true; earFound = true;
for(var j=0; j<al; j++) for(var j=0; j<al; j++)
{ {
var vi = avl[j]; var vi = avl[j];
if(vi==i0 || vi==i1 || vi==i2) continue; 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(PIXI.PolyK._PointInTriangle(p[2*vi], p[2*vi+1], ax, ay, bx, by, cx, cy)) {earFound = false; break;}
} }
} }
if(earFound) if(earFound)
{ {
tgs.push(i0, i1, i2); tgs.push(i0, i1, i2);
avl.splice((i+1)%al, 1); avl.splice((i+1)%al, 1);
al--; al--;
i = 0; i = 0;
} }
else if(i++ > 3*al) else if(i++ > 3*al)
{ {
// need to flip flip reverse it! // need to flip flip reverse it!
// reset! // reset!
if(sign) if(sign)
{ {
var tgs = []; tgs = [];
avl = []; avl = [];
for(var i=0; i<n; i++) avl.push(i); for(i=0; i<n; i++) avl.push(i);
i = 0; i = 0;
al = n; al = n;
sign = false; sign = false;
} }
else else
{ {
console.log("PIXI Warning: shape too complex to fill") console.log("PIXI Warning: shape too complex to fill")
return []; return [];
} }
} }
} }
tgs.push(avl[0], avl[1], avl[2]); tgs.push(avl[0], avl[1], avl[2]);
return tgs; return tgs;
} }
/** /**
@ -115,25 +115,25 @@ PIXI.PolyK.Triangulate = function(p)
*/ */
PIXI.PolyK._PointInTriangle = function(px, py, ax, ay, bx, by, cx, cy) PIXI.PolyK._PointInTriangle = function(px, py, ax, ay, bx, by, cx, cy)
{ {
var v0x = cx-ax; var v0x = cx-ax;
var v0y = cy-ay; var v0y = cy-ay;
var v1x = bx-ax; var v1x = bx-ax;
var v1y = by-ay; var v1y = by-ay;
var v2x = px-ax; var v2x = px-ax;
var v2y = py-ay; var v2y = py-ay;
var dot00 = v0x*v0x+v0y*v0y; var dot00 = v0x*v0x+v0y*v0y;
var dot01 = v0x*v1x+v0y*v1y; var dot01 = v0x*v1x+v0y*v1y;
var dot02 = v0x*v2x+v0y*v2y; var dot02 = v0x*v2x+v0y*v2y;
var dot11 = v1x*v1x+v1y*v1y; var dot11 = v1x*v1x+v1y*v1y;
var dot12 = v1x*v2x+v1y*v2y; var dot12 = v1x*v2x+v1y*v2y;
var invDenom = 1 / (dot00 * dot11 - dot01 * dot01); var invDenom = 1 / (dot00 * dot11 - dot01 * dot01);
var u = (dot11 * dot02 - dot01 * dot12) * invDenom; var u = (dot11 * dot02 - dot01 * dot12) * invDenom;
var v = (dot00 * dot12 - dot01 * dot02) * invDenom; var v = (dot00 * dot12 - dot01 * dot02) * invDenom;
// Check if point is in triangle // Check if point is in triangle
return (u >= 0) && (v >= 0) && (u + v < 1); return (u >= 0) && (v >= 0) && (u + v < 1);
} }
/** /**
@ -145,5 +145,5 @@ PIXI.PolyK._PointInTriangle = function(px, py, ax, ay, bx, by, cx, cy)
*/ */
PIXI.PolyK._convex = function(ax, ay, bx, by, cx, cy, sign) 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;
} }

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

@ -19,8 +19,8 @@ var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o']; var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] ||
|| window[vendors[x]+'CancelRequestAnimationFrame']; window[vendors[x]+'CancelRequestAnimationFrame'];
} }
if (!window.requestAnimationFrame) if (!window.requestAnimationFrame)
@ -43,11 +43,11 @@ window.requestAnimFrame = window.requestAnimationFrame;
/** /**
* Converts a hex color number to an [R, G, B] array * Converts a hex color number to an [R, G, B] array
* *
* @method HEXtoRGB * @method hex2rgb
* @param hex {Number} * @param hex {Number}
*/ */
function HEXtoRGB(hex) { function hex2rgb(hex) {
return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255]; return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255];
} }
/** /**
@ -64,14 +64,14 @@ if (typeof Function.prototype.bind != 'function') {
if (typeof target != 'function') throw new TypeError(); if (typeof target != 'function') throw new TypeError();
function bound() { function bound() {
var args = boundArgs.concat(slice.call(arguments)); var args = boundArgs.concat(slice.call(arguments));
target.apply(this instanceof bound ? this : thisArg, args); target.apply(this instanceof bound ? this : thisArg, args);
} }
bound.prototype = (function F(proto) { bound.prototype = (function F(proto) {
proto && (F.prototype = proto); if (proto) F.prototype = proto;
if (!(this instanceof F)) return new F; if (!(this instanceof F)) return new F();
})(target.prototype); })(target.prototype);
return bound; return bound;
}; };
@ -86,28 +86,28 @@ if (typeof Function.prototype.bind != 'function') {
*/ */
var AjaxRequest = PIXI.AjaxRequest = function() var AjaxRequest = PIXI.AjaxRequest = function()
{ {
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) if (window.ActiveXObject)
{ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken) { //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
for (var i=0; i<activexmodes.length; i++) for (var i=0; i<activexmodes.length; i++)
{ {
try{ try{
return new ActiveXObject(activexmodes[i]) return new ActiveXObject(activexmodes[i])
} }
catch(e){ catch(e){
//suppress error //suppress error
} }
} }
} }
else if (window.XMLHttpRequest) // if Mozilla, Safari etc else if (window.XMLHttpRequest) // if Mozilla, Safari etc
{ {
return new XMLHttpRequest() return new XMLHttpRequest()
} }
else else
{ {
return false; return false;
} }
} }
/* /*
@ -115,25 +115,25 @@ var AjaxRequest = PIXI.AjaxRequest = function()
*/ */
PIXI.runList = function(item) PIXI.runList = function(item)
{ {
console.log(">>>>>>>>>") console.log(">>>>>>>>>")
console.log("_") console.log("_")
var safe = 0; var safe = 0;
var tmp = item.first; var tmp = item.first;
console.log(tmp); console.log(tmp);
while(tmp._iNext) while(tmp._iNext)
{ {
safe++; safe++;
tmp = tmp._iNext; tmp = tmp._iNext;
console.log(tmp); console.log(tmp);
// console.log(tmp); // console.log(tmp);
if(safe > 100) if(safe > 100)
{ {
console.log("BREAK") console.log("BREAK")
break break
} }
} }
} }