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

merge in jshint fixes

Browse source
This commit is contained in:
Chad Engler 2013-12-19 11:30:30 -08:00
commit ce8add7c62
158 changed files with 9855 additions and 10575 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -2,3 +2,4 @@ node_modules
.DS_Store .DS_Store
.project .project
*.sublime-* *.sublime-*
*.log

127
.jshintrc Normal file
View file

@ -0,0 +1,127 @@
{
// --------------------------------------------------------------------
// JSHint Configuration
// --------------------------------------------------------------------
//
// @author Chad Engler <chad@pantherdev.com>
// == Enforcing Options ===============================================
//
// These options tell JSHint to be more strict towards your code. Use
// them if you want to allow only a safe subset of JavaScript, very
// useful when your codebase is shared with a big number of developers
// with different skill levels.
"bitwise" : false, // Disallow bitwise operators (&, |, ^, etc.).
"camelcase" : true, // Force all variable names to use either camelCase or UPPER_CASE.
"curly" : false, // Require {} for every new block or scope.
"eqeqeq" : true, // Require triple equals i.e. `===`.
"es3" : false, // Enforce conforming to ECMAScript 3.
"forin" : false, // Disallow `for in` loops without `hasOwnPrototype`.
"immed" : true, // Require immediate invocations to be wrapped in parens e.g. `( function(){}() );`
"indent" : 4, // Require that 4 spaces are used for indentation.
"latedef" : true, // Prohibit variable use before definition.
"newcap" : true, // Require capitalization of all constructor functions e.g. `new F()`.
"noarg" : true, // Prohibit use of `arguments.caller` and `arguments.callee`.
"noempty" : true, // Prohibit use of empty blocks.
"nonew" : true, // Prohibit use of constructors for side-effects.
"plusplus" : false, // Disallow use of `++` & `--`.
"quotmark" : true, // Force consistency when using quote marks.
"undef" : true, // Require all non-global variables be declared before they are used.
"unused" : true, // Warn when varaibles are created by not used.
"strict" : false, // Require `use strict` pragma in every file.
"trailing" : true, // Prohibit trailing whitespaces.
"maxparams" : 8, // Prohibit having more than X number of params in a function.
"maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep.
"maxstatements" : false, // Restrict the number of statements in a function.
"maxcomplexity" : false, // Restrict the cyclomatic complexity of the code.
"maxlen" : 220, // Require that all lines are 100 characters or less.
"globals" : { // Register globals that are used in the code.
//commonjs globals
"module": false,
"require": false,
// PIXI globals
"PIXI": false,
"spine": false,
//chai globals
"chai": false,
//mocha globals
"describe": false,
"it": false,
//resemble globals
"resemble": false
},
// == Relaxing Options ================================================
//
// These options allow you to suppress certain types of warnings. Use
// them only if you are absolutely positive that you know what you are
// doing.
"asi" : false, // Tolerate Automatic Semicolon Insertion (no semicolons).
"boss" : true, // Tolerate assignments inside if, for & while. Usually conditions & loops are for comparison, not assignments.
"debug" : false, // Allow debugger statements e.g. browser breakpoints.
"eqnull" : false, // Tolerate use of `== null`.
"esnext" : false, // Allow ES.next specific features such as `const` and `let`.
"evil" : false, // Tolerate use of `eval`.
"expr" : false, // Tolerate `ExpressionStatement` as Programs.
"funcscope" : false, // Tolerate declarations of variables inside of control structures while accessing them later from the outside.
"globalstrict" : false, // Allow global "use strict" (also enables 'strict').
"iterator" : false, // Allow usage of __iterator__ property.
"lastsemic" : false, // Tolerate missing semicolons when the it is omitted for the last statement in a one-line block.
"laxbreak" : false, // Tolerate unsafe line breaks e.g. `return [\n] x` without semicolons.
"laxcomma" : false, // Suppress warnings about comma-first coding style.
"loopfunc" : false, // Allow functions to be defined within loops.
"moz" : false, // Code that uses Mozilla JS extensions will set this to true
"multistr" : false, // Tolerate multi-line strings.
"proto" : false, // Tolerate __proto__ property. This property is deprecated.
"scripturl" : false, // Tolerate script-targeted URLs.
"smarttabs" : false, // Tolerate mixed tabs and spaces when the latter are used for alignmnent only.
"shadow" : false, // Allows re-define variables later in code e.g. `var x=1; x=2;`.
"sub" : false, // Tolerate all forms of subscript notation besides dot notation e.g. `dict['key']` instead of `dict.key`.
"supernew" : false, // Tolerate `new function () { ... };` and `new Object;`.
"validthis" : false, // Tolerate strict violations when the code is running in strict mode and you use this in a non-constructor function.
// == Environments ====================================================
//
// These options pre-define global variables that are exposed by
// popular JavaScript libraries and runtime environments—such as
// browser or node.js.
"browser" : true, // Standard browser globals e.g. `window`, `document`.
"couch" : false, // Enable globals exposed by CouchDB.
"devel" : false, // Allow development statements e.g. `console.log();`.
"dojo" : false, // Enable globals exposed by Dojo Toolkit.
"jquery" : false, // Enable globals exposed by jQuery JavaScript library.
"mootools" : false, // Enable globals exposed by MooTools JavaScript framework.
"node" : false, // Enable globals available when code is running inside of the NodeJS runtime environment. (for Gruntfile)
"nonstandard" : false, // Define non-standard but widely adopted globals such as escape and unescape.
"prototypejs" : false, // Enable globals exposed by Prototype JavaScript framework.
"rhino" : false, // Enable globals available when your code is running inside of the Rhino runtime environment.
"worker" : false, // Enable globals available when your code is running as a WebWorker.
"wsh" : false, // Enable globals available when your code is running as a script for the Windows Script Host.
"yui" : false, // Enable globals exposed by YUI library.
// == JSLint Legacy ===================================================
//
// These options are legacy from JSLint. Aside from bug fixes they will
// not be improved in any way and might be removed at any point.
"nomen" : false, // Prohibit use of initial or trailing underbars in names.
"onevar" : false, // Allow only one `var` statement per function.
"passfail" : false, // Stop on first error.
"white" : false, // Check against strict whitespace and indentation rules.
// == Undocumented Options ============================================
//
// While I've found these options in some projects, they are not
// described in the [JSHint Options documentation][4].
//
// [4]: http://www.jshint.com/options/
"maxerr" : 100 // Maximum errors before stopping.
}

8
.travis.yml Normal file
View file

@ -0,0 +1,8 @@
language: node_js
node_js:
- 0.10
before_script:
- npm install -g grunt-cli
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start

71
Gruntfile.js
View file

@ -4,13 +4,10 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-connect'); grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadNpmTasks('grunt-contrib-yuidoc');
grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadTasks('tasks');
var root = 'src/pixi/', var srcFiles = [
debug = 'bin/pixi.dev.js',
srcFiles = [
'<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Intro.js',
'<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/Pixi.js',
'<%= dirs.src %>/core/Point.js', '<%= dirs.src %>/core/Point.js',
@ -74,9 +71,9 @@ module.exports = function(grunt) {
'<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/DotScreenFilter.js',
'<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js',
'<%= dirs.src %>/filters/RGBSplitFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js',
'<%= dirs.src %>/Outro.js' '<%= dirs.src %>/Outro.js'
], banner = [ ],
banner = [
'/**', '/**',
' * @license', ' * @license',
' * <%= pkg.name %> - v<%= pkg.version %>', ' * <%= pkg.name %> - v<%= pkg.version %>',
@ -101,7 +98,7 @@ module.exports = function(grunt) {
}, },
files: { files: {
srcBlob: '<%= dirs.src %>/**/*.js', srcBlob: '<%= dirs.src %>/**/*.js',
testBlob: '<%= dirs.test %>/unit/**/*.js', testBlob: '<%= dirs.test %>/{functional,lib/pixi,unit/pixi}/**/*.js',
build: '<%= dirs.build %>/pixi.dev.js', build: '<%= dirs.build %>/pixi.dev.js',
buildMin: '<%= dirs.build %>/pixi.js' buildMin: '<%= dirs.build %>/pixi.js'
}, },
@ -114,6 +111,7 @@ module.exports = function(grunt) {
dest: '<%= files.build %>' dest: '<%= files.build %>'
} }
}, },
/* jshint -W106 */
concat_sourcemap: { concat_sourcemap: {
dev: { dev: {
files: { files: {
@ -125,11 +123,18 @@ module.exports = function(grunt) {
} }
}, },
jshint: { jshint: {
beforeconcat: srcFiles,
test: ['<%= files.testBlob %>'],
options: { options: {
asi: true, jshintrc: '.jshintrc'
smarttabs: true },
source: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'),
test: {
src: ['<%= files.testBlob %>'],
options: {
jshintrc: undefined, //don't use jshintrc for tests
expr: true,
undef: false,
camelcase: false
}
} }
}, },
uglify: { uglify: {
@ -142,12 +147,6 @@ module.exports = function(grunt) {
} }
}, },
connect: { connect: {
qunit: {
options: {
port: grunt.option('port-test') || 9002,
base: './'
}
},
test: { test: {
options: { options: {
port: grunt.option('port-test') || 9002, port: grunt.option('port-test') || 9002,
@ -156,13 +155,6 @@ module.exports = function(grunt) {
} }
} }
}, },
qunit: {
all: {
options: {
urls: ['http://localhost:' + (grunt.option('port-test') || 9002) + '/test/index.html']
}
}
},
yuidoc: { yuidoc: {
compile: { compile: {
name: '<%= pkg.name %>', name: '<%= pkg.name %>',
@ -176,23 +168,22 @@ module.exports = function(grunt) {
} }
} }
}, },
watch: { karma: {
dev: { unit: {
files: ['Gruntfile.js', 'src/**/*.js', 'examples/**/*.html'], configFile: 'test/karma.conf.js',
tasks: ['build-debug'], // browsers: ['Chrome'],
singleRun: true
// We would need to inject <script> in each HTML...
// options: {
// livereload: true
// }
} }
} }
}); });
grunt.registerTask('build-debug', ['concat_sourcemap', 'uglify']) grunt.registerTask('default', ['build', 'test']);
grunt.registerTask('default', ['concat', 'uglify']);
grunt.registerTask('build', ['concat', 'uglify']);
grunt.registerTask('test', ['build', 'connect:qunit', 'qunit']);
grunt.registerTask('docs', ['yuidoc']);
} grunt.registerTask('build', ['jshint:source', 'concat', 'uglify']);
grunt.registerTask('build-debug', ['concat_sourcemap', 'uglify']);
grunt.registerTask('test', ['concat', 'jshint:test', 'karma']);
grunt.registerTask('docs', ['yuidoc']);
grunt.registerTask('travis', ['test']);
};

25
package.json
View file

@ -18,16 +18,23 @@
"main": "bin/pixi.js", "main": "bin/pixi.js",
"scripts": {
"test": "grunt travis --verbose"
},
"dependencies": {}, "dependencies": {},
"devDependencies": { "devDependencies": {
"grunt": "~0.4.x", "grunt": "~0.4.1",
"grunt-contrib-jshint": "0.3.x", "grunt-contrib-jshint": "git+https://github.com/englercj/grunt-contrib-jshint.git",
"grunt-contrib-uglify": "0.2.x", "grunt-contrib-uglify": "~0.2",
"grunt-contrib-connect": "0.2.x", "grunt-contrib-connect": "~0.5",
"grunt-contrib-qunit": "0.2.x", "grunt-contrib-yuidoc": "~0.5",
"grunt-contrib-yuidoc": "0.4.x", "grunt-concat-sourcemap": "~0.4",
"grunt-contrib-concat": "0.1.x", "grunt-contrib-concat": "~0.3",
"grunt-concat-sourcemap": "0.3.x", "mocha": "~1.15",
"grunt-contrib-concat": "0.1.x" "chai": "~1.8",
"karma": "~0.11",
"karma-firefox-launcher": "~0.1",
"karma-mocha": "~0.1"
} }
} }

898
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;

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

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

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

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

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

@ -16,112 +16,112 @@ 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;
} };
PIXI.mat4 = {}; 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];
@ -145,34 +145,34 @@ PIXI.mat3.transpose = function (mat, dest)
dest[7] = mat[5]; dest[7] = mat[5];
dest[8] = mat[8]; dest[8] = mat[8];
return dest; return 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;
@ -290,4 +290,4 @@ PIXI.mat4.multiply = function (mat, mat2, dest)
dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33;
return dest; return dest;
} };

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

@ -12,20 +12,20 @@
*/ */
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;
} };
/** /**
* Creates a clone of this point * Creates a clone of this point
@ -35,8 +35,8 @@ 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
PIXI.Point.prototype.constructor = PIXI.Point; PIXI.Point.prototype.constructor = PIXI.Point;

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

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

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

@ -14,34 +14,34 @@
*/ */
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;
} };
/** /**
* Creates a clone of this Rectangle * Creates a clone of this Rectangle
@ -51,8 +51,8 @@ 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);
} };
/** /**
* Checks if the x, and y coords passed to this function are contained within this Rectangle * Checks if the x, and y coords passed to this function are contained within this Rectangle
@ -67,19 +67,19 @@ 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
PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; PIXI.Rectangle.prototype.constructor = PIXI.Rectangle;

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

@ -10,238 +10,238 @@
*/ */
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;
this.defaultCursor = "pointer"; this.defaultCursor = 'pointer';
/** /**
* [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;
this.filterArea = new PIXI.Rectangle(0,0,1,1); this.filterArea = new PIXI.Rectangle(0,0,1,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
PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject;
@ -256,8 +256,8 @@ PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject;
*/ */
PIXI.DisplayObject.prototype.setInteractive = function(interactive) PIXI.DisplayObject.prototype.setInteractive = function(interactive)
{ {
this.interactive = interactive; this.interactive = interactive;
} };
/** /**
* Indicates if the sprite will have touch and mouse interactivity. It is false by default * Indicates if the sprite will have touch and mouse interactivity. It is false by default
@ -271,11 +271,11 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'interactive', {
return this._interactive; 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;
} }
}); });
@ -296,21 +296,21 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'mask', {
if(value) if(value)
{ {
if(this._mask) if(this._mask)
{ {
value.start = this._mask.start; value.start = this._mask.start;
value.end = this._mask.end; value.end = this._mask.end;
} }
else else
{ {
this.addFilter(value); this.addFilter(value);
value.renderable = false; value.renderable = false;
} }
} }
else else
{ {
this.removeFilter(this._mask); this.removeFilter(this._mask);
this._mask.renderable = true; this._mask.renderable = true;
} }
this._mask = value; this._mask = value;
@ -332,32 +332,30 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'filters', {
if(value) if(value)
{ {
if(this._filters)this.removeFilter(this._filters); if(this._filters)this.removeFilter(this._filters);
this.addFilter(value); this.addFilter(value);
// now put all the passes in one place.. // now put all the passes in one place..
var passes = []; var passes = [];
for (var i = 0; i < value.length; i++) for (var i = 0; i < value.length; i++)
{ {
var filterPasses = value[i].passes; var filterPasses = value[i].passes;
for (var j = 0; j < filterPasses.length; j++) for (var j = 0; j < filterPasses.length; j++)
{ {
passes.push(filterPasses[j]); passes.push(filterPasses[j]);
}; }
}; }
value.start.filterPasses = passes; value.start.filterPasses = passes;
} }
else else
{ {
if(this._filters)this.removeFilter(this._filters); if(this._filters) {
this.removeFilter(this._filters);
}
} }
this._filters = value; this._filters = value;
} }
}); });
@ -370,101 +368,99 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'filters', {
*/ */
PIXI.DisplayObject.prototype.addFilter = function(data) PIXI.DisplayObject.prototype.addFilter = function(data)
{ {
//if(this.filter)return; //if(this.filter)return;
//this.filter = true; //this.filter = true;
// data[0].target = this; // data[0].target = this;
// insert a filter block.. // insert a filter block..
// TODO Onject pool thease bad boys.. // TODO Onject pool thease bad boys..
var start = new PIXI.FilterBlock(); var start = new PIXI.FilterBlock();
var end = new PIXI.FilterBlock(); var end = new PIXI.FilterBlock();
data.start = start; data.start = start;
data.end = end; data.end = end;
start.data = data; start.data = data;
end.data = data; end.data = data;
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;
start.target = this; start.target = this;
/* /*
* insert start * insert start
*/ */
var childFirst = start var childFirst = start;
var childLast = start var childLast = start;
var nextObject; var nextObject;
var previousObject; var previousObject;
previousObject = this.first._iPrev; previousObject = this.first._iPrev;
if(previousObject) if(previousObject)
{ {
nextObject = previousObject._iNext; nextObject = previousObject._iNext;
childFirst._iPrev = previousObject; childFirst._iPrev = previousObject;
previousObject._iNext = childFirst; previousObject._iNext = childFirst;
} }
else else
{ {
nextObject = this; nextObject = this;
} }
if(nextObject) if(nextObject)
{ {
nextObject._iPrev = childLast; nextObject._iPrev = childLast;
childLast._iNext = nextObject; childLast._iNext = nextObject;
} }
// now insert the end filter block..
// now insert the end filter block.. /*
* insert end filter
*/
childFirst = end;
childLast = end;
nextObject = null;
previousObject = null;
/* previousObject = this.last;
* insert end filter nextObject = previousObject._iNext;
*/
var childFirst = end
var childLast = end
var nextObject = null;
var previousObject = null;
previousObject = this.last; if(nextObject)
nextObject = previousObject._iNext; {
nextObject._iPrev = childLast;
childLast._iNext = nextObject;
}
if(nextObject) childFirst._iPrev = previousObject;
{ previousObject._iNext = childFirst;
nextObject._iPrev = childLast;
childLast._iNext = nextObject;
}
childFirst._iPrev = previousObject; var updateLast = this;
previousObject._iNext = childFirst;
var updateLast = this; var prevLast = this.last;
while(updateLast)
{
if(updateLast.last === prevLast)
{
updateLast.last = end;
}
updateLast = updateLast.parent;
}
var prevLast = this.last; this.first = start;
while(updateLast)
{
if(updateLast.last == prevLast)
{
updateLast.last = end;
}
updateLast = updateLast.parent;
}
this.first = start; // if webGL...
if(this.__renderGroup)
// if webGL... {
if(this.__renderGroup) this.__renderGroup.addFilterBlocks(start, end);
{ }
this.__renderGroup.addFilterBlocks(start, end); };
}
}
/* /*
* Removes the filter to this displayObject * Removes the filter to this displayObject
@ -474,47 +470,47 @@ PIXI.DisplayObject.prototype.addFilter = function(data)
*/ */
PIXI.DisplayObject.prototype.removeFilter = function(data) PIXI.DisplayObject.prototype.removeFilter = function(data)
{ {
//if(!this.filter)return; //if(!this.filter)return;
//this.filter = false; //this.filter = false;
// console.log("YUOIO") // console.log('YUOIO')
// modify the list.. // modify the list..
var startBlock = data.start; var startBlock = data.start;
var nextObject = startBlock._iNext; var nextObject = startBlock._iNext;
var previousObject = startBlock._iPrev; var previousObject = startBlock._iPrev;
if(nextObject)nextObject._iPrev = previousObject; if(nextObject)nextObject._iPrev = previousObject;
if(previousObject)previousObject._iNext = nextObject; if(previousObject)previousObject._iNext = nextObject;
this.first = startBlock._iNext; this.first = startBlock._iNext;
// remove the end filter // remove the end filter
var lastBlock = data.end; var lastBlock = data.end;
var nextObject = lastBlock._iNext; nextObject = lastBlock._iNext;
var previousObject = lastBlock._iPrev; previousObject = lastBlock._iPrev;
if(nextObject)nextObject._iPrev = previousObject; if(nextObject)nextObject._iPrev = previousObject;
previousObject._iNext = nextObject; previousObject._iNext = nextObject;
// this is always true too! // this is always true too!
var tempLast = lastBlock._iPrev; var tempLast = lastBlock._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 == lastBlock) while(updateLast.last === lastBlock)
{ {
updateLast.last = tempLast; updateLast.last = tempLast;
updateLast = updateLast.parent; updateLast = updateLast.parent;
if(!updateLast)break; if(!updateLast)break;
} }
// if webGL... // if webGL...
if(this.__renderGroup) if(this.__renderGroup)
{ {
this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); this.__renderGroup.removeFilterBlocks(startBlock, lastBlock);
} }
} };
/* /*
* Updates the object transform for rendering * Updates the object transform for rendering
@ -524,27 +520,27 @@ PIXI.DisplayObject.prototype.removeFilter = function(data)
*/ */
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],
@ -553,8 +549,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;
@ -564,12 +560,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;
};
}
PIXI.visibleCount = 0; PIXI.visibleCount = 0;

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

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

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

@ -12,61 +12,61 @@
*/ */
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
PIXI.MovieClip.prototype = Object.create( PIXI.Sprite.prototype ); PIXI.MovieClip.prototype = Object.create( PIXI.Sprite.prototype );
@ -96,8 +96,8 @@ Object.defineProperty( PIXI.MovieClip.prototype, 'totalFrames', {
*/ */
PIXI.MovieClip.prototype.stop = function() PIXI.MovieClip.prototype.stop = function()
{ {
this.playing = false; this.playing = false;
} };
/** /**
* Plays the MovieClip * Plays the MovieClip
@ -106,8 +106,8 @@ PIXI.MovieClip.prototype.stop = function()
*/ */
PIXI.MovieClip.prototype.play = function() PIXI.MovieClip.prototype.play = function()
{ {
this.playing = true; this.playing = true;
} };
/** /**
* Stops the MovieClip and goes to a specific frame * Stops the MovieClip and goes to a specific frame
@ -117,11 +117,11 @@ 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]);
} };
/** /**
* Goes to a specific frame and begins playing the MovieClip * Goes to a specific frame and begins playing the MovieClip
@ -131,9 +131,9 @@ 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;
} };
/* /*
* Updates the object transform for rendering * Updates the object transform for rendering
@ -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();
} }
} }
} };

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

@ -18,66 +18,66 @@ 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
PIXI.Sprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); PIXI.Sprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
@ -94,7 +94,7 @@ Object.defineProperty(PIXI.Sprite.prototype, 'width', {
return this.scale.x * this.texture.frame.width; 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,24 +123,24 @@ 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;
} };
/** /**
* When the texture is updated, this event will fire to update the scale and frame * When the texture is updated, this event will fire to update the scale and frame
@ -149,16 +149,16 @@ PIXI.Sprite.prototype.setTexture = function(texture)
* @param event * @param event
* @private * @private
*/ */
PIXI.Sprite.prototype.onTextureUpdate = function(event) PIXI.Sprite.prototype.onTextureUpdate = function()
{ {
//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,10 +174,10 @@ 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,6 +191,6 @@ 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);
} };

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

@ -9,59 +9,59 @@
* @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
PIXI.Stage.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); PIXI.Stage.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
@ -76,8 +76,8 @@ 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 );
} };
/* /*
* Updates the object transform for rendering * Updates the object transform for rendering
@ -87,40 +87,40 @@ 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();
} };
/** /**
* Sets the background color for the stage * Sets the background color for the stage
* *
* @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 = PIXI.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;
} };
/** /**
* This will return the point containing global coords of the mouse. * This will return the point containing global coords of the mouse.
@ -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;
} };

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

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

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

@ -2,30 +2,28 @@
* @author Mat Groves http://matgroves.com/ * @author Mat Groves http://matgroves.com/
*/ */
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 = new Array(points.length * 4);
this.uvs = new Array(points.length * 4);
this.colors = new Array(points.length * 2);
this.indices = new Array(points.length * 2);
}
this.uvs = uvs this.refresh();
this.colors = colors };
this.indices = indices
}
this.refresh();
}
// constructor // constructor
@ -34,142 +32,135 @@ 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 colors = this.colors;
var lastPoint = points[0]; var lastPoint = points[0];
var nextPoint; var indices = this.indices;
var perp = {x:0, y:0}; var colors = this.colors;
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;
{
nextPoint = points[i+1];
}
else
{
nextPoint = point
}
perp.y = -(nextPoint.x - lastPoint.x); if(ratio > 1) ratio = 1;
perp.x = nextPoint.y - lastPoint.y;
var ratio = (1 - (i / (total-1))) * 10; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y);
if(ratio > 1)ratio = 1; num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio;
perp.x /= perpLength;
perp.y /= perpLength;
var perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); perp.x *= num;
var num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.y *= num;
perp.x /= perpLength;
perp.y /= perpLength;
perp.x *= num; verticies[index] = point.x + perp.x;
perp.y *= num; verticies[index+1] = point.y + perp.y;
verticies[index+2] = point.x - perp.x;
verticies[index+3] = point.y - perp.y;
verticies[index] = point.x + perp.x lastPoint = point;
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.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;
} };

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

File diff suppressed because it is too large Load diff

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

@ -4,66 +4,66 @@
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
PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
@ -71,19 +71,18 @@ 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()
{ {
this.updateFrame = true; this.updateFrame = true;
} };
// some helper functions.. // some helper functions..

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

@ -14,52 +14,52 @@
*/ */
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
PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
@ -73,13 +73,13 @@ 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;
} };
/** /**
* When the texture is updated, this event will fire to update the frame * When the texture is updated, this event will fire to update the frame
@ -88,8 +88,7 @@ PIXI.TilingSprite.prototype.setTexture = function(texture)
* @param event * @param event
* @private * @private
*/ */
PIXI.TilingSprite.prototype.onTextureUpdate = function(event) PIXI.TilingSprite.prototype.onTextureUpdate = function()
{ {
this.updateFrame = true; this.updateFrame = true;
} };

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

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

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

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

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

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

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

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

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

@ -12,32 +12,32 @@
*/ */
PIXI.ColorMatrixFilter = function() PIXI.ColorMatrixFilter = function()
{ {
PIXI.AbstractFilter.call( this ); PIXI.AbstractFilter.call( this );
this.passes = [this]; this.passes = [this];
// set the uniforms // set the uniforms
this.uniforms = { this.uniforms = {
matrix: {type: 'mat4', value: [1,0,0,0, matrix: {type: 'mat4', value: [1,0,0,0,
0,1,0,0, 0,1,0,0,
0,0,1,0, 0,0,1,0,
0,0,0,1]}, 0,0,0,1]},
}; };
this.fragmentSrc = [ this.fragmentSrc = [
"precision mediump float;", 'precision mediump float;',
"varying vec2 vTextureCoord;", 'varying vec2 vTextureCoord;',
"varying float vColor;", 'varying float vColor;',
"uniform float invert;", 'uniform float invert;',
"uniform mat4 matrix;", 'uniform mat4 matrix;',
"uniform sampler2D uSampler;", 'uniform sampler2D uSampler;',
"void main(void) {",
"gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;",
"gl_FragColor = gl_FragColor * vColor;",
"}"
];
} 'void main(void) {',
' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;',
' gl_FragColor = gl_FragColor * vColor;',
'}'
];
};
PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter;
@ -54,6 +54,6 @@ Object.defineProperty(PIXI.ColorMatrixFilter.prototype, 'matrix', {
return this.uniforms.matrix.value; return this.uniforms.matrix.value;
}, },
set: function(value) { set: function(value) {
this.uniforms.matrix.value = value; this.uniforms.matrix.value = value;
} }
}); });

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -4,8 +4,8 @@
/** /**
* The atlas file loader is used to load in Atlas data and parsing it * The atlas file loader is used to load in Atlas data and parsing it
* When loaded this class will dispatch a "loaded" event * When loaded this class will dispatch a 'loaded' event
* If load failed this class will dispatch a "error" event * If load failed this class will dispatch a 'error' event
* @class AtlasLoader * @class AtlasLoader
* @extends EventTarget * @extends EventTarget
* @constructor * @constructor
@ -14,11 +14,11 @@
*/ */
PIXI.AtlasLoader = function (url, crossorigin) { PIXI.AtlasLoader = function (url, crossorigin) {
PIXI.EventTarget.call(this); PIXI.EventTarget.call(this);
this.url = url; this.url = url;
this.baseUrl = url.replace(/[^\/]*$/, ""); this.baseUrl = url.replace(/[^\/]*$/, '');
this.crossorigin = crossorigin; this.crossorigin = crossorigin;
this.loaded = false; this.loaded = false;
}; };
@ -29,15 +29,12 @@ PIXI.AtlasLoader.constructor = PIXI.AtlasLoader;
* This will begin loading the JSON file * This will begin loading the JSON file
*/ */
PIXI.AtlasLoader.prototype.load = function () { PIXI.AtlasLoader.prototype.load = function () {
this.ajaxRequest = new AjaxRequest(); this.ajaxRequest = new PIXI.AjaxRequest();
var scope = this; this.ajaxRequest.onreadystatechange = this.onAtlasLoaded.bind(this);
this.ajaxRequest.onreadystatechange = function () {
scope.onAtlasLoaded();
};
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);
}; };
/** /**
@ -45,113 +42,117 @@ PIXI.AtlasLoader.prototype.load = function () {
* @private * @private
*/ */
PIXI.AtlasLoader.prototype.onAtlasLoaded = function () { PIXI.AtlasLoader.prototype.onAtlasLoaded = 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.atlas = { this.atlas = {
meta : { meta : {
image : [] image : []
}, },
frames : [] frames : []
}; };
var result = this.ajaxRequest.responseText.split(/\r?\n/); var result = this.ajaxRequest.responseText.split(/\r?\n/);
var lineCount = -3; var lineCount = -3;
var currentImageId = 0; var currentImageId = 0;
var currentFrame = null; var currentFrame = null;
var nameInNextLine = false; var nameInNextLine = false;
// parser without rotation support yet!
for (var i = 0; i < result.length; i++) { var i = 0,
result[i] = result[i].replace(/^\s+|\s+$/g, ''); j = 0,
if (result[i] == "") { selfOnLoaded = this.onLoaded.bind(this);
nameInNextLine = i+1;
} // parser without rotation support yet!
if (result[i].length > 0) { for (i = 0; i < result.length; i++) {
if (nameInNextLine == i) { result[i] = result[i].replace(/^\s+|\s+$/g, '');
this.atlas.meta.image.push(result[i]); if (result[i] === '') {
currentImageId = this.atlas.meta.image.length - 1; nameInNextLine = i+1;
this.atlas.frames.push({}); }
lineCount = -3; if (result[i].length > 0) {
} else if (lineCount > 0) { if (nameInNextLine === i) {
if (lineCount % 7 == 1) { // frame name this.atlas.meta.image.push(result[i]);
if (currentFrame != null) { currentImageId = this.atlas.meta.image.length - 1;
this.atlas.frames.push({});
lineCount = -3;
} else if (lineCount > 0) {
if (lineCount % 7 === 1) { // frame name
if (currentFrame != null) { //jshint ignore:line
this.atlas.frames[currentImageId][currentFrame.name] = currentFrame;
}
currentFrame = { name: result[i], frame : {} };
} else {
var text = result[i].split(' ');
if (lineCount % 7 === 3) { // position
currentFrame.frame.x = Number(text[1].replace(',', ''));
currentFrame.frame.y = Number(text[2]);
} else if (lineCount % 7 === 4) { // size
currentFrame.frame.w = Number(text[1].replace(',', ''));
currentFrame.frame.h = Number(text[2]);
} else if (lineCount % 7 === 5) { // real size
var realSize = {
x : 0,
y : 0,
w : Number(text[1].replace(',', '')),
h : Number(text[2])
};
if (realSize.w > currentFrame.frame.w || realSize.h > currentFrame.frame.h) {
currentFrame.trimmed = true;
currentFrame.realSize = realSize;
} else {
currentFrame.trimmed = false;
}
}
}
}
lineCount++;
}
}
if (currentFrame != null) { //jshint ignore:line
this.atlas.frames[currentImageId][currentFrame.name] = currentFrame; this.atlas.frames[currentImageId][currentFrame.name] = currentFrame;
} }
currentFrame = { name: result[i], frame : {} };
if (this.atlas.meta.image.length > 0) {
this.images = [];
for (j = 0; j < this.atlas.meta.image.length; j++) {
// sprite sheet
var textureUrl = this.baseUrl + this.atlas.meta.image[j];
var frameData = this.atlas.frames[j];
this.images.push(new PIXI.ImageLoader(textureUrl, this.crossorigin));
for (i in frameData) {
var rect = frameData[i].frame;
if (rect) {
PIXI.TextureCache[i] = new PIXI.Texture(this.images[j].texture.baseTexture, {
x: rect.x,
y: rect.y,
width: rect.w,
height: rect.h
});
if (frameData[i].trimmed) {
PIXI.TextureCache[i].realSize = frameData[i].realSize;
// trim in pixi not supported yet, todo update trim properties if it is done ...
PIXI.TextureCache[i].trim.x = 0;
PIXI.TextureCache[i].trim.y = 0;
}
}
}
}
this.currentImageId = 0;
for (j = 0; j < this.images.length; j++) {
this.images[j].addEventListener('loaded', selfOnLoaded);
}
this.images[this.currentImageId].load();
} else { } else {
var text = result[i].split(" "); this.onLoaded();
if (lineCount % 7 == 3) { // position
currentFrame.frame.x = Number(text[1].replace(",", ""));
currentFrame.frame.y = Number(text[2]);
} else if (lineCount % 7 == 4) { // size
currentFrame.frame.w = Number(text[1].replace(",", ""));
currentFrame.frame.h = Number(text[2]);
} else if (lineCount % 7 == 5) { // real size
var realSize = {
x : 0,
y : 0,
w : Number(text[1].replace(",", "")),
h : Number(text[2])
}
if (realSize.w > currentFrame.frame.w || realSize.h > currentFrame.frame.h) {
currentFrame.trimmed = true;
currentFrame.realSize = realSize;
} else {
currentFrame.trimmed = false;
}
}
} }
}
lineCount++; } else {
this.onError();
} }
}
if (currentFrame != null) {
this.atlas.frames[currentImageId][currentFrame.name] = currentFrame;
}
if (this.atlas.meta.image.length > 0) {
this.images = [];
for (var j = 0; j < this.atlas.meta.image.length; j++) {
// sprite sheet
var scope = this;
var textureUrl = this.baseUrl + this.atlas.meta.image[j];
var frameData = this.atlas.frames[j];
this.images.push(new PIXI.ImageLoader(textureUrl, this.crossorigin));
for (var i in frameData) {
var rect = frameData[i].frame;
if (rect) {
PIXI.TextureCache[i] = new PIXI.Texture(this.images[j].texture.baseTexture, {
x: rect.x,
y: rect.y,
width: rect.w,
height: rect.h
});
if (frameData[i].trimmed == true) {
PIXI.TextureCache[i].realSize = frameData[i].realSize;
// trim in pixi not supported yet, todo update trim properties if it is done ...
PIXI.TextureCache[i].trim.x = 0;
PIXI.TextureCache[i].trim.y = 0;
}
}
}
}
this.currentImageId = 0;
for (var j = 0; j < this.images.length; j++) {
this.images[j].addEventListener(
"loaded", function (event) { scope.onLoaded(); }
);
}
this.images[this.currentImageId].load();
} else {
this.onLoaded();
}
} else {
this.onError();
} }
}
}; };
/** /**
@ -159,16 +160,16 @@ PIXI.AtlasLoader.prototype.onAtlasLoaded = function () {
* @private * @private
*/ */
PIXI.AtlasLoader.prototype.onLoaded = function () { PIXI.AtlasLoader.prototype.onLoaded = function () {
if (this.images.length - 1 > this.currentImageId) { if (this.images.length - 1 > this.currentImageId) {
this.currentImageId++; this.currentImageId++;
this.images[this.currentImageId].load(); this.images[this.currentImageId].load();
} else { } else {
this.loaded = true; this.loaded = true;
this.dispatchEvent({ this.dispatchEvent({
type: "loaded", type: 'loaded',
content: this content: this
}); });
} }
}; };
/** /**
@ -176,8 +177,8 @@ PIXI.AtlasLoader.prototype.onLoaded = function () {
* @private * @private
*/ */
PIXI.AtlasLoader.prototype.onError = function () { PIXI.AtlasLoader.prototype.onError = function () {
this.dispatchEvent({ this.dispatchEvent({
type: "error", type: 'error',
content: this content: this
}); });
}; };

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

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

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

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

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

@ -4,8 +4,8 @@
/** /**
* The json file loader is used to load in JSON data and parsing it * The json file loader is used to load in JSON data and parsing it
* When loaded this class will dispatch a "loaded" event * When loaded this class will dispatch a 'loaded' event
* If load failed this class will dispatch a "error" event * If load failed this class will dispatch a 'error' event
* *
* @class JsonLoader * @class JsonLoader
* @uses EventTarget * @uses EventTarget
@ -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 PIXI.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.protocol.indexOf("http") == -1) { if (this.ajaxRequest.status === 200 || window.location.protocol.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() {
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
}); });
}; };

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

@ -23,33 +23,33 @@
*/ */
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();
}; };
/** /**
@ -75,13 +75,13 @@ PIXI.SpineLoader.prototype.load = function () {
* @method onJSONLoaded * @method onJSONLoaded
* @private * @private
*/ */
PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { PIXI.SpineLoader.prototype.onJSONLoaded = function () {
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});
}; };

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

@ -4,12 +4,12 @@
/** /**
* The sprite sheet loader is used to load in JSON sprite sheet data * The sprite sheet loader is used to load in JSON sprite sheet data
* To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the 'JSON' format
* There is a free version so thats nice, although the paid version is great value for money. * There is a free version so thats nice, although the paid version is great value for money.
* It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.
* Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
* This loader will also load the image file that the Spritesheet points to as well as the data. * This loader will also load the image file that the Spritesheet points to as well as the data.
* When loaded this class will dispatch a "loaded" event * When loaded this class will dispatch a 'loaded' event
* *
* @class SpriteSheetLoader * @class SpriteSheetLoader
* @uses EventTarget * @uses EventTarget
@ -17,39 +17,38 @@
* @param url {String} The url of the sprite sheet JSON file * @param url {String} The url of the sprite sheet JSON file
* @param crossorigin {Boolean} Whether requests should be treated as crossorigin * @param crossorigin {Boolean} Whether requests should be treated as crossorigin
*/ */
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 +64,7 @@ PIXI.SpriteSheetLoader = function (url, crossorigin) {
* @property frames * @property frames
* @type Object * @type Object
*/ */
this.frames = {}; this.frames = {};
}; };
// constructor // constructor
@ -77,13 +76,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,36 +92,37 @@ 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 () {
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
}); });
}; };

229
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,8 +58,8 @@ PIXI.Graphics = function()
* @type Object * @type Object
* @private * @private
*/ */
this.currentPath = {points:[]}; this.currentPath = {points:[]};
} };
// constructor // constructor
PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype );
@ -75,17 +75,17 @@ 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);
} };
/** /**
* Moves the current drawing position to (x, y). * Moves the current drawing position to (x, y).
@ -96,15 +96,15 @@ 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);
} };
/** /**
* Draws a line using the current line style from the current drawing position to (x, y); * Draws a line using the current line style from the current drawing position to (x, y);
@ -116,9 +116,9 @@ 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;
} };
/** /**
* Specifies a simple one-color fill that subsequent calls to other Graphics methods * Specifies a simple one-color fill that subsequent calls to other Graphics methods
@ -130,10 +130,10 @@ 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;
} };
/** /**
* Applies a fill to the lines and shapes that were added since the last call to the beginFill() method. * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
@ -142,10 +142,10 @@ 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;
} };
/** /**
* @method drawRect * @method drawRect
@ -157,15 +157,15 @@ 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;
} };
/** /**
* Draws a circle. * Draws a circle.
@ -177,15 +177,15 @@ 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;
} };
/** /**
* Draws an ellipse. * Draws an ellipse.
@ -198,15 +198,15 @@ PIXI.Graphics.prototype.drawCircle = function( x, y, radius)
*/ */
PIXI.Graphics.prototype.drawEllipse = function( x, y, width, height) PIXI.Graphics.prototype.drawEllipse = 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;
} };
/** /**
* Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
@ -215,88 +215,83 @@ PIXI.Graphics.prototype.drawEllipse = 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 = [];
this.bounds = null//new PIXI.Rectangle(); this.bounds = null; //new PIXI.Rectangle();
} };
PIXI.Graphics.prototype.updateFilterBounds = function() PIXI.Graphics.prototype.updateFilterBounds = function()
{ {
if(!this.bounds) if(!this.bounds)
{ {
var minX = Infinity; var minX = Infinity;
var maxX = -Infinity; var maxX = -Infinity;
var minY = Infinity; var minY = Infinity;
var maxY = -Infinity; var maxY = -Infinity;
var points, x, y; var points, x, y;
for (var i = 0; i < this.graphicsData.length; i++) { for (var i = 0; i < this.graphicsData.length; i++) {
var data = this.graphicsData[i];
var type = data.type;
var lineWidth = data.lineWidth;
points = data.points;
var data = this.graphicsData[i]; if(type === PIXI.Graphics.RECT)
var type = data.type; {
var lineWidth = data.lineWidth; x = points.x - lineWidth/2;
y = points.y - lineWidth/2;
var width = points.width + lineWidth;
var height = points.height + lineWidth;
points = data.points; minX = x < minX ? x : minX;
maxX = x + width > maxX ? x + width : maxX;
if(type === PIXI.Graphics.RECT) minY = y < minY ? x : minY;
{ maxY = y + height > maxY ? y + height : maxY;
x = points.x - lineWidth/2; }
y = points.y - lineWidth/2; else if(type === PIXI.Graphics.CIRC || type === PIXI.Graphics.ELIP)
var width = points.width + lineWidth; {
var height = points.height + lineWidth; x = points.x;
y = points.y;
var radius = points.radius + lineWidth/2;
minX = x < minX ? x : minX; minX = x - radius < minX ? x - radius : minX;
maxX = x + width > maxX ? x + width : maxX; maxX = x + radius > maxX ? x + radius : maxX;
minY = y < minY ? x : minY; minY = y - radius < minY ? y - radius : minY;
maxY = y + height > maxY ? y + height : maxY; maxY = y + radius > maxY ? y + radius : maxY;
} }
else if(type === PIXI.Graphics.CIRC || type === PIXI.Graphics.ELIP) else
{ {
x = points.x; // POLY
y = points.y; for (var j = 0; j < points.length; j+=2)
var radius = points.radius + lineWidth/2; {
minX = x - radius < minX ? x - radius : minX; x = points[j];
maxX = x + radius > maxX ? x + radius : maxX; y = points[j+1];
minY = y - radius < minY ? y - radius : minY; minX = x-lineWidth < minX ? x-lineWidth : minX;
maxY = y + radius > maxY ? y + radius : maxY; maxX = x+lineWidth > maxX ? x+lineWidth : maxX;
}
else
{
// POLY
for (var j = 0; j < points.length; j+=2)
{
x = points[j]; minY = y-lineWidth < minY ? y-lineWidth : minY;
y = points[j+1]; maxY = y+lineWidth > maxY ? y+lineWidth : maxY;
}
}
}
minX = x-lineWidth < minX ? x-lineWidth : minX; this.bounds = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY);
maxX = x+lineWidth > maxX ? x+lineWidth : maxX; }
// console.log(this.bounds);
minY = y-lineWidth < minY ? y-lineWidth : minY; };
maxY = y+lineWidth > maxY ? y+lineWidth : maxY;
};
}
};
this.bounds = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY);
}
// console.log(this.bounds);
}
// SOME TYPES: // SOME TYPES:
PIXI.Graphics.POLY = 0; PIXI.Graphics.POLY = 0;

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

@ -11,7 +11,7 @@
PIXI.CanvasGraphics = function() PIXI.CanvasGraphics = function()
{ {
} };
/* /*
@ -25,128 +25,128 @@ PIXI.CanvasGraphics = function()
*/ */
PIXI.CanvasGraphics.renderGraphics = function(graphics, context) PIXI.CanvasGraphics.renderGraphics = function(graphics, context)
{ {
var worldAlpha = graphics.worldAlpha; var worldAlpha = graphics.worldAlpha;
var color = '';
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)
{ {
// ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
var ellipseData = data.points; var ellipseData = data.points;
var w = ellipseData[2] * 2; var w = ellipseData[2] * 2;
var h = ellipseData[3] * 2; var h = ellipseData[3] * 2;
var x = ellipseData[0] - w/2; var x = ellipseData[0] - w/2;
var y = ellipseData[1] - h/2; var y = ellipseData[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();
} }
} }
}
}; };
}
/* /*
* Renders a graphics mask * Renders a graphics mask
@ -159,82 +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 len = graphics.graphicsData.length;
var len = graphics.graphicsData.length; if(len === 0) return;
if(len === 0)return;
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") window.console.log('Pixi.js warning: masks in canvas can only mask using the first path in the graphics object');
} }
for (var i=0; i < 1; i++) for (var i = 0; i < 1; i++)
{ {
var data = graphics.graphicsData[i]; var 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)
{ {
// ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
var ellipseData = data.points; var ellipseData = data.points;
var w = ellipseData[2] * 2; var w = ellipseData[2] * 2;
var h = ellipseData[3] * 2; var h = ellipseData[3] * 2;
var x = ellipseData[0] - w/2; var x = ellipseData[0] - w/2;
var y = ellipseData[1] - h/2; var y = ellipseData[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();
} }
}
};
};
}

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

@ -2,7 +2,6 @@
* @author Mat Groves http://matgroves.com/ @Doormat23 * @author Mat Groves http://matgroves.com/ @Doormat23
*/ */
/** /**
* the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL. * the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL.
* Dont forget to add the view to your DOM or you will not see anything :) * Dont forget to add the view to your DOM or you will not see anything :)
@ -16,63 +15,63 @@
*/ */
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' );
//some filter variables //some filter variables
this.smoothProperty = null; this.smoothProperty = null;
if('imageSmoothingEnabled' in this.context) if('imageSmoothingEnabled' in this.context)
this.smoothProperty = 'imageSmoothingEnabled'; this.smoothProperty = 'imageSmoothingEnabled';
else if('webkitImageSmoothingEnabled' in this.context) else if('webkitImageSmoothingEnabled' in this.context)
this.smoothProperty = 'webkitImageSmoothingEnabled'; this.smoothProperty = 'webkitImageSmoothingEnabled';
else if('mozImageSmoothingEnabled' in this.context) else if('mozImageSmoothingEnabled' in this.context)
this.smoothProperty = 'mozImageSmoothingEnabled'; this.smoothProperty = 'mozImageSmoothingEnabled';
else if('oImageSmoothingEnabled' in this.context) else if('oImageSmoothingEnabled' in this.context)
this.smoothProperty = 'oImageSmoothingEnabled'; this.smoothProperty = 'oImageSmoothingEnabled';
this.scaleMode = null; this.scaleMode = null;
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
PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer;
@ -85,44 +84,42 @@ PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer;
*/ */
PIXI.CanvasRenderer.prototype.render = function(stage) PIXI.CanvasRenderer.prototype.render = function(stage)
{ {
//stage.__childrenAdded = [];
//stage.__childrenRemoved = [];
//stage.__childrenAdded = []; // update textures if need be
//stage.__childrenRemoved = []; PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
// update textures if need be PIXI.visibleCount++;
PIXI.texturesToUpdate = []; stage.updateTransform();
PIXI.texturesToDestroy = [];
PIXI.visibleCount++; // update the background color
stage.updateTransform(); if(this.view.style.backgroundColor !== stage.backgroundColorString && !this.transparent)
this.view.style.backgroundColor = stage.backgroundColorString;
// update the background color this.context.setTransform(1,0,0,1,0,0);
if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString; this.context.clearRect(0, 0, this.width, this.height);
this.context.setTransform(1,0,0,1,0,0);
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 = [];
} }
};
}
/** /**
* resizes the canvas view to the specified width and height * resizes the canvas view to the specified width and height
@ -133,12 +130,12 @@ 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;
} };
/** /**
* Renders a display object * Renders a display object
@ -149,124 +146,116 @@ 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;
//ignore null sources //ignore null sources
if(frame && frame.width && frame.height && displayObject.texture.baseTexture.source) if(frame && frame.width && frame.height && displayObject.texture.baseTexture.source)
{ {
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]);
//if smoothingEnabled is supported and we need to change the smoothing property for this texture //if smoothingEnabled is supported and we need to change the smoothing property for this texture
if(this.smoothProperty && this.scaleMode !== displayObject.texture.baseTexture.scaleMode) { if(this.smoothProperty && this.scaleMode !== displayObject.texture.baseTexture.scaleMode) {
this.scaleMode = displayObject.texture.baseTexture.scaleMode; this.scaleMode = displayObject.texture.baseTexture.scaleMode;
context[this.smoothProperty] = (this.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR); context[this.smoothProperty] = (this.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR);
} }
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)
{ {
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]);
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.data instanceof PIXI.Graphics) if(displayObject.data instanceof PIXI.Graphics)
{ {
var mask = displayObject.data; var mask = displayObject.data;
if(displayObject.open) if(displayObject.open)
{ {
context.save(); context.save();
var cacheAlpha = mask.alpha; var cacheAlpha = mask.alpha;
var maskTransform = mask.worldTransform; var maskTransform = mask.worldTransform;
context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]) context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]);
mask.worldAlpha = 0.5; mask.worldAlpha = 0.5;
context.worldAlpha = 0; context.worldAlpha = 0;
PIXI.CanvasGraphics.renderGraphicsMask(mask, context); PIXI.CanvasGraphics.renderGraphicsMask(mask, context);
context.clip(); context.clip();
mask.worldAlpha = cacheAlpha; mask.worldAlpha = cacheAlpha;
} }
else else
{ {
context.restore(); context.restore();
} }
} }
else }
{ //count++
// only masks supported right now! displayObject = displayObject._iNext;
} }
} while(displayObject !== testObject);
// count++ };
displayObject = displayObject._iNext;
}
while(displayObject != testObject)
}
/** /**
* Renders a flat strip * Renders a flat strip
@ -277,33 +266,30 @@ 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 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!
var index = i*2;
// draw some triangles! var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4];
var index = i*2; var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; context.moveTo(x0, y0);
var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; context.lineTo(x1, y1);
context.lineTo(x2, y2);
}
context.moveTo(x0, y0); context.fillStyle = '#FF0000';
context.lineTo(x1, y1); context.fill();
context.lineTo(x2, y2); context.closePath();
};
};
context.fillStyle = "#FF0000";
context.fill();
context.closePath();
}
/** /**
* Renders a tiling sprite * Renders a tiling sprite
@ -314,29 +300,30 @@ 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();
} };
/** /**
* Renders a strip * Renders a strip
@ -347,55 +334,49 @@ 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++)
{
// draw some triangles! for (var i = 1; i < length-2; i++)
var index = i*2; {
// draw some triangles!
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.beginPath();
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.closePath();
context.save(); context.clip();
context.beginPath();
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.closePath();
context.clip();
// Compute matrix transform // Compute matrix transform
var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2; var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2;
var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; var deltaA = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2;
var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; var deltaB = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2;
var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; var deltaC = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2;
var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; var deltaD = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2;
var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; var deltaE = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2;
var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; var deltaF = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2;
context.transform(deltaA / delta, deltaD / delta,
deltaB / delta, deltaE / delta,
deltaC / delta, deltaF / delta);
context.drawImage(strip.texture.baseTexture.source, 0, 0);
context.restore();
context.transform(delta_a/delta, delta_d/delta, }
delta_b/delta, delta_e/delta, };
delta_c/delta, delta_f/delta);
context.drawImage(strip.texture.baseTexture.source, 0, 0);
context.restore();
};
}

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

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

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

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

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

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

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

@ -9,35 +9,35 @@ PIXI._batchs = [];
*/ */
PIXI._getBatch = function(gl) PIXI._getBatch = function(gl)
{ {
if(PIXI._batchs.length == 0) if(PIXI._batchs.length === 0)
{ {
return new PIXI.WebGLBatch(gl); return new PIXI.WebGLBatch(gl);
} }
else else
{ {
return PIXI._batchs.pop(); return PIXI._batchs.pop();
} }
} };
/** /**
* @private * @private
*/ */
PIXI._returnBatch = function(batch) PIXI._returnBatch = function(batch)
{ {
batch.clean(); batch.clean();
PIXI._batchs.push(batch); PIXI._batchs.push(batch);
} };
/** /**
* @private * @private
*/ */
PIXI._restoreBatchs = function(gl) PIXI._restoreBatchs = function(gl)
{ {
for (var i=0; i < PIXI._batchs.length; i++) for (var i=0; i < PIXI._batchs.length; i++)
{ {
PIXI._batchs[i].restoreLostContext(gl); PIXI._batchs[i].restoreLostContext(gl);
}; }
} };
/** /**
* A WebGLBatch Enables a group of sprites to be drawn using the same settings. * A WebGLBatch Enables a group of sprites to be drawn using the same settings.
@ -53,17 +53,17 @@ 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
PIXI.WebGLBatch.prototype.constructor = PIXI.WebGLBatch; PIXI.WebGLBatch.prototype.constructor = PIXI.WebGLBatch;
@ -75,17 +75,17 @@ 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.last = null;
this.size = 0; this.size = 0;
this.head; this.head = null;
this.tail; this.tail = null;
} };
/** /**
* Recreates the buffers in the event of a context loss * Recreates the buffers in the event of a context loss
@ -95,32 +95,32 @@ 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();
} };
/** /**
* inits the batch's texture and blend mode based if the supplied sprite * inits the batch's texture and blend mode based if the supplied sprite
* *
* @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();
} };
/** /**
* inserts a sprite before the specified sprite * inserts a sprite before the specified sprite
@ -131,24 +131,24 @@ 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;
} }
} };
/** /**
* inserts a sprite after the specified sprite * inserts a sprite after the specified sprite
@ -159,25 +159,25 @@ 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;
} }
} };
/** /**
* removes a sprite from the batch * removes a sprite from the batch
@ -187,41 +187,41 @@ 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 === 0)
{ {
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;
} };
/** /**
* Splits the batch into two with the specified sprite being the start of the new batch. * Splits the batch into two with the specified sprite being the start of the new batch.
@ -232,37 +232,37 @@ 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;
} };
/** /**
* Merges two batchs together * Merges two batchs together
@ -272,22 +272,22 @@ 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;
} }
} };
/** /**
* Grows the size of the batch. As the elements in the batch cannot have a dynamic size this * Grows the size of the batch. As the elements in the batch cannot have a dynamic size this
@ -298,51 +298,52 @@ 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
this.verticies = new Float32Array(this.dynamicSize * 8);
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); // grow verts
gl.bufferData(gl.ARRAY_BUFFER,this.verticies , gl.DYNAMIC_DRAW); this.verticies = new Float32Array(this.dynamicSize * 8);
this.uvs = new Float32Array( this.dynamicSize * 8 ); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); gl.bufferData(gl.ARRAY_BUFFER,this.verticies , gl.DYNAMIC_DRAW);
gl.bufferData(gl.ARRAY_BUFFER, this.uvs , gl.DYNAMIC_DRAW);
this.dirtyUVS = true; this.uvs = new Float32Array( this.dynamicSize * 8 );
gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
gl.bufferData(gl.ARRAY_BUFFER, this.uvs , gl.DYNAMIC_DRAW);
this.colors = new Float32Array( this.dynamicSize * 4 ); this.dirtyUVS = true;
gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, this.colors , gl.DYNAMIC_DRAW);
this.dirtyColors = true; this.colors = new Float32Array( this.dynamicSize * 4 );
gl.bindBuffer(gl.ARRAY_BUFFER, this.colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, this.colors , gl.DYNAMIC_DRAW);
this.indices = new Uint16Array(this.dynamicSize * 6); this.dirtyColors = true;
var length = this.indices.length/6;
for (var i=0; i < length; i++) this.indices = new Uint16Array(this.dynamicSize * 6);
{ var length = this.indices.length/6;
var index2 = i * 6;
var index3 = i * 4;
this.indices[index2 + 0] = index3 + 0;
this.indices[index2 + 1] = index3 + 1;
this.indices[index2 + 2] = index3 + 2;
this.indices[index2 + 3] = index3 + 0;
this.indices[index2 + 4] = index3 + 2;
this.indices[index2 + 5] = index3 + 3;
};
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); for (var i = 0; i < length; i++)
{
var index2 = i * 6;
var index3 = i * 4;
this.indices[index2 + 0] = index3 + 0;
this.indices[index2 + 1] = index3 + 1;
this.indices[index2 + 2] = index3 + 2;
this.indices[index2 + 3] = index3 + 0;
this.indices[index2 + 4] = index3 + 2;
this.indices[index2 + 5] = index3 + 3;
}
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW);
} };
/** /**
* Refresh's all the data in the batch and sync's it with the webGL buffers * Refresh's all the data in the batch and sync's it with the webGL buffers
@ -351,54 +352,51 @@ PIXI.WebGLBatch.prototype.growBatch = function()
*/ */
PIXI.WebGLBatch.prototype.refresh = function() PIXI.WebGLBatch.prototype.refresh = function()
{ {
var gl = this.gl; if (this.dynamicSize < this.size)
{
this.growBatch();
}
if (this.dynamicSize < this.size) var indexRun = 0;
{ var index, colorIndex;
this.growBatch();
}
var indexRun = 0; var displayObject = this.head;
var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index;
var a, b, c, d, tx, ty;
var displayObject = this.head; while(displayObject)
{
index = indexRun * 8;
while(displayObject) var texture = displayObject.texture;
{
index = indexRun * 8;
var texture = displayObject.texture; var frame = texture.frame;
var tw = texture.baseTexture.width;
var th = texture.baseTexture.height;
var frame = texture.frame; this.uvs[index + 0] = frame.x / tw;
var tw = texture.baseTexture.width; this.uvs[index +1] = frame.y / th;
var th = texture.baseTexture.height;
this.uvs[index + 0] = frame.x / tw; this.uvs[index +2] = (frame.x + frame.width) / tw;
this.uvs[index +1] = frame.y / th; this.uvs[index +3] = frame.y / th;
this.uvs[index +2] = (frame.x + frame.width) / tw; this.uvs[index +4] = (frame.x + frame.width) / tw;
this.uvs[index +3] = frame.y / th; this.uvs[index +5] = (frame.y + frame.height) / th;
this.uvs[index +4] = (frame.x + frame.width) / tw; this.uvs[index +6] = frame.x / tw;
this.uvs[index +5] = (frame.y + frame.height) / th; this.uvs[index +7] = (frame.y + frame.height) / th;
this.uvs[index +6] = frame.x / tw; displayObject.updateFrame = false;
this.uvs[index +7] = (frame.y + frame.height) / th;
displayObject.updateFrame = false; colorIndex = indexRun * 4;
this.colors[colorIndex] = this.colors[colorIndex + 1] = this.colors[colorIndex + 2] = this.colors[colorIndex + 3] = displayObject.worldAlpha;
colorIndex = indexRun * 4; displayObject = displayObject.__next;
this.colors[colorIndex] = this.colors[colorIndex + 1] = this.colors[colorIndex + 2] = this.colors[colorIndex + 3] = displayObject.worldAlpha;
displayObject = displayObject.__next; indexRun++;
}
indexRun ++; this.dirtyUVS = true;
} this.dirtyColors = true;
};
this.dirtyUVS = true;
this.dirtyColors = true;
}
/** /**
* Updates all the relevant geometry and uploads the data to the GPU * Updates all the relevant geometry and uploads the data to the GPU
@ -407,103 +405,102 @@ PIXI.WebGLBatch.prototype.refresh = function()
*/ */
PIXI.WebGLBatch.prototype.update = function() PIXI.WebGLBatch.prototype.update = function()
{ {
var gl = this.gl; var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index;
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;
var verticies = this.verticies; var verticies = this.verticies;
var uvs = this.uvs; var uvs = this.uvs;
var colors = this.colors; var colors = this.colors;
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];
verticies[index + 0 ] = a * w1 + c * h1 + tx; verticies[index + 0 ] = a * w1 + c * h1 + tx;
verticies[index + 1 ] = d * h1 + b * w1 + ty; verticies[index + 1 ] = d * h1 + b * w1 + ty;
verticies[index + 2 ] = a * w0 + c * h1 + tx; verticies[index + 2 ] = a * w0 + c * h1 + tx;
verticies[index + 3 ] = d * h1 + b * w0 + ty; verticies[index + 3 ] = d * h1 + b * w0 + ty;
verticies[index + 4 ] = a * w0 + c * h0 + tx; verticies[index + 4 ] = a * w0 + c * h0 + tx;
verticies[index + 5 ] = d * h0 + b * w0 + ty; verticies[index + 5 ] = d * h0 + b * w0 + ty;
verticies[index + 6] = a * w1 + c * h0 + tx; verticies[index + 6] = a * w1 + c * h0 + tx;
verticies[index + 7] = d * h0 + b * w1 + ty; 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;
uvs[index + 0] = frame.x / tw; uvs[index + 0] = frame.x / tw;
uvs[index +1] = frame.y / th; uvs[index +1] = frame.y / th;
uvs[index +2] = (frame.x + frame.width) / tw; uvs[index +2] = (frame.x + frame.width) / tw;
uvs[index +3] = frame.y / th; uvs[index +3] = frame.y / th;
uvs[index +4] = (frame.x + frame.width) / tw; uvs[index +4] = (frame.x + frame.width) / tw;
uvs[index +5] = (frame.y + frame.height) / th; uvs[index +5] = (frame.y + frame.height) / th;
uvs[index +6] = frame.x / tw; uvs[index +6] = frame.x / tw;
uvs[index +7] = (frame.y + frame.height) / th; 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;
colors[colorIndex] = colors[colorIndex + 1] = colors[colorIndex + 2] = colors[colorIndex + 3] = displayObject.worldAlpha; colors[colorIndex] = colors[colorIndex + 1] = colors[colorIndex + 2] = colors[colorIndex + 3] = displayObject.worldAlpha;
this.dirtyColors = true; this.dirtyColors = true;
} }
} }
else else
{ {
index = indexRun * 8; index = indexRun * 8;
verticies[index + 0 ] = verticies[index + 1 ] = verticies[index + 2 ] = verticies[index + 3 ] = verticies[index + 4 ] = verticies[index + 5 ] = verticies[index + 6] = verticies[index + 7] = 0; verticies[index + 0 ] = verticies[index + 1 ] = verticies[index + 2 ] = verticies[index + 3 ] = verticies[index + 4 ] = verticies[index + 5 ] = verticies[index + 6] = verticies[index + 7] = 0;
} }
indexRun++; indexRun++;
displayObject = displayObject.__next; displayObject = displayObject.__next;
} }
} };
/** /**
* Draws the batch to the frame buffer * Draws the batch to the frame buffer
@ -512,41 +509,42 @@ 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(end === undefined)
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 === 0)return;
this.update(); this.update();
var gl = this.gl; var gl = this.gl;
//TODO optimize this! //TODO optimize this!
var shaderProgram = PIXI.defaultShader; var shaderProgram = PIXI.defaultShader;
//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.aVertexPosition, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shaderProgram.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
// update the uvs // update the uvs
//var isDefault = (shaderProgram == PIXI.shaderProgram) //var isDefault = (shaderProgram == PIXI.shaderProgram)
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.aTextureCoord, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(shaderProgram.aTextureCoord, 2, gl.FLOAT, false, 0, 0);
@ -554,21 +552,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 );
} };

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

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

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

@ -10,7 +10,7 @@
PIXI.WebGLGraphics = function() PIXI.WebGLGraphics = function()
{ {
} };
/** /**
* Renders the graphics object * Renders the graphics object
@ -23,62 +23,61 @@ 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.primitiveShader.translationMatrix, false, m); gl.uniformMatrix3fv(PIXI.primitiveShader.translationMatrix, false, m);
gl.uniform2f(PIXI.primitiveShader.projectionVector, projection.x, -projection.y); gl.uniform2f(PIXI.primitiveShader.projectionVector, projection.x, -projection.y);
gl.uniform2f(PIXI.primitiveShader.offsetVector, -PIXI.offset.x, -PIXI.offset.y); gl.uniform2f(PIXI.primitiveShader.offsetVector, -PIXI.offset.x, -PIXI.offset.y);
gl.uniform1f(PIXI.primitiveShader.alpha, graphics.worldAlpha); gl.uniform1f(PIXI.primitiveShader.alpha, graphics.worldAlpha);
gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer);
gl.vertexAttribPointer(PIXI.primitiveShader.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); gl.vertexAttribPointer(PIXI.primitiveShader.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0);
gl.vertexAttribPointer(PIXI.primitiveShader.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4); gl.vertexAttribPointer(PIXI.primitiveShader.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 );
PIXI.deactivatePrimitiveShader(); PIXI.deactivatePrimitiveShader();
// return to default shader...
// return to default shader... // PIXI.activateShader(PIXI.defaultShader);
// PIXI.activateShader(PIXI.defaultShader); };
}
/** /**
* Updates the graphics object * Updates the graphics object
@ -90,47 +89,47 @@ 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);
} };
/** /**
* Builds a rectangle to draw * Builds a rectangle to draw
@ -143,59 +142,58 @@ 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 = PIXI.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);
} }
};
}
/** /**
* Builds a circle to draw * Builds a circle to draw
@ -208,62 +206,63 @@ 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 ;
if(graphicsData.fill) var i = 0;
{
var color = HEXtoRGB(graphicsData.fillColor);
var alpha = graphicsData.fillAlpha;
var r = color[0] * alpha; if(graphicsData.fill)
var g = color[1] * alpha; {
var b = color[2] * alpha; var color = PIXI.hex2rgb(graphicsData.fillColor);
var alpha = graphicsData.fillAlpha;
var verts = webGLData.points; var r = color[0] * alpha;
var indices = webGLData.indices; var g = color[1] * alpha;
var b = color[2] * alpha;
var vecPos = verts.length/6; var verts = webGLData.points;
var indices = webGLData.indices;
indices.push(vecPos); var vecPos = verts.length/6;
for (var i=0; i < totalSegs + 1 ; i++) indices.push(vecPos);
{
verts.push(x,y, r, g, b, alpha);
verts.push(x + Math.sin(seg * i) * width, for (i = 0; i < totalSegs + 1 ; i++)
y + Math.cos(seg * i) * height, {
r, g, b, alpha); verts.push(x,y, r, g, b, alpha);
indices.push(vecPos++, vecPos++); verts.push(x + Math.sin(seg * i) * width,
}; y + Math.cos(seg * i) * height,
r, g, b, alpha);
indices.push(vecPos-1); indices.push(vecPos++, vecPos++);
} }
if(graphicsData.lineWidth) indices.push(vecPos-1);
{ }
graphicsData.points = [];
for (var i=0; i < totalSegs + 1; i++) if(graphicsData.lineWidth)
{ {
graphicsData.points.push(x + Math.sin(seg * i) * width, graphicsData.points = [];
y + Math.cos(seg * i) * height)
};
PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); for (i = 0; i < totalSegs + 1; i++)
} {
graphicsData.points.push(x + Math.sin(seg * i) * width,
y + Math.cos(seg * i) * height);
}
} PIXI.WebGLGraphics.buildLine(graphicsData, webGLData);
}
};
/** /**
* Builds a line to draw * Builds a line to draw
@ -276,205 +275,204 @@ PIXI.WebGLGraphics.buildCircle = function(graphicsData, webGLData)
*/ */
PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData) PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData)
{ {
// TODO OPTIMISE! // TODO OPTIMISE!
var i = 0;
var wrap = true; var points = graphicsData.points;
var points = graphicsData.points; if(points.length === 0)return;
if(points.length == 0)return;
// if the line width is an odd number add 0.5 to align to a whole pixel // if the line width is an odd number add 0.5 to align to a whole pixel
if(graphicsData.lineWidth%2) if(graphicsData.lineWidth%2)
{ {
for (var i = 0; i < points.length; i++) { for (i = 0; i < points.length; i++) {
points[i] += 0.5; points[i] += 0.5;
}; }
} }
// 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 = PIXI.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 px, py, p1x, p1y, p2x, p2y, p3x, p3y;
var perpx, perpy, perp2x, perp2y, perp3x, perp3y; var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
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 (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(Math.abs(denom) < 0.1 ) if(Math.abs(denom) < 0.1 )
{ {
denom+=10.1; denom+=10.1;
verts.push(p2x - perpx , p2y - perpy, verts.push(p2x - perpx , p2y - perpy,
r, g, b, alpha); r, g, b, alpha);
verts.push(p2x + perpx , p2y + perpy, verts.push(p2x + perpx , p2y + perpy,
r, g, b, alpha); r, g, b, alpha);
continue; continue;
} }
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);
} };
/** /**
* Builds a polygon to draw * Builds a polygon to draw
@ -487,46 +485,40 @@ 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 length = points.length / 2;
// sort color // sort color
var color = HEXtoRGB(graphicsData.fillColor); var color = PIXI.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 triangles = PIXI.PolyK.Triangulate(points); var triangles = PIXI.PolyK.Triangulate(points);
var vertPos = verts.length / 6;
for (var i=0; i < triangles.length; i+=3)
{
indices.push(triangles[i] + vertPos);
indices.push(triangles[i] + vertPos);
indices.push(triangles[i+1] + vertPos);
indices.push(triangles[i+2] +vertPos);
indices.push(triangles[i+2] + vertPos);
};
for (var i = 0; i < length; i++)
{
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];
}
var vertPos = verts.length / 6;
var i = 0;
for (i = 0; i < triangles.length; i+=3)
{
indices.push(triangles[i] + vertPos);
indices.push(triangles[i] + vertPos);
indices.push(triangles[i+1] + vertPos);
indices.push(triangles[i+2] +vertPos);
indices.push(triangles[i+2] + vertPos);
}
for (i = 0; i < length; i++)
{
verts.push(points[i * 2], points[i * 2 + 1],
r, g, b, alpha);
}
};

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

File diff suppressed because it is too large Load diff

344
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,43 +25,43 @@ 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 = [];
var options = { var options = {
alpha: this.transparent, alpha: this.transparent,
antialias:!!antialias, // SPEED UP?? antialias:!!antialias, // SPEED UP??
premultipliedAlpha:false, premultipliedAlpha:false,
stencil:true stencil:true
} };
//try 'experimental-webgl' //try 'experimental-webgl'
try { try {
PIXI.gl = this.gl = this.view.getContext("experimental-webgl", options); PIXI.gl = this.gl = this.view.getContext('experimental-webgl', options);
} catch (e) { } catch (e) {
//try 'webgl' //try 'webgl'
try { try {
PIXI.gl = this.gl = this.view.getContext("webgl", options); PIXI.gl = this.gl = this.view.getContext('webgl', options);
} catch (e) { } catch (e2) {
// fail, not able to get a context // fail, not able to get a context
throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this); throw new Error(' This browser does not support webGL. Try using the canvas renderer' + this);
} }
} }
PIXI.initDefaultShaders(); PIXI.initDefaultShaders();
@ -78,8 +78,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);
@ -92,11 +92,11 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
this.resize(this.width, this.height); this.resize(this.width, this.height);
this.contextLost = false; this.contextLost = false;
//PIXI.pushShader(PIXI.defaultShader); //PIXI.pushShader(PIXI.defaultShader);
this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl, this.transparent); this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl, this.transparent);
// this.stageRenderGroup. = this.transparent // this.stageRenderGroup. = this.transparent
} };
// constructor // constructor
PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer; PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer;
@ -111,15 +111,15 @@ PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer;
*/ */
PIXI.WebGLRenderer.getBatch = function() PIXI.WebGLRenderer.getBatch = function()
{ {
if(PIXI._batchs.length == 0) if(PIXI._batchs.length === 0)
{ {
return new PIXI.WebGLBatch(PIXI.WebGLRenderer.gl); return new PIXI.WebGLBatch(PIXI.WebGLRenderer.gl);
} }
else else
{ {
return PIXI._batchs.pop(); return PIXI._batchs.pop();
} }
} };
/** /**
* Puts a batch back into the pool * Puts a batch back into the pool
@ -131,9 +131,9 @@ 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);
} };
/** /**
* Renders the stage to its webGL view * Renders the stage to its webGL view
@ -143,68 +143,68 @@ 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);
} }
// 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;
PIXI.projection.x = this.width/2; PIXI.projection.x = this.width/2;
PIXI.projection.y = -this.height/2; PIXI.projection.y = -this.height/2;
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; i < PIXI.Texture.frameUpdates.length; i++)
{ {
PIXI.Texture.frameUpdates[i].updateFrame = false; PIXI.Texture.frameUpdates[i].updateFrame = false;
}; }
PIXI.Texture.frameUpdates = []; PIXI.Texture.frameUpdates = [];
} }
} };
/** /**
* Updates the textures loaded into this webgl renderer * Updates the textures loaded into this webgl renderer
@ -215,12 +215,18 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
*/ */
PIXI.WebGLRenderer.updateTextures = function() PIXI.WebGLRenderer.updateTextures = function()
{ {
//TODO break this out into a texture manager... var i = 0;
for (var i=0; i < PIXI.texturesToUpdate.length; i++) PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]);
for (var i=0; i < PIXI.texturesToDestroy.length; i++) PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]); //TODO break this out into a texture manager...
PIXI.texturesToUpdate = []; for (i = 0; i < PIXI.texturesToUpdate.length; i++)
PIXI.texturesToDestroy = []; PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]);
}
for (i = 0; i < PIXI.texturesToDestroy.length; i++)
PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]);
PIXI.texturesToUpdate = [];
PIXI.texturesToDestroy = [];
};
/** /**
* Updates a loaded webgl texture * Updates a loaded webgl texture
@ -232,39 +238,39 @@ 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, texture.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR ? gl.LINEAR : gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR ? gl.LINEAR : gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR ? gl.LINEAR : gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR ? gl.LINEAR : gl.NEAREST);
// 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);
} }
} };
/** /**
* Destroys a loaded webgl texture * Destroys a loaded webgl texture
@ -275,15 +281,15 @@ 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);
} }
} };
/** /**
* resizes the webGL view to the specified width and height * resizes the webGL view to the specified width and height
@ -294,27 +300,27 @@ 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;
//PIXI.size.x = this.width/2; //PIXI.size.x = this.width/2;
//PIXI.size.y = -this.height/2; //PIXI.size.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;
} };
/** /**
* Handles a lost webgl context * Handles a lost webgl context
@ -325,9 +331,9 @@ 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;
} };
/** /**
* Handles a restored webgl context * Handles a restored webgl context
@ -336,28 +342,28 @@ PIXI.WebGLRenderer.prototype.handleContextLost = function(event)
* @param event {Event} * @param event {Event}
* @private * @private
*/ */
PIXI.WebGLRenderer.prototype.handleContextRestored = function(event) PIXI.WebGLRenderer.prototype.handleContextRestored = function()
{ {
this.gl = this.view.getContext("experimental-webgl", { this.gl = this.view.getContext('experimental-webgl', {
alpha: true 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; i < this.batchs.length; 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;
} };

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

@ -2,73 +2,70 @@
* @author Mat Groves http://matgroves.com/ @Doormat23 * @author Mat Groves http://matgroves.com/ @Doormat23
*/ */
PIXI.initDefaultShaders = function() PIXI.initDefaultShaders = function()
{ {
PIXI.primitiveShader = new PIXI.PrimitiveShader(); PIXI.primitiveShader = new PIXI.PrimitiveShader();
PIXI.primitiveShader.init(); PIXI.primitiveShader.init();
PIXI.stripShader = new PIXI.StripShader(); PIXI.stripShader = new PIXI.StripShader();
PIXI.stripShader.init(); PIXI.stripShader.init();
PIXI.defaultShader = new PIXI.PixiShader(); PIXI.defaultShader = new PIXI.PixiShader();
PIXI.defaultShader.init(); PIXI.defaultShader.init();
var gl = PIXI.gl; var gl = PIXI.gl;
var shaderProgram = PIXI.defaultShader.program; var shaderProgram = PIXI.defaultShader.program;
gl.useProgram(shaderProgram);
gl.useProgram(shaderProgram); gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition);
gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute);
gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute); };
gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
}
PIXI.activatePrimitiveShader = function() PIXI.activatePrimitiveShader = function()
{ {
var gl = PIXI.gl; var gl = PIXI.gl;
gl.useProgram(PIXI.primitiveShader.program); gl.useProgram(PIXI.primitiveShader.program);
gl.disableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.disableVertexAttribArray(PIXI.defaultShader.aVertexPosition);
gl.disableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.disableVertexAttribArray(PIXI.defaultShader.colorAttribute);
gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord); gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
gl.enableVertexAttribArray(PIXI.primitiveShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.primitiveShader.aVertexPosition);
gl.enableVertexAttribArray(PIXI.primitiveShader.colorAttribute); gl.enableVertexAttribArray(PIXI.primitiveShader.colorAttribute);
} };
PIXI.deactivatePrimitiveShader = function() PIXI.deactivatePrimitiveShader = function()
{ {
var gl = PIXI.gl; var gl = PIXI.gl;
gl.useProgram(PIXI.defaultShader.program); gl.useProgram(PIXI.defaultShader.program);
gl.disableVertexAttribArray(PIXI.primitiveShader.aVertexPosition); gl.disableVertexAttribArray(PIXI.primitiveShader.aVertexPosition);
gl.disableVertexAttribArray(PIXI.primitiveShader.colorAttribute); gl.disableVertexAttribArray(PIXI.primitiveShader.colorAttribute);
gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition);
gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute);
gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
};
}
PIXI.activateStripShader = function() PIXI.activateStripShader = function()
{ {
var gl = PIXI.gl; var gl = PIXI.gl;
gl.useProgram(PIXI.stripShader.program); gl.useProgram(PIXI.stripShader.program);
// gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord); // gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
} };
PIXI.deactivateStripShader = function() PIXI.deactivateStripShader = function()
{ {
var gl = PIXI.gl; var gl = PIXI.gl;
gl.useProgram(PIXI.defaultShader.program); gl.useProgram(PIXI.defaultShader.program);
//gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); //gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord);
} };
/* /*
@ -77,45 +74,44 @@ SHADER COMPILER HELPERS
PIXI.CompileVertexShader = function(gl, shaderSrc) PIXI.CompileVertexShader = function(gl, shaderSrc)
{ {
return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER); return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER);
} };
PIXI.CompileFragmentShader = function(gl, shaderSrc) PIXI.CompileFragmentShader = function(gl, shaderSrc)
{ {
return PIXI._CompileShader(gl, shaderSrc, gl.FRAGMENT_SHADER); return PIXI._CompileShader(gl, shaderSrc, gl.FRAGMENT_SHADER);
} };
PIXI._CompileShader = function(gl, shaderSrc, shaderType) PIXI._CompileShader = function(gl, shaderSrc, shaderType)
{ {
var src = shaderSrc.join("\n"); var src = shaderSrc.join("\n");
var shader = gl.createShader(shaderType); var shader = gl.createShader(shaderType);
gl.shaderSource(shader, src); gl.shaderSource(shader, src);
gl.compileShader(shader); gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.log(gl.getShaderInfoLog(shader)); window.console.log(gl.getShaderInfoLog(shader));
return null; return null;
} }
return shader;
}
return shader;
};
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);
gl.linkProgram(shaderProgram); gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
console.log("Could not initialise shaders"); window.console.log("Could not initialise shaders");
} }
return shaderProgram; return shaderProgram;
} };

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

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

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

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

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

@ -16,92 +16,92 @@ PIXI.texturesToDestroy = [];
*/ */
PIXI.BaseTexture = function(source, scaleMode) PIXI.BaseTexture = function(source, scaleMode)
{ {
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;
/** /**
* The scale mode to apply when scaling this texture * The scale mode to apply when scaling this texture
* @property scaleMode * @property scaleMode
* @type PIXI.BaseTexture.SCALE_MODE * @type PIXI.BaseTexture.SCALE_MODE
* @default PIXI.BaseTexture.SCALE_MODE.LINEAR * @default PIXI.BaseTexture.SCALE_MODE.LINEAR
*/ */
this.scaleMode = scaleMode || PIXI.BaseTexture.SCALE_MODE.DEFAULT; this.scaleMode = scaleMode || PIXI.BaseTexture.SCALE_MODE.DEFAULT;
/** /**
* [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.imageUrl = null; this.imageUrl = null;
this._powerOf2 = false; this._powerOf2 = false;
} };
PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture; PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture;
@ -112,16 +112,16 @@ 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)
{ {
if (this.imageUrl in PIXI.BaseTextureCache) if (this.imageUrl in PIXI.BaseTextureCache)
delete PIXI.BaseTextureCache[this.imageUrl]; delete PIXI.BaseTextureCache[this.imageUrl];
this.imageUrl = null; this.imageUrl = null;
this.source.src = null; this.source.src = null;
} }
this.source = null; this.source = null;
PIXI.texturesToDestroy.push(this); PIXI.texturesToDestroy.push(this);
} };
/** /**
* *
@ -131,10 +131,10 @@ PIXI.BaseTexture.prototype.destroy = function()
PIXI.BaseTexture.prototype.updateSourceImage = function(newSrc) PIXI.BaseTexture.prototype.updateSourceImage = function(newSrc)
{ {
this.hasLoaded = false; this.hasLoaded = false;
this.source.src = null; this.source.src = null;
this.source.src = newSrc; this.source.src = newSrc;
} };
/** /**
* Helper function that returns a base texture based on an image url * Helper function that returns a base texture based on an image url
@ -147,27 +147,27 @@ PIXI.BaseTexture.prototype.updateSourceImage = function(newSrc)
*/ */
PIXI.BaseTexture.fromImage = function(imageUrl, crossorigin, scaleMode) PIXI.BaseTexture.fromImage = function(imageUrl, crossorigin, scaleMode)
{ {
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, scaleMode); baseTexture = new PIXI.BaseTexture(image, scaleMode);
baseTexture.imageUrl = imageUrl; baseTexture.imageUrl = imageUrl;
PIXI.BaseTextureCache[imageUrl] = baseTexture; PIXI.BaseTextureCache[imageUrl] = baseTexture;
} }
return baseTexture; return baseTexture;
} };
PIXI.BaseTexture.SCALE_MODE = { PIXI.BaseTexture.SCALE_MODE = {
DEFAULT: 0, //default to LINEAR DEFAULT: 0, //default to LINEAR
LINEAR: 0, LINEAR: 0,
NEAREST: 1 NEAREST: 1
}; };

255
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,24 +32,24 @@
*/ */
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.indetityMatrix = PIXI.mat3.create(); this.indetityMatrix = PIXI.mat3.create();
this.frame = new PIXI.Rectangle(0, 0, this.width, this.height); this.frame = new PIXI.Rectangle(0, 0, this.width, this.height);
if(PIXI.gl) 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 );
PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture; PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture;
@ -62,65 +62,65 @@ 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;
} };
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);
} }
} };
/** /**
* Initializes the canvas data for this texture * Initializes the canvas data for this texture
@ -130,13 +130,13 @@ 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;
} };
/** /**
* This function will draw the display object to the texture. * This function will draw the display object to the texture.
@ -148,67 +148,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.indetityMatrix; displayObject.worldTransform = PIXI.mat3.create();//sthis.indetityMatrix;
// 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, this.glFramebuffer); renderGroup.render(this.projection, this.glFramebuffer);
} }
else else
{ {
renderGroup.renderSpecific(displayObject, this.projection, this.glFramebuffer); renderGroup.renderSpecific(displayObject, this.projection, this.glFramebuffer);
} }
} }
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.glFramebuffer); this.renderGroup.render(this.projection, this.glFramebuffer);
} }
displayObject.worldTransform = originalWorldTransform; displayObject.worldTransform = originalWorldTransform;
} };
/** /**
@ -221,28 +221,27 @@ 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);
this.renderer.context.setTransform(1,0,0,1,0,0); this.renderer.context.setTransform(1,0,0,1,0,0);
//PIXI.texturesToUpdate.push(this.baseTexture);
// PIXI.texturesToUpdate.push(this.baseTexture); };
}

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

@ -17,56 +17,56 @@ 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;
@ -77,18 +77,18 @@ PIXI.Texture.prototype.constructor = PIXI.Texture;
* @param event * @param event
* @private * @private
*/ */
PIXI.Texture.prototype.onBaseTextureLoaded = function(event) PIXI.Texture.prototype.onBaseTextureLoaded = function()
{ {
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 } );
} };
/** /**
* Destroys this texture * Destroys this texture
@ -98,8 +98,8 @@ 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();
} };
/** /**
* Specifies the rectangle region of the baseTexture * Specifies the rectangle region of the baseTexture
@ -109,20 +109,20 @@ 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 } );
} };
/** /**
* Helper function that returns a texture based on an image url * Helper function that returns a texture based on an image url
@ -136,16 +136,16 @@ PIXI.Texture.prototype.setFrame = function(frame)
*/ */
PIXI.Texture.fromImage = function(imageUrl, crossorigin, scaleMode) PIXI.Texture.fromImage = function(imageUrl, crossorigin, scaleMode)
{ {
var texture = PIXI.TextureCache[imageUrl]; var texture = PIXI.TextureCache[imageUrl];
if(!texture) if(!texture)
{ {
texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin, scaleMode)); texture = new PIXI.Texture(PIXI.BaseTexture.fromImage(imageUrl, crossorigin, scaleMode));
PIXI.TextureCache[imageUrl] = texture; PIXI.TextureCache[imageUrl] = texture;
} }
return texture; return texture;
} };
/** /**
* Helper function that returns a texture based on a frame id * Helper function that returns a texture based on a frame id
@ -158,10 +158,10 @@ PIXI.Texture.fromImage = function(imageUrl, crossorigin, scaleMode)
*/ */
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;
} };
/** /**
* Helper function that returns a texture based on a canvas element * Helper function that returns a texture based on a canvas element
@ -174,9 +174,9 @@ PIXI.Texture.fromFrame = function(frameId)
*/ */
PIXI.Texture.fromCanvas = function(canvas, scaleMode) PIXI.Texture.fromCanvas = function(canvas, scaleMode)
{ {
var baseTexture = new PIXI.BaseTexture(canvas, scaleMode); var baseTexture = new PIXI.BaseTexture(canvas, scaleMode);
return new PIXI.Texture(baseTexture); return new PIXI.Texture(baseTexture);
} };
/** /**
@ -189,8 +189,8 @@ PIXI.Texture.fromCanvas = function(canvas, scaleMode)
*/ */
PIXI.Texture.addTextureToCache = function(texture, id) PIXI.Texture.addTextureToCache = function(texture, id)
{ {
PIXI.TextureCache[id] = texture; PIXI.TextureCache[id] = texture;
} };
/** /**
* Remove a texture from the textureCache. * Remove a texture from the textureCache.
@ -202,10 +202,10 @@ 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..
PIXI.Texture.frameUpdates = []; PIXI.Texture.frameUpdates = [];

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

@ -19,25 +19,29 @@
*/ */
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 { var canvas = document.createElement( 'canvas' ); return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ); } catch( e ) { return false; } } )(); var webgl = ( function () { try {
var canvas = document.createElement( 'canvas' );
return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) );
} catch( e ) {
return false;
}
} )();
if(webgl) if(webgl)
{ {
var ie = (navigator.userAgent.toLowerCase().indexOf('trident') != -1); var ie = (navigator.userAgent.toLowerCase().indexOf('trident') !== -1);
webgl = !ie; webgl = !ie;
} }
//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,60 +8,60 @@
* *
* @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 );
} }
}; };
this.removeAllEventListeners = function( type ) { this.removeAllEventListeners = function( type ) {
var a = listeners[type]; var a = listeners[type];

207
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,69 +42,76 @@ 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 avl = [];
for(var i=0; i<n; i++) avl.push(i);
var i = 0; var tgs = [];
var al = n; var avl = [];
while(al > 3) for(var i = 0; i < n; i++) avl.push(i);
{
var i0 = avl[(i+0)%al];
var i1 = avl[(i+1)%al];
var i2 = avl[(i+2)%al];
var ax = p[2*i0], ay = p[2*i0+1]; i = 0;
var bx = p[2*i1], by = p[2*i1+1]; var al = n;
var cx = p[2*i2], cy = p[2*i2+1]; while(al > 3)
{
var i0 = avl[(i+0)%al];
var i1 = avl[(i+1)%al];
var i2 = avl[(i+2)%al];
var earFound = false; var ax = p[2*i0], ay = p[2*i0+1];
if(PIXI.PolyK._convex(ax, ay, bx, by, cx, cy, sign)) var bx = p[2*i1], by = p[2*i1+1];
{ var cx = p[2*i2], cy = p[2*i2+1];
earFound = true;
for(var j=0; j<al; j++)
{
var vi = avl[j];
if(vi==i0 || vi==i1 || vi==i2) continue;
if(PIXI.PolyK._PointInTriangle(p[2*vi], p[2*vi+1], ax, ay, bx, by, cx, cy)) {earFound = false; break;}
}
}
if(earFound)
{
tgs.push(i0, i1, i2);
avl.splice((i+1)%al, 1);
al--;
i = 0;
}
else if(i++ > 3*al)
{
// need to flip flip reverse it!
// reset!
if(sign)
{
var tgs = [];
avl = [];
for(var i=0; i<n; i++) avl.push(i);
i = 0; var earFound = false;
al = n; if(PIXI.PolyK._convex(ax, ay, bx, by, cx, cy, sign))
{
earFound = true;
for(var j = 0; j < al; j++)
{
var vi = avl[j];
if(vi === i0 || vi === i1 || vi === i2) continue;
sign = false; if(PIXI.PolyK._PointInTriangle(p[2*vi], p[2*vi+1], ax, ay, bx, by, cx, cy)) {
} earFound = false;
else break;
{ }
console.log("PIXI Warning: shape too complex to fill") }
return []; }
}
} if(earFound)
} {
tgs.push(avl[0], avl[1], avl[2]); tgs.push(i0, i1, i2);
return tgs; avl.splice((i+1)%al, 1);
} al--;
i = 0;
}
else if(i++ > 3*al)
{
// need to flip flip reverse it!
// reset!
if(sign)
{
tgs = [];
avl = [];
for(i = 0; i < n; i++) avl.push(i);
i = 0;
al = n;
sign = false;
}
else
{
window.console.log("PIXI Warning: shape too complex to fill");
return [];
}
}
}
tgs.push(avl[0], avl[1], avl[2]);
return tgs;
};
/** /**
* Checks if a point is within a triangle * Checks if a point is within a triangle
@ -115,26 +122,26 @@ 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);
} };
/** /**
* Checks if a shape is convex * Checks if a shape is convex
@ -145,5 +152,5 @@ PIXI.PolyK._PointInTriangle = function(px, py, ax, ay, bx, by, cx, cy)
*/ */
PIXI.PolyK._convex = function(ax, ay, bx, by, cx, cy, sign) 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;
} };

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

@ -18,13 +18,13 @@
var lastTime = 0; 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) {
window.requestAnimationFrame = function(callback, element) { window.requestAnimationFrame = function(callback) {
var currTime = new Date().getTime(); var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); }, var id = window.setTimeout(function() { callback(currTime + timeToCall); },
@ -32,50 +32,52 @@ if (!window.requestAnimationFrame)
lastTime = currTime + timeToCall; lastTime = currTime + timeToCall;
return id; return id;
}; };
}
if (!window.cancelAnimationFrame) if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) { window.cancelAnimationFrame = function(id) {
clearTimeout(id); clearTimeout(id);
}; };
}
window.requestAnimFrame = window.requestAnimationFrame; 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) { PIXI.hex2rgb = 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];
} };
/** /**
* A polyfill for Function.prototype.bind * A polyfill for Function.prototype.bind
* *
* @method bind * @method bind
*/ */
if (typeof Function.prototype.bind != 'function') { if (typeof Function.prototype.bind !== 'function') {
Function.prototype.bind = (function () { Function.prototype.bind = (function () {
var slice = Array.prototype.slice; var slice = Array.prototype.slice;
return function (thisArg) { return function (thisArg) {
var target = this, boundArgs = slice.call(arguments, 1); var target = this, boundArgs = slice.call(arguments, 1);
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;
}; };
})(); })();
} }
/** /**
@ -84,57 +86,57 @@ if (typeof Function.prototype.bind != 'function') {
* @class AjaxRequest * @class AjaxRequest
* @constructor * @constructor
*/ */
var AjaxRequest = PIXI.AjaxRequest = function() PIXI.AjaxRequest = function AjaxRequest()
{ {
var activexmodes = ["Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.3.0", "Microsoft.XMLHTTP"] //activeX versions to check for in IE var activexmodes = ['Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.3.0', 'Microsoft.XMLHTTP']; //activeX versions to check for in IE
if (window.ActiveXObject) 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 window.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 window.XMLHttpRequest();
} }
else else
{ {
return false; return false;
} }
} };
/* /*
* DEBUGGING ONLY * DEBUGGING ONLY
*/ */
PIXI.runList = function(item) PIXI.runList = function(item)
{ {
console.log(">>>>>>>>>") window.console.log('>>>>>>>>>');
console.log("_") window.console.log('_');
var safe = 0; var safe = 0;
var tmp = item.first; var tmp = item.first;
console.log(tmp); window.console.log(tmp);
while(tmp._iNext) while(tmp._iNext)
{ {
safe++; safe++;
tmp = tmp._iNext; tmp = tmp._iNext;
console.log(tmp); window.console.log(tmp);
// console.log(tmp); // console.log(tmp);
if(safe > 100) if(safe > 100)
{ {
console.log("BREAK") window.console.log('BREAK');
break break;
} }
} }
} };

27
tasks/karma.js Normal file
View file

@ -0,0 +1,27 @@
'use strict';
var path = require('path');
var server = require('karma').server;
module.exports = function (grunt) {
grunt.registerMultiTask('karma', 'run karma.', function() {
var done = this.async();
var options = this.options({
background: false
});
var data = this.data;
//merge options onto data, with data taking precedence
data = grunt.util._.merge(options, data);
data.configFile = path.resolve(data.configFile);
if (data.configFile) {
data.configFile = grunt.template.process(data.configFile);
}
server.start(
data,
function(code) {
done(!code);
});
});
};

BIN
test/functional/example-1-basics/bunny.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 449 B

BIN
test/functional/example-1-basics/frame-30.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
test/functional/example-1-basics/frame-60.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
test/functional/example-1-basics/frame-90.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.5 KiB

133
test/functional/example-1-basics/index.js Normal file
View file

@ -0,0 +1,133 @@
describe('Example 1 - Basics', function () {
'use strict';
var baseUri = '/base/test/functional/example-1-basics';
var expect = chai.expect;
var currentFrame = 0;
var frameEvents = {};
var stage;
var renderer;
var bunny;
function onFrame(frame, callback) {
frameEvents[frame] = callback;
}
function animate() {
currentFrame += 1;
window.requestAnimFrame( animate );
// just for fun, lets rotate mr rabbit a little
bunny.rotation += 0.1;
// render the stage
renderer.render(stage);
if (frameEvents[currentFrame])
frameEvents[currentFrame](currentFrame);
}
function initScene() {
// create an new instance of a pixi stage
stage = new PIXI.Stage(0x66FF99);
// create a renderer instance
renderer = PIXI.autoDetectRenderer(400, 300);
console.log('Is PIXI.WebGLRenderer: ' + (renderer instanceof PIXI.WebGLRenderer));
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
window.requestAnimFrame( animate );
// create a texture from an image path
var texture = PIXI.Texture.fromImage(baseUri + '/bunny.png');
// create a new Sprite using the texture
bunny = new PIXI.Sprite(texture);
// center the sprites anchor point
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
// move the sprite t the center of the screen
bunny.position.x = 200;
bunny.position.y = 150;
stage.addChild(bunny);
}
it('assets loaded', function (done) {
var loader = new PIXI.AssetLoader([
baseUri + '/bunny.png',
baseUri + '/frame-30.png',
baseUri + '/frame-60.png',
baseUri + '/frame-90.png'
]);
// loader.on('onProgress', function (event) {
// console.log(event.content);
// });
loader.on('onComplete', function () {
done();
initScene();
});
loader.load();
});
it('frame 30 should match', function (done) {
this.timeout(700);
onFrame(30, function () {
var str = renderer.view.toDataURL('image/png');
//console.log('<img src="' + str + '" />');
resemble(str)
.compareTo(baseUri + '/frame-30.png')
.onComplete(function (data) {
expect(data).to.be.an('object');
expect(data.isSameDimensions).to.equal(true);
expect(data.misMatchPercentage).to.be.below(0.2);
done();
});
});
});
it('frame 60 should match', function (done) {
this.timeout(1200);
onFrame(60, function () {
var str = renderer.view.toDataURL('image/png');
//console.log('<img src="' + str + '" />');
resemble(str)
.compareTo(baseUri + '/frame-60.png')
.onComplete(function (data) {
expect(data).to.be.an('object');
expect(data.isSameDimensions).to.equal(true);
expect(data.misMatchPercentage).to.be.below(0.2);
done();
});
});
});
it('frame 90 should match', function (done) {
this.timeout(1700);
onFrame(90, function () {
var str = renderer.view.toDataURL('image/png');
//console.log('<img src="' + str + '" />');
resemble(str)
.compareTo(baseUri + '/frame-90.png')
.onComplete(function (data) {
expect(data).to.be.an('object');
expect(data.isSameDimensions).to.equal(true);
expect(data.misMatchPercentage).to.be.below(0.2);
done();
});
});
});
// it('capture something', function (done) {
// this.timeout(2000000);
// onFrame(30, function () {
// var img = new Image();
// img.src = renderer.view.toDataURL('image/png');
// document.body.appendChild(img);
// });
// });
});

22
test/index.html
View file

@ -1,22 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Pixi.js Test Suite</title>
<link rel="stylesheet" href="/test/lib/qunit-1.11.0.css" />
<!-- QUnit includes -->
<script src="/test/lib/qunit-1.11.0.js"></script>
<script>
window.Q = QUnit; //alias QUnit
Q.config.autostart = false;
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="/bin/pixi.dev.js"></script>
<script src="/test/lib/require.js" data-main="testsuite"></script>
</body>
</html>

82
test/karma.conf.js Normal file
View file

@ -0,0 +1,82 @@
module.exports = function(config) {
config.set({
// base path, that will be used to resolve files and exclude
basePath : '../',
frameworks : ['mocha'],
// list of files / patterns to load in the browser
files : [
'node_modules/chai/chai.js',
'bin/pixi.dev.js',
'test/lib/**/*.js',
'test/unit/**/*.js',
// 'test/functional/**/*.js',
{pattern: 'test/**/*.png', watched: false, included: false, served: true}
],
// list of files to exclude
exclude : [],
// use dolts reporter, as travis terminal does not support escaping sequences
// possible values: 'dots', 'progress', 'junit', 'teamcity'
// CLI --reporters progress
reporters : ['progress'],
// web server port
// CLI --port 9876
port : 9876,
// cli runner port
// CLI --runner-port 9100
runnerPort : 9100,
// enable / disable colors in the output (reporters and logs)
// CLI --colors --no-colors
colors : true,
// level of logging
// possible values: karma.LOG_DISABLE || karma.LOG_ERROR || karma.LOG_WARN || karma.LOG_INFO || karma.LOG_DEBUG
// CLI --log-level debug
logLevel : config.LOG_DEBUG,
// enable / disable watching file and executing tests whenever any file changes
// CLI --auto-watch --no-auto-watch
autoWatch : false,
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
// CLI --browsers Chrome,Firefox,Safari
browsers : ['Firefox'],
// If browser does not capture in given timeout [ms], kill it
// CLI --capture-timeout 5000
captureTimeout : 5000,
// Auto run tests on start (when browsers are captured) and exit
// CLI --single-run --no-single-run
singleRun : true,
// report which specs are slower than 500ms
// CLI --report-slower-than 500
reportSlowerThan : 500,
preprocessors : {
// '**/client/js/*.js': 'coverage'
},
plugins : [
'karma-mocha',
// 'karma-chrome-launcher',
'karma-firefox-launcher',
// 'karma-phantomjs-launcher'
]
});
};

40
test/lib/pixi/core/Matrix.js Normal file
View file

@ -0,0 +1,40 @@
function pixi_core_Matrix_confirmNewMat3(matrix) {
var expect = chai.expect;
expect(matrix).to.be.an.instanceof(PIXI.Matrix);
expect(matrix).to.not.be.empty;
expect(matrix[1]).to.equal(0);
expect(matrix[2]).to.equal(0);
expect(matrix[3]).to.equal(0);
expect(matrix[4]).to.equal(1);
expect(matrix[5]).to.equal(0);
expect(matrix[6]).to.equal(0);
expect(matrix[7]).to.equal(0);
expect(matrix[8]).to.equal(1);
}
function pixi_core_Matrix_confirmNewMat4(matrix) {
var expect = chai.expect;
expect(matrix).to.be.an.instanceof(PIXI.Matrix);
expect(matrix).to.not.be.empty;
expect(matrix[0]).to.equal(1);
expect(matrix[1]).to.equal(0);
expect(matrix[2]).to.equal(0);
expect(matrix[3]).to.equal(0);
expect(matrix[4]).to.equal(0);
expect(matrix[5]).to.equal(1);
expect(matrix[6]).to.equal(0);
expect(matrix[7]).to.equal(0);
expect(matrix[8]).to.equal(0);
expect(matrix[9]).to.equal(0);
expect(matrix[10]).to.equal(1);
expect(matrix[11]).to.equal(0);
expect(matrix[12]).to.equal(0);
expect(matrix[13]).to.equal(0);
expect(matrix[14]).to.equal(0);
expect(matrix[15]).to.equal(1);
}

10
test/lib/pixi/core/Point.js Normal file
View file

@ -0,0 +1,10 @@
function pixi_core_Point_confirm(obj, x, y) {
var expect = chai.expect;
expect(obj).to.be.an.instanceof(PIXI.Point);
expect(obj).to.respondTo('clone');
expect(obj).to.have.property('x', x);
expect(obj).to.have.property('y', y);
}

13
test/lib/pixi/core/Rectangle.js Normal file
View file

@ -0,0 +1,13 @@
function pixi_core_Rectangle_confirm(obj, x, y, width, height) {
var expect = chai.expect;
expect(obj).to.be.an.instanceof(PIXI.Rectangle);
expect(obj).to.respondTo('clone');
expect(obj).to.respondTo('contains');
expect(obj).to.have.property('x', x);
expect(obj).to.have.property('y', y);
expect(obj).to.have.property('width', width);
expect(obj).to.have.property('height', height);
}

43
test/lib/pixi/display/DisplayObject.js Normal file
View file

@ -0,0 +1,43 @@
function pixi_display_DisplayObject_confirmNew(obj) {
var expect = chai.expect;
expect(obj).to.be.an.instanceof(PIXI.DisplayObject);
expect(obj).to.respondTo('setInteractive');
expect(obj).to.respondTo('addFilter');
expect(obj).to.respondTo('removeFilter');
expect(obj).to.respondTo('updateTransform');
expect(obj).to.have.property('last', obj);
expect(obj).to.have.property('first', obj);
expect(obj).to.contain.property('position');
pixi_core_Point_confirm(obj.position, 0, 0);
expect(obj).to.contain.property('scale');
pixi_core_Point_confirm(obj.scale, 1, 1);
expect(obj).to.contain.property('pivot');
pixi_core_Point_confirm(obj.pivot, 0, 0);
expect(obj).to.have.property('rotation', 0);
expect(obj).to.have.property('alpha', 1);
expect(obj).to.have.property('visible', true);
expect(obj).to.have.property('buttonMode', false);
expect(obj).to.have.property('parent', null);
expect(obj).to.have.property('worldAlpha', 1);
expect(obj).to.have.property('hitArea');
expect(obj).to.have.property('interactive'); // TODO: Have a better default value
expect('mask' in obj).to.be.true; // TODO: Have a better default value
expect(obj.mask).to.be.undefined;
expect(obj).to.have.property('renderable');
expect(obj).to.have.property('stage');
expect(obj).to.have.deep.property('worldTransform.length', 9);
pixi_core_Matrix_confirmNewMat3(obj.worldTransform);
expect(obj).to.have.deep.property('localTransform.length', 9);
pixi_core_Matrix_confirmNewMat3(obj.localTransform);
expect(obj).to.have.deep.property('color.length', 0);
expect(obj).to.have.property('dynamic', true);
}

16
test/lib/pixi/display/DisplayObjectContainer.js Normal file
View file

@ -0,0 +1,16 @@
function pixi_display_DisplayObjectContainer_confirmNew(obj) {
var expect = chai.expect;
pixi_display_DisplayObject_confirmNew(obj);
expect(obj).to.be.an.instanceof(PIXI.DisplayObjectContainer);
expect(obj).to.respondTo('addChild');
expect(obj).to.respondTo('addChildAt');
expect(obj).to.respondTo('swapChildren');
expect(obj).to.respondTo('getChildAt');
expect(obj).to.respondTo('removeChild');
expect(obj).to.respondTo('updateTransform');
expect(obj).to.have.deep.property('children.length', 0);
}

28
test/lib/pixi/display/Sprite.js Normal file
View file

@ -0,0 +1,28 @@
function pixi_display_Sprite_confirmNew(obj, done) {
var expect = chai.expect;
pixi_display_DisplayObjectContainer_confirmNew(obj);
expect(obj).to.be.an.instanceof(PIXI.Sprite);
expect(obj).to.respondTo('setTexture');
expect(obj).to.respondTo('onTextureUpdate');
expect(obj).to.have.property('hitArea', null);
expect(obj).to.have.property('interactive', false);
expect(obj).to.have.property('renderable', true);
expect(obj).to.have.property('stage', null);
expect(obj).to.have.property('anchor');
pixi_core_Point_confirm(obj.anchor, 0, 0);
expect(obj).to.have.property('blendMode', PIXI.blendModes.NORMAL);
expect(obj).to.have.property('width', 1); // TODO: is 1 expected
expect(obj).to.have.property('height', 1); // TODO: is 1 expected
// FIXME: Just make this a boolean that is always there
expect(!!obj.updateFrame).to.equal(obj.texture.baseTexture.hasLoaded);
expect(obj).to.have.property('texture');
pixi_textures_Texture_confirmNew(obj.texture, done);
}

12
test/lib/pixi/extras/Strip.js Normal file
View file

@ -0,0 +1,12 @@
function pixi_extras_Strip_confirmNew(obj) {
var expect = chai.expect;
pixi_display_DisplayObjectContainer_confirmNew(obj);
expect(obj).to.be.an.instanceof(PIXI.Strip);
expect(obj).to.respondTo('setTexture');
expect(obj).to.respondTo('onTextureUpdate');
// TODO: Test properties
}

31
test/lib/pixi/textures/Texture.js Normal file
View file

@ -0,0 +1,31 @@
function pixi_textures_Texture_confirmNew(obj, done) {
var expect = chai.expect;
function confirmFrameDone() {
pixi_core_Rectangle_confirm(obj.frame, 0, 0, obj.baseTexture.width, obj.baseTexture.height);
expect(obj).to.have.property('width', obj.baseTexture.width);
expect(obj).to.have.property('height', obj.baseTexture.height);
done();
}
expect(obj).to.be.an.instanceof(PIXI.Texture);
pixi_utils_EventTarget_like(obj);
expect(obj).to.have.property('baseTexture')
.and.to.be.an.instanceof(PIXI.BaseTexture);
expect(obj).to.have.property('scope', obj);
expect(obj).to.have.property('trim');
pixi_core_Point_confirm(obj.trim, 0, 0);
expect(obj).to.have.property('frame');
if (obj.baseTexture.hasLoaded) {
confirmFrameDone();
} else {
obj.addEventListener('update', confirmFrameDone);
pixi_core_Rectangle_confirm(obj.frame, 0, 0, 1, 1);
}
}

8
test/lib/pixi/utils/EventTarget.js Normal file
View file

@ -0,0 +1,8 @@
function pixi_utils_EventTarget_like(obj) {
var expect = chai.expect;
expect(obj).to.respondTo('addEventListener');
expect(obj).to.respondTo('dispatchEvent');
expect(obj).to.respondTo('removeEventListener');
}

244
test/lib/qunit-1.11.0.css
View file

@ -1,244 +0,0 @@
/**
* QUnit v1.11.0 - A JavaScript Unit Testing Framework
*
* http://qunitjs.com
*
* Copyright 2012 jQuery Foundation and other contributors
* Released under the MIT license.
* http://jquery.org/license
*/
/** Font Family and Sizes */
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
}
#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
#qunit-tests { font-size: smaller; }
/** Resets */
#qunit-tests, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
margin: 0;
padding: 0;
}
/** Header */
#qunit-header {
padding: 0.5em 0 0.5em 1em;
color: #8699a4;
background-color: #0d3349;
font-size: 1.5em;
line-height: 1em;
font-weight: normal;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
}
#qunit-header a {
text-decoration: none;
color: #c2ccd1;
}
#qunit-header a:hover,
#qunit-header a:focus {
color: #fff;
}
#qunit-testrunner-toolbar label {
display: inline-block;
padding: 0 .5em 0 .1em;
}
#qunit-banner {
height: 5px;
}
#qunit-testrunner-toolbar {
padding: 0.5em 0 0.5em 2em;
color: #5E740B;
background-color: #eee;
overflow: hidden;
}
#qunit-userAgent {
padding: 0.5em 0 0.5em 2.5em;
background-color: #2b81af;
color: #fff;
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
}
#qunit-modulefilter-container {
float: right;
}
/** Tests: Pass/Fail */
#qunit-tests {
list-style-position: inside;
}
#qunit-tests li {
padding: 0.4em 0.5em 0.4em 2.5em;
border-bottom: 1px solid #fff;
list-style-position: inside;
}
#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running {
display: none;
}
#qunit-tests li strong {
cursor: pointer;
}
#qunit-tests li a {
padding: 0.5em;
color: #c2ccd1;
text-decoration: none;
}
#qunit-tests li a:hover,
#qunit-tests li a:focus {
color: #000;
}
#qunit-tests li .runtime {
float: right;
font-size: smaller;
}
.qunit-assert-list {
margin-top: 0.5em;
padding: 0.5em;
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.qunit-collapsed {
display: none;
}
#qunit-tests table {
border-collapse: collapse;
margin-top: .2em;
}
#qunit-tests th {
text-align: right;
vertical-align: top;
padding: 0 .5em 0 0;
}
#qunit-tests td {
vertical-align: top;
}
#qunit-tests pre {
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
}
#qunit-tests del {
background-color: #e0f2be;
color: #374e0c;
text-decoration: none;
}
#qunit-tests ins {
background-color: #ffcaca;
color: #500;
text-decoration: none;
}
/*** Test Counts */
#qunit-tests b.counts { color: black; }
#qunit-tests b.passed { color: #5E740B; }
#qunit-tests b.failed { color: #710909; }
#qunit-tests li li {
padding: 5px;
background-color: #fff;
border-bottom: none;
list-style-position: inside;
}
/*** Passing Styles */
#qunit-tests li li.pass {
color: #3c510c;
background-color: #fff;
border-left: 10px solid #C6E746;
}
#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
#qunit-tests .pass .test-name { color: #366097; }
#qunit-tests .pass .test-actual,
#qunit-tests .pass .test-expected { color: #999999; }
#qunit-banner.qunit-pass { background-color: #C6E746; }
/*** Failing Styles */
#qunit-tests li li.fail {
color: #710909;
background-color: #fff;
border-left: 10px solid #EE5757;
white-space: pre;
}
#qunit-tests > li:last-child {
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
#qunit-tests .fail { color: #000000; background-color: #EE5757; }
#qunit-tests .fail .test-name,
#qunit-tests .fail .module-name { color: #000000; }
#qunit-tests .fail .test-actual { color: #EE5757; }
#qunit-tests .fail .test-expected { color: green; }
#qunit-banner.qunit-fail { background-color: #EE5757; }
/** Result */
#qunit-testresult {
padding: 0.5em 0.5em 0.5em 2.5em;
color: #2b81af;
background-color: #D2E0E6;
border-bottom: 1px solid white;
}
#qunit-testresult .module-name {
font-weight: bold;
}
/** Fixture */
#qunit-fixture {
position: absolute;
top: -10000px;
left: -10000px;
width: 1000px;
height: 1000px;
}

2152
test/lib/qunit-1.11.0.js
View file

File diff suppressed because it is too large Load diff

35
test/lib/require.js
View file

@ -1,35 +0,0 @@
/*
RequireJS 2.1.5 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved.
Available via the MIT or new BSD license.
see: http://github.com/jrburke/requirejs for details
*/
var requirejs,require,define;
(function(aa){function I(b){return"[object Function]"===L.call(b)}function J(b){return"[object Array]"===L.call(b)}function y(b,c){if(b){var d;for(d=0;d<b.length&&(!b[d]||!c(b[d],d,b));d+=1);}}function M(b,c){if(b){var d;for(d=b.length-1;-1<d&&(!b[d]||!c(b[d],d,b));d-=1);}}function s(b,c){return ga.call(b,c)}function m(b,c){return s(b,c)&&b[c]}function G(b,c){for(var d in b)if(s(b,d)&&c(b[d],d))break}function R(b,c,d,m){c&&G(c,function(c,j){if(d||!s(b,j))m&&"string"!==typeof c?(b[j]||(b[j]={}),R(b[j],
c,d,m)):b[j]=c});return b}function u(b,c){return function(){return c.apply(b,arguments)}}function ba(b){if(!b)return b;var c=aa;y(b.split("."),function(b){c=c[b]});return c}function B(b,c,d,m){c=Error(c+"\nhttp://requirejs.org/docs/errors.html#"+b);c.requireType=b;c.requireModules=m;d&&(c.originalError=d);return c}function ha(b){function c(a,f,b){var e,n,c,g,d,S,i,h=f&&f.split("/");e=h;var j=k.map,l=j&&j["*"];if(a&&"."===a.charAt(0))if(f){e=m(k.pkgs,f)?h=[f]:h.slice(0,h.length-1);f=a=e.concat(a.split("/"));
for(e=0;f[e];e+=1)if(n=f[e],"."===n)f.splice(e,1),e-=1;else if(".."===n)if(1===e&&(".."===f[2]||".."===f[0]))break;else 0<e&&(f.splice(e-1,2),e-=2);e=m(k.pkgs,f=a[0]);a=a.join("/");e&&a===f+"/"+e.main&&(a=f)}else 0===a.indexOf("./")&&(a=a.substring(2));if(b&&j&&(h||l)){f=a.split("/");for(e=f.length;0<e;e-=1){c=f.slice(0,e).join("/");if(h)for(n=h.length;0<n;n-=1)if(b=m(j,h.slice(0,n).join("/")))if(b=m(b,c)){g=b;d=e;break}if(g)break;!S&&(l&&m(l,c))&&(S=m(l,c),i=e)}!g&&S&&(g=S,d=i);g&&(f.splice(0,d,
g),a=f.join("/"))}return a}function d(a){A&&y(document.getElementsByTagName("script"),function(f){if(f.getAttribute("data-requiremodule")===a&&f.getAttribute("data-requirecontext")===i.contextName)return f.parentNode.removeChild(f),!0})}function z(a){var f=m(k.paths,a);if(f&&J(f)&&1<f.length)return d(a),f.shift(),i.require.undef(a),i.require([a]),!0}function h(a){var f,b=a?a.indexOf("!"):-1;-1<b&&(f=a.substring(0,b),a=a.substring(b+1,a.length));return[f,a]}function j(a,f,b,e){var n,C,g=null,d=f?f.name:
null,j=a,l=!0,k="";a||(l=!1,a="_@r"+(M+=1));a=h(a);g=a[0];a=a[1];g&&(g=c(g,d,e),C=m(q,g));a&&(g?k=C&&C.normalize?C.normalize(a,function(a){return c(a,d,e)}):c(a,d,e):(k=c(a,d,e),a=h(k),g=a[0],k=a[1],b=!0,n=i.nameToUrl(k)));b=g&&!C&&!b?"_unnormalized"+(Q+=1):"";return{prefix:g,name:k,parentMap:f,unnormalized:!!b,url:n,originalName:j,isDefine:l,id:(g?g+"!"+k:k)+b}}function r(a){var f=a.id,b=m(p,f);b||(b=p[f]=new i.Module(a));return b}function t(a,f,b){var e=a.id,n=m(p,e);if(s(q,e)&&(!n||n.defineEmitComplete))"defined"===
f&&b(q[e]);else r(a).on(f,b)}function v(a,f){var b=a.requireModules,e=!1;if(f)f(a);else if(y(b,function(f){if(f=m(p,f))f.error=a,f.events.error&&(e=!0,f.emit("error",a))}),!e)l.onError(a)}function w(){T.length&&(ia.apply(H,[H.length-1,0].concat(T)),T=[])}function x(a){delete p[a];delete V[a]}function F(a,f,b){var e=a.map.id;a.error?a.emit("error",a.error):(f[e]=!0,y(a.depMaps,function(e,c){var g=e.id,d=m(p,g);d&&(!a.depMatched[c]&&!b[g])&&(m(f,g)?(a.defineDep(c,q[g]),a.check()):F(d,f,b))}),b[e]=!0)}
function D(){var a,f,b,e,n=(b=1E3*k.waitSeconds)&&i.startTime+b<(new Date).getTime(),c=[],g=[],h=!1,j=!0;if(!W){W=!0;G(V,function(b){a=b.map;f=a.id;if(b.enabled&&(a.isDefine||g.push(b),!b.error))if(!b.inited&&n)z(f)?h=e=!0:(c.push(f),d(f));else if(!b.inited&&(b.fetched&&a.isDefine)&&(h=!0,!a.prefix))return j=!1});if(n&&c.length)return b=B("timeout","Load timeout for modules: "+c,null,c),b.contextName=i.contextName,v(b);j&&y(g,function(a){F(a,{},{})});if((!n||e)&&h)if((A||da)&&!X)X=setTimeout(function(){X=
0;D()},50);W=!1}}function E(a){s(q,a[0])||r(j(a[0],null,!0)).init(a[1],a[2])}function K(a){var a=a.currentTarget||a.srcElement,b=i.onScriptLoad;a.detachEvent&&!Y?a.detachEvent("onreadystatechange",b):a.removeEventListener("load",b,!1);b=i.onScriptError;(!a.detachEvent||Y)&&a.removeEventListener("error",b,!1);return{node:a,id:a&&a.getAttribute("data-requiremodule")}}function L(){var a;for(w();H.length;){a=H.shift();if(null===a[0])return v(B("mismatch","Mismatched anonymous define() module: "+a[a.length-
1]));E(a)}}var W,Z,i,N,X,k={waitSeconds:7,baseUrl:"./",paths:{},pkgs:{},shim:{},config:{}},p={},V={},$={},H=[],q={},U={},M=1,Q=1;N={require:function(a){return a.require?a.require:a.require=i.makeRequire(a.map)},exports:function(a){a.usingExports=!0;if(a.map.isDefine)return a.exports?a.exports:a.exports=q[a.map.id]={}},module:function(a){return a.module?a.module:a.module={id:a.map.id,uri:a.map.url,config:function(){return k.config&&m(k.config,a.map.id)||{}},exports:q[a.map.id]}}};Z=function(a){this.events=
m($,a.id)||{};this.map=a;this.shim=m(k.shim,a.id);this.depExports=[];this.depMaps=[];this.depMatched=[];this.pluginMaps={};this.depCount=0};Z.prototype={init:function(a,b,c,e){e=e||{};if(!this.inited){this.factory=b;if(c)this.on("error",c);else this.events.error&&(c=u(this,function(a){this.emit("error",a)}));this.depMaps=a&&a.slice(0);this.errback=c;this.inited=!0;this.ignore=e.ignore;e.enabled||this.enabled?this.enable():this.check()}},defineDep:function(a,b){this.depMatched[a]||(this.depMatched[a]=
!0,this.depCount-=1,this.depExports[a]=b)},fetch:function(){if(!this.fetched){this.fetched=!0;i.startTime=(new Date).getTime();var a=this.map;if(this.shim)i.makeRequire(this.map,{enableBuildCallback:!0})(this.shim.deps||[],u(this,function(){return a.prefix?this.callPlugin():this.load()}));else return a.prefix?this.callPlugin():this.load()}},load:function(){var a=this.map.url;U[a]||(U[a]=!0,i.load(this.map.id,a))},check:function(){if(this.enabled&&!this.enabling){var a,b,c=this.map.id;b=this.depExports;
var e=this.exports,n=this.factory;if(this.inited)if(this.error)this.emit("error",this.error);else{if(!this.defining){this.defining=!0;if(1>this.depCount&&!this.defined){if(I(n)){if(this.events.error)try{e=i.execCb(c,n,b,e)}catch(d){a=d}else e=i.execCb(c,n,b,e);this.map.isDefine&&((b=this.module)&&void 0!==b.exports&&b.exports!==this.exports?e=b.exports:void 0===e&&this.usingExports&&(e=this.exports));if(a)return a.requireMap=this.map,a.requireModules=[this.map.id],a.requireType="define",v(this.error=
a)}else e=n;this.exports=e;if(this.map.isDefine&&!this.ignore&&(q[c]=e,l.onResourceLoad))l.onResourceLoad(i,this.map,this.depMaps);x(c);this.defined=!0}this.defining=!1;this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0)}}else this.fetch()}},callPlugin:function(){var a=this.map,b=a.id,d=j(a.prefix);this.depMaps.push(d);t(d,"defined",u(this,function(e){var n,d;d=this.map.name;var g=this.map.parentMap?this.map.parentMap.name:null,h=
i.makeRequire(a.parentMap,{enableBuildCallback:!0});if(this.map.unnormalized){if(e.normalize&&(d=e.normalize(d,function(a){return c(a,g,!0)})||""),e=j(a.prefix+"!"+d,this.map.parentMap),t(e,"defined",u(this,function(a){this.init([],function(){return a},null,{enabled:!0,ignore:!0})})),d=m(p,e.id)){this.depMaps.push(e);if(this.events.error)d.on("error",u(this,function(a){this.emit("error",a)}));d.enable()}}else n=u(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),n.error=u(this,
function(a){this.inited=!0;this.error=a;a.requireModules=[b];G(p,function(a){0===a.map.id.indexOf(b+"_unnormalized")&&x(a.map.id)});v(a)}),n.fromText=u(this,function(e,c){var d=a.name,g=j(d),C=O;c&&(e=c);C&&(O=!1);r(g);s(k.config,b)&&(k.config[d]=k.config[b]);try{l.exec(e)}catch(ca){return v(B("fromtexteval","fromText eval for "+b+" failed: "+ca,ca,[b]))}C&&(O=!0);this.depMaps.push(g);i.completeLoad(d);h([d],n)}),e.load(a.name,h,n,k)}));i.enable(d,this);this.pluginMaps[d.id]=d},enable:function(){V[this.map.id]=
this;this.enabling=this.enabled=!0;y(this.depMaps,u(this,function(a,b){var c,e;if("string"===typeof a){a=j(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);this.depMaps[b]=a;if(c=m(N,a.id)){this.depExports[b]=c(this);return}this.depCount+=1;t(a,"defined",u(this,function(a){this.defineDep(b,a);this.check()}));this.errback&&t(a,"error",this.errback)}c=a.id;e=p[c];!s(N,c)&&(e&&!e.enabled)&&i.enable(a,this)}));G(this.pluginMaps,u(this,function(a){var b=m(p,a.id);b&&!b.enabled&&i.enable(a,
this)}));this.enabling=!1;this.check()},on:function(a,b){var c=this.events[a];c||(c=this.events[a]=[]);c.push(b)},emit:function(a,b){y(this.events[a],function(a){a(b)});"error"===a&&delete this.events[a]}};i={config:k,contextName:b,registry:p,defined:q,urlFetched:U,defQueue:H,Module:Z,makeModuleMap:j,nextTick:l.nextTick,onError:v,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");var b=k.pkgs,c=k.shim,e={paths:!0,config:!0,map:!0};G(a,function(a,b){e[b]?
"map"===b?(k.map||(k.map={}),R(k[b],a,!0,!0)):R(k[b],a,!0):k[b]=a});a.shim&&(G(a.shim,function(a,b){J(a)&&(a={deps:a});if((a.exports||a.init)&&!a.exportsFn)a.exportsFn=i.makeShimExports(a);c[b]=a}),k.shim=c);a.packages&&(y(a.packages,function(a){a="string"===typeof a?{name:a}:a;b[a.name]={name:a.name,location:a.location||a.name,main:(a.main||"main").replace(ja,"").replace(ea,"")}}),k.pkgs=b);G(p,function(a,b){!a.inited&&!a.map.unnormalized&&(a.map=j(b))});if(a.deps||a.callback)i.require(a.deps||[],
a.callback)},makeShimExports:function(a){return function(){var b;a.init&&(b=a.init.apply(aa,arguments));return b||a.exports&&ba(a.exports)}},makeRequire:function(a,f){function d(e,c,h){var g,k;f.enableBuildCallback&&(c&&I(c))&&(c.__requireJsBuild=!0);if("string"===typeof e){if(I(c))return v(B("requireargs","Invalid require call"),h);if(a&&s(N,e))return N[e](p[a.id]);if(l.get)return l.get(i,e,a,d);g=j(e,a,!1,!0);g=g.id;return!s(q,g)?v(B("notloaded",'Module name "'+g+'" has not been loaded yet for context: '+
b+(a?"":". Use require([])"))):q[g]}L();i.nextTick(function(){L();k=r(j(null,a));k.skipMap=f.skipMap;k.init(e,c,h,{enabled:!0});D()});return d}f=f||{};R(d,{isBrowser:A,toUrl:function(b){var d,f=b.lastIndexOf("."),g=b.split("/")[0];if(-1!==f&&(!("."===g||".."===g)||1<f))d=b.substring(f,b.length),b=b.substring(0,f);return i.nameToUrl(c(b,a&&a.id,!0),d,!0)},defined:function(b){return s(q,j(b,a,!1,!0).id)},specified:function(b){b=j(b,a,!1,!0).id;return s(q,b)||s(p,b)}});a||(d.undef=function(b){w();var c=
j(b,a,!0),d=m(p,b);delete q[b];delete U[c.url];delete $[b];d&&(d.events.defined&&($[b]=d.events),x(b))});return d},enable:function(a){m(p,a.id)&&r(a).enable()},completeLoad:function(a){var b,c,e=m(k.shim,a)||{},d=e.exports;for(w();H.length;){c=H.shift();if(null===c[0]){c[0]=a;if(b)break;b=!0}else c[0]===a&&(b=!0);E(c)}c=m(p,a);if(!b&&!s(q,a)&&c&&!c.inited){if(k.enforceDefine&&(!d||!ba(d)))return z(a)?void 0:v(B("nodefine","No define call for "+a,null,[a]));E([a,e.deps||[],e.exportsFn])}D()},nameToUrl:function(a,
b,c){var e,d,h,g,j,i;if(l.jsExtRegExp.test(a))g=a+(b||"");else{e=k.paths;d=k.pkgs;g=a.split("/");for(j=g.length;0<j;j-=1)if(i=g.slice(0,j).join("/"),h=m(d,i),i=m(e,i)){J(i)&&(i=i[0]);g.splice(0,j,i);break}else if(h){a=a===h.name?h.location+"/"+h.main:h.location;g.splice(0,j,a);break}g=g.join("/");g+=b||(/\?/.test(g)||c?"":".js");g=("/"===g.charAt(0)||g.match(/^[\w\+\.\-]+:/)?"":k.baseUrl)+g}return k.urlArgs?g+((-1===g.indexOf("?")?"?":"&")+k.urlArgs):g},load:function(a,b){l.load(i,a,b)},execCb:function(a,
b,c,d){return b.apply(d,c)},onScriptLoad:function(a){if("load"===a.type||ka.test((a.currentTarget||a.srcElement).readyState))P=null,a=K(a),i.completeLoad(a.id)},onScriptError:function(a){var b=K(a);if(!z(b.id))return v(B("scripterror","Script error",a,[b.id]))}};i.require=i.makeRequire();return i}var l,w,x,D,t,E,P,K,Q,fa,la=/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,ma=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,ea=/\.js$/,ja=/^\.\//;w=Object.prototype;var L=w.toString,ga=w.hasOwnProperty,ia=
Array.prototype.splice,A=!!("undefined"!==typeof window&&navigator&&document),da=!A&&"undefined"!==typeof importScripts,ka=A&&"PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,Y="undefined"!==typeof opera&&"[object Opera]"===opera.toString(),F={},r={},T=[],O=!1;if("undefined"===typeof define){if("undefined"!==typeof requirejs){if(I(requirejs))return;r=requirejs;requirejs=void 0}"undefined"!==typeof require&&!I(require)&&(r=require,require=void 0);l=requirejs=function(b,c,d,z){var h,
j="_";!J(b)&&"string"!==typeof b&&(h=b,J(c)?(b=c,c=d,d=z):b=[]);h&&h.context&&(j=h.context);(z=m(F,j))||(z=F[j]=l.s.newContext(j));h&&z.configure(h);return z.require(b,c,d)};l.config=function(b){return l(b)};l.nextTick="undefined"!==typeof setTimeout?function(b){setTimeout(b,4)}:function(b){b()};require||(require=l);l.version="2.1.5";l.jsExtRegExp=/^\/|:|\?|\.js$/;l.isBrowser=A;w=l.s={contexts:F,newContext:ha};l({});y(["toUrl","undef","defined","specified"],function(b){l[b]=function(){var c=F._;return c.require[b].apply(c,
arguments)}});if(A&&(x=w.head=document.getElementsByTagName("head")[0],D=document.getElementsByTagName("base")[0]))x=w.head=D.parentNode;l.onError=function(b){throw b;};l.load=function(b,c,d){var l=b&&b.config||{},h;if(A)return h=l.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml","html:script"):document.createElement("script"),h.type=l.scriptType||"text/javascript",h.charset="utf-8",h.async=!0,h.setAttribute("data-requirecontext",b.contextName),h.setAttribute("data-requiremodule",c),
h.attachEvent&&!(h.attachEvent.toString&&0>h.attachEvent.toString().indexOf("[native code"))&&!Y?(O=!0,h.attachEvent("onreadystatechange",b.onScriptLoad)):(h.addEventListener("load",b.onScriptLoad,!1),h.addEventListener("error",b.onScriptError,!1)),h.src=d,K=h,D?x.insertBefore(h,D):x.appendChild(h),K=null,h;if(da)try{importScripts(d),b.completeLoad(c)}catch(j){b.onError(B("importscripts","importScripts failed for "+c+" at "+d,j,[c]))}};A&&M(document.getElementsByTagName("script"),function(b){x||(x=
b.parentNode);if(t=b.getAttribute("data-main"))return r.baseUrl||(E=t.split("/"),Q=E.pop(),fa=E.length?E.join("/")+"/":"./",r.baseUrl=fa,t=Q),t=t.replace(ea,""),r.deps=r.deps?r.deps.concat(t):[t],!0});define=function(b,c,d){var l,h;"string"!==typeof b&&(d=c,c=b,b=null);J(c)||(d=c,c=[]);!c.length&&I(d)&&d.length&&(d.toString().replace(la,"").replace(ma,function(b,d){c.push(d)}),c=(1===d.length?["require"]:["require","exports","module"]).concat(c));if(O){if(!(l=K))P&&"interactive"===P.readyState||M(document.getElementsByTagName("script"),
function(b){if("interactive"===b.readyState)return P=b}),l=P;l&&(b||(b=l.getAttribute("data-requiremodule")),h=F[l.getAttribute("data-requirecontext")])}(h?h.defQueue:T).push([b,c,d])};define.amd={jQuery:!0};l.exec=function(b){return eval(b)};l(r)}})(this);

535
test/lib/resemble.js Normal file
View file

@ -0,0 +1,535 @@
/*
Author: James Cryer
Company: Huddle
Last updated date: 21 Feb 2013
URL: https://github.com/Huddle/Resemble.js
*/
(function(_this){
'use strict';
_this['resemble'] = function( fileData ){
var data = {};
var images = [];
var updateCallbackArray = [];
var tolerance = { // between 0 and 255
red: 16,
green: 16,
blue: 16,
minBrightness: 16,
maxBrightness: 240
};
var ignoreAntialiasing = false;
var ignoreColors = false;
function triggerDataUpdate(){
var len = updateCallbackArray.length;
var i;
for(i=0;i<len;i++){
if (typeof updateCallbackArray[i] === 'function'){
updateCallbackArray[i](data);
}
}
}
function loop(x, y, callback){
var i,j;
for (i=0;i<x;i++){
for (j=0;j<y;j++){
callback(i, j);
}
}
}
function parseImage(sourceImageData, width, height){
var pixleCount = 0;
var redTotal = 0;
var greenTotal = 0;
var blueTotal = 0;
var brightnessTotal = 0;
loop(height, width, function(verticalPos, horizontalPos){
var offset = (verticalPos*width + horizontalPos) * 4;
var red = sourceImageData[offset];
var green = sourceImageData[offset + 1];
var blue = sourceImageData[offset + 2];
var brightness = getBrightness(red,green,blue);
pixleCount++;
redTotal += red / 255 * 100;
greenTotal += green / 255 * 100;
blueTotal += blue / 255 * 100;
brightnessTotal += brightness / 255 * 100;
});
data.red = Math.floor(redTotal / pixleCount);
data.green = Math.floor(greenTotal / pixleCount);
data.blue = Math.floor(blueTotal / pixleCount);
data.brightness = Math.floor(brightnessTotal / pixleCount);
triggerDataUpdate();
}
function loadImageData( fileData, callback ){
var fileReader,
hiddenImage = new Image();
hiddenImage.onload = function() {
var hiddenCanvas = document.createElement('canvas');
var imageData;
var width = hiddenImage.width;
var height = hiddenImage.height;
hiddenCanvas.width = width;
hiddenCanvas.height = height;
hiddenCanvas.getContext('2d').drawImage(hiddenImage, 0, 0, width, height);
imageData = hiddenCanvas.getContext('2d').getImageData(0, 0, width, height);
images.push(imageData);
callback(imageData, width, height);
};
if (typeof fileData === 'string') {
hiddenImage.src = fileData;
} else {
fileReader = new FileReader();
fileReader.onload = function (event) {
hiddenImage.src = event.target.result;
};
fileReader.readAsDataURL(fileData);
}
}
function isColorSimilar(a, b, color){
var absDiff = Math.abs(a - b);
if(typeof a === 'undefined'){
return false;
}
if(typeof b === 'undefined'){
return false;
}
if(a === b){
return true;
} else if ( absDiff < tolerance[color] ) {
return true;
} else {
return false;
}
}
function isNumber(n) {
return !isNaN(parseFloat(n));
}
function isPixelBrightnessSimilar(d1, d2){
return Math.abs(d1.brightness - d2.brightness) < tolerance.minBrightness;
}
function getBrightness(r,g,b){
return 0.3*r + 0.59*g + 0.11*b;
}
function isRGBSame(d1,d2){
var red = d1.r === d2.r;
var green = d1.g === d2.g;
var blue = d1.b === d2.b;
return red && green && blue;
}
function isRGBSimilar(d1, d2){
var red = isColorSimilar(d1.r,d2.r,'red');
var green = isColorSimilar(d1.g,d2.g,'green');
var blue = isColorSimilar(d1.b,d2.b,'blue');
return red && green && blue;
}
function isContrasting(d1, d2){
return Math.abs(d1.brightness - d2.brightness) > tolerance.maxBrightness;
}
function getHue(r,g,b){
r = r / 255;
g = g / 255;
b = b / 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h;
var d;
if (max == min){
h = 0; // achromatic
} else{
d = max - min;
switch(max){
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return h;
}
function isAntialiased(sourcePix, data, cacheSet, verticalPos, horizontalPos, width){
var offset;
var targetPix;
var distance = 1;
var i;
var j;
var hasHighContrastSibling = 0;
var hasSiblingWithDifferentHue = 0;
var hasEquivilantSibling = 0;
addHueInfo(sourcePix);
for (i = distance*-1; i <= distance; i++){
for (j = distance*-1; j <= distance; j++){
if(i===0 && j===0){
// ignore source pixel
} else {
offset = ((verticalPos+j)*width + (horizontalPos+i)) * 4;
targetPix = getPixelInfo(data, offset, cacheSet);
if(targetPix === null){
continue;
}
addBrightnessInfo(targetPix);
addHueInfo(targetPix);
if( isContrasting(sourcePix, targetPix) ){
hasHighContrastSibling++;
}
if( isRGBSame(sourcePix,targetPix) ){
hasEquivilantSibling++;
}
if( Math.abs(targetPix.h - sourcePix.h) > 0.3 ){
hasSiblingWithDifferentHue++;
}
if( hasSiblingWithDifferentHue > 1 || hasHighContrastSibling > 1){
return true;
}
}
}
}
if(hasEquivilantSibling < 2){
return true;
}
return false;
}
function errorPixel(px, offset){
px[offset] = 255; //r
px[offset + 1] = 0; //g
px[offset + 2] = 255; //b
px[offset + 3] = 255; //a
}
function copyPixel(px, offset, data){
px[offset] = data.r; //r
px[offset + 1] = data.g; //g
px[offset + 2] = data.b; //b
px[offset + 3] = 255; //a
}
function copyGrayScalePixel(px, offset, data){
px[offset] = data.brightness; //r
px[offset + 1] = data.brightness; //g
px[offset + 2] = data.brightness; //b
px[offset + 3] = 255; //a
}
function getPixelInfo(data, offset, cacheSet){
var r;
var g;
var b;
var d;
if(typeof data[offset] !== 'undefined'){
r = data[offset];
g = data[offset+1];
b = data[offset+2];
d = {
r: r,
g: g,
b: b
};
return d;
} else {
return null;
}
}
function addBrightnessInfo(data){
data.brightness = getBrightness(data.r,data.g,data.b); // 'corrected' lightness
}
function addHueInfo(data){
data.h = getHue(data.r,data.g,data.b);
}
function analyseImages(img1, img2, width, height){
var hiddenCanvas = document.createElement('canvas');
var data1 = img1.data;
var data2 = img2.data;
hiddenCanvas.width = width;
hiddenCanvas.height = height;
var context = hiddenCanvas.getContext('2d');
var imgd = context.createImageData(width,height);
var targetPix = imgd.data;
var mismatchCount = 0;
var time = Date.now();
var skip;
if( (width > 1200 || height > 1200) && ignoreAntialiasing){
skip = 6;
}
loop(height, width, function(verticalPos, horizontalPos){
if(skip){ // only skip if the image isn't small
if(verticalPos % skip === 0 || horizontalPos % skip === 0){
return;
}
}
var offset = (verticalPos*width + horizontalPos) * 4;
var pixel1 = getPixelInfo(data1, offset, 1);
var pixel2 = getPixelInfo(data2, offset, 2);
if(pixel1 === null || pixel2 === null){
return;
}
if (ignoreColors){
addBrightnessInfo(pixel1);
addBrightnessInfo(pixel2);
if( isPixelBrightnessSimilar(pixel1, pixel2) ){
copyGrayScalePixel(targetPix, offset, pixel2);
} else {
errorPixel(targetPix, offset);
mismatchCount++;
}
return;
}
if( isRGBSimilar(pixel1, pixel2) ){
copyPixel(targetPix, offset, pixel2);
} else if( ignoreAntialiasing && (
addBrightnessInfo(pixel1), // jit pixel info augmentation looks a little weird, sorry.
addBrightnessInfo(pixel2),
isAntialiased(pixel1, data1, 1, verticalPos, horizontalPos, width) ||
isAntialiased(pixel2, data2, 2, verticalPos, horizontalPos, width)
)){
if( isPixelBrightnessSimilar(pixel1, pixel2) ){
copyGrayScalePixel(targetPix, offset, pixel2);
} else {
errorPixel(targetPix, offset);
mismatchCount++;
}
} else {
errorPixel(targetPix, offset);
mismatchCount++;
}
});
data.misMatchPercentage = (mismatchCount / (height*width) * 100).toFixed(2);
data.analysisTime = Date.now() - time;
data.getImageDataUrl = function(text){
var barHeight = 0;
if(text){
barHeight = addLabel(text,context,hiddenCanvas);
}
context.putImageData(imgd, 0, barHeight);
return hiddenCanvas.toDataURL("image/png");
};
}
function addLabel(text, context, hiddenCanvas){
var textPadding = 2;
context.font = '12px sans-serif';
var textWidth = context.measureText(text).width + textPadding*2;
var barHeight = 22;
if(textWidth > hiddenCanvas.width){
hiddenCanvas.width = textWidth;
}
hiddenCanvas.height += barHeight;
context.fillStyle = "#666";
context.fillRect(0,0,hiddenCanvas.width,barHeight -4);
context.fillStyle = "#fff";
context.fillRect(0,barHeight -4,hiddenCanvas.width, 4);
context.fillStyle = "#fff";
context.textBaseline = "top";
context.font = '12px sans-serif';
context.fillText(text, textPadding, 1);
return barHeight;
}
function normalise(img, w, h){
var c;
var context;
if(img.height < h || img.width < w){
c = document.createElement('canvas');
c.width = w;
c.height = h;
context = c.getContext('2d');
context.putImageData(img, 0, 0);
return context.getImageData(0, 0, w, h);
}
return img;
}
function compare(one, two){
function onceWeHaveBoth(){
var width;
var height;
if(images.length === 2){
width = images[0].width > images[1].width ? images[0].width : images[1].width;
height = images[0].height > images[1].height ? images[0].height : images[1].height;
if( (images[0].width === images[1].width) && (images[0].height === images[1].height) ){
data.isSameDimensions = true;
} else {
data.isSameDimensions = false;
}
analyseImages( normalise(images[0],width, height), normalise(images[1],width, height), width, height);
triggerDataUpdate();
}
}
images = [];
loadImageData(one, onceWeHaveBoth);
loadImageData(two, onceWeHaveBoth);
}
function getCompareApi(param){
var secondFileData,
hasMethod = typeof param === 'function';
if( !hasMethod ){
// assume it's file data
secondFileData = param;
}
var self = {
ignoreNothing: function(){
tolerance.red = 16;
tolerance.green = 16;
tolerance.blue = 16;
tolerance.minBrightness = 16;
tolerance.maxBrightness = 240;
ignoreAntialiasing = false;
ignoreColors = false;
if(hasMethod) { param(); }
return self;
},
ignoreAntialiasing: function(){
tolerance.red = 32;
tolerance.green = 32;
tolerance.blue = 32;
tolerance.minBrightness = 64;
tolerance.maxBrightness = 96;
ignoreAntialiasing = true;
ignoreColors = false;
if(hasMethod) { param(); }
return self;
},
ignoreColors: function(){
tolerance.minBrightness = 16;
tolerance.maxBrightness = 240;
ignoreAntialiasing = false;
ignoreColors = true;
if(hasMethod) { param(); }
return self;
},
onComplete: function( callback ){
updateCallbackArray.push(callback);
var wrapper = function(){
compare(fileData, secondFileData);
};
wrapper();
return getCompareApi(wrapper);
}
};
return self;
}
return {
onComplete: function( callback ){
updateCallbackArray.push(callback);
loadImageData(fileData, function(imageData, width, height){
parseImage(imageData.data, width, height);
});
},
compareTo: function(secondFileData){
return getCompareApi(secondFileData);
}
};
};
}(this));

36
test/testsuite.js
View file

@ -1,36 +0,0 @@
requirejs.config({
baseUrl: '/test/unit/'
});
define(function(require) {
var testModules = [
'Pixi',
'Point',
'Rectangle',
'DisplayObject',
'DisplayObjectContainer',
'Sprite',
'MovieClip',
'InteractionManager',
'Stage',
'utils/Utils',
'utils/EventTarget',
'utils/Matrix',
'utils/Detector',
'renderers/WebGLShaders',
'renderers/WebGLRenderer',
'renderers/WebGLBatch',
'renderers/CanvasRenderer',
'extras/Strip',
'extras/Rope',
'textures/BaseTexture',
'textures/Texture',
'loaders/SpriteSheetLoader',
'loaders/AssetLoader'
];
// Resolve all testModules and then start the Test Runner.
require(testModules, function() {
QUnit.start();
});
});

BIN
test/textures/SpriteSheet-Aliens.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 142 KiB

BIN
test/textures/SpriteSheet-Explosion.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 899 KiB

BIN
test/textures/bunny.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 449 B

3
test/unit/DisplayObject.js
View file

@ -1,3 +0,0 @@
define(function() {
Q.module('DisplayObject');
});

3
test/unit/DisplayObjectContainer.js
View file

@ -1,3 +0,0 @@
define(function() {
Q.module('DisplayObjectContainer');
});

3
test/unit/InteractionManager.js
View file

@ -1,3 +0,0 @@
define(function() {
Q.module('InteractionManager');
});

3
test/unit/MovieClip.js
View file

@ -1,3 +0,0 @@
define(function() {
Q.module('MovieClip');
});

3
test/unit/Pixi.js
View file

@ -1,3 +0,0 @@
define(function() {
Q.module('Pixi');
});

3
test/unit/Point.js
View file

@ -1,3 +0,0 @@
define(function() {
Q.module('Point');
});

3
test/unit/Rectangle.js
View file

@ -1,3 +0,0 @@
define(function() {
Q.module('Rectangle');
});

Some files were not shown because too many files have changed in this diff Show more